Azure maps, merge polygons immediately after a polygon has finished drawing

asked 2021-11-29T16:01:38.75+00:00
Dev 216 Reputation points

Is it possible when immediately after a polygon is drawn, if it is overlapping any other polygon(s) within the map object then merge these to form 1 polygon?

Azure Maps
Azure Maps
An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
337 questions
{count} votes

Accepted answer
  1. answered 2021-11-30T16:13:03.757+00:00
    Per Fahlen 121 Reputation points

    you can listen to 'drawingcomplete'

    No comments

1 additional answer

Sort by: Most helpful
  1. answered 2021-11-30T16:16:16.747+00:00
    Per Fahlen 121 Reputation points
     <script src='https://npmcdn.com/@turf/turf@6.5.0/turf.min.js'></script>
        <script type='text/javascript'>
    
            var map, datasource, drawingManager;
    
            function GetMap() {
                map = new atlas.Map('myMap', {
                    center: [-122.4, 47.6],
                    zoom: 9,
                    view: 'Auto',
                    authOptions: {
                        authType: 'subscriptionKey',
                        subscriptionKey: '<azure maps key>'
                    }
                });
    
                map.events.add('ready', function () {
    
                    datasource = new atlas.source.DataSource();
                    map.sources.add(datasource);
    
                    map.layers.add([
                        new atlas.layer.PolygonLayer(datasource, null, {
                            fillColor: 'rgba(0,155, 255,0.8)'
                        }),
    
                    ]);
    
                    drawingManager = new atlas.drawing.DrawingManager(map, {
                        toolbar: new atlas.control.DrawingToolbar({
                            buttons: ['draw-polygon'],
                            position: 'top-right',
                            style: 'light'
                        })
                    });
                    map.events.add('drawingcomplete', drawingManager, drawingComplete);
                });
    
                function drawingComplete(shape) {
                    drawingManager.source.removeById(shape.data.id);
                    if (datasource.getShapes().length === 0) {
                        datasource.add(shape);
                    }
                    else {
                        let firstFeature = datasource.getShapes().at(0);
                        let intersects = turf.booleanIntersects(shape.toJson(), firstFeature.toJson());
                        if (intersects) {
                            let unionPolygon = turf.union(shape.toJson(), firstFeature.toJson());
                            datasource.removeById(datasource.shapes.at(0).getId());
                            datasource.add(unionPolygon);
                        }
                    }
                }
            }
        </script>