Currently I am getting streets from the geocoding api then displying houses in that street in satelite view. Is there a way to automatically detect house roofs and automatically draw polygons over them?
mapboxgl.accessToken = accessToken;
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/satellite-v9', // style URL
center: [lng, lat], // starting position [lng, lat]
zoom: 17, // starting zoom
});
const draw = new MapboxDraw({
displayControlsDefault: false,
controls: {
polygon: true,
trash: true
},
// Set mapbox-gl-draw to draw by default.
// The user does not have to click the polygon control button first.
defaultMode: 'draw_polygon'
});
map.addControl(draw)
map.addControl(new mapboxgl.NavigationControl())
map.on('draw.create', updateArea)
map.on('draw.delete', updateArea)
map.on('draw.update', updateArea)
function updateArea(e) {
const data = draw.getAll()
const answer = document.getElementById('calculated-area')
if (data.features.length > 0) {
const area = turf.area(data)
// Restrict the area to 2 decimal points.
const rounded_area = Math.round(area * 100) / 100
const areaInCM = rounded_area * 10000
answer.innerHTML =
`<p><strong>${areaInCM.toLocaleString('en-US')}</strong> square centimeters</p>`;
} else {
answer.innerHTML = ''
if (e.type !== 'draw.delete')
alert('Click the map to draw a polygon.')
}
}