0

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.')
            }
        }

0 Answers0