Azure Map Layers And DataSource Not Getting Cleared From Map

Nilesh Khonde 40 Reputation points
2024-07-01T12:11:16.18+00:00

I am developing a React application in which I am using Azure Maps. Here is my primary function to plot markers on the Azure map (refer to Attachment 1). In another .ts file, I have another function (refer to Attachment 2) in which I am trying to remove the layers and datasource and add a new one. However, I am unable to do so. Is it possible to remove or clear the layers and datasource from another file, or is it mandatory to remove/clear them in the same function? My code works fine, and the datasource and layers are all getting cleared, but it is not reflecting on the map. I don't know why. Any suggestions would be greatly appreciated.

 Promise.all(this_.iconPromises).then(function () {
                this_.primaryMarkerLayer = new atlas.layer.SymbolLayer(this_.datasource, null, {
                    iconOptions: {
                        image: 'gas_station_icon',
                        ignorePlacement: true,
                        allowOverlap: true
                    },
                    textOptions: {
                        textField: ['get', 'title'], //Alternatively replace with 'label' property name.
                        anchor: "top", //Show the label below the pin.
                        offset: [0, 1.2],
                        ignorePlacement: true,
                        allowOverlap: true,
                        color: ['get', 'pink'], //Set the color of the text. Alternatively pass in a color value here if the color will always be one color.
                    },
                })
                this_.hoverLayer = new atlas.layer.SymbolLayer(this_.datasource, null, {
                    iconOptions: {
                        image: 'none' //Hide the icon image.
                    },
                    textOptions: {
                        textField: ['get', 'label'], //Alternatively replace with 'label' property name.
                        anchor: "top", //Show the label below the pin.
                        color: ['get', 'black'], //Set the color of the text. Alternatively pass in a color value here if the color will always be one color.
                        allowOverlap: true,
                        ignorePlacement: true,
                    },
                    filter: ['==', ['id'], ''] //Default filter to an ID of empty string. This should never happen, so this layer won't render anything at this time.
                });
                map.events.add('mousemove', this_.primaryMarkerLayer, function (e: any) {
                    this_.hoverLayer.setOptions({ filter: ['==', ['get', '_azureMapsShapeId'], e.shapes[0].getId()] });
                });

                // Reset the hoverLayers filter when the mouse leaves the shapeLayer .
                map.events.add('mouseleave', this_.primaryMarkerLayer, function (e: any) {
                    this_.hoverLayer.setOptions({ filter: ['==', ['get', '_azureMapsShapeId'], ''] });
                });
                map.events.add('touchstart', this_.primaryMarkerLayer, function (e: any) {
                    this_.hoverLayer.setOptions({ filter: ['==', ['get', '_azureMapsShapeId'], e.shapes[0].getId()] });
                });
                map.events.add('touchend', this_.primaryMarkerLayer, function (e: any) {
                    this_.hoverLayer.setOptions({ filter: ['==', ['get', '_azureMapsShapeId'], ''] });
                });
                map.layers.add([this_.primaryMarkerLayer, this_.hoverLayer]);
                this_.markersColl = [];
                pagingDataRows.forEach(function (data: any, index: any) {
                    if (this_.isValid(data.address1_longitude) && this_.isValid(data.address1_latitude) && this_.isValid(data.address1_latitude.value) && this_.isValid(data.address1_longitude.value)) {
                        markers = new atlas.Shape(new atlas.data.Point([parseFloat(data.address1_longitude.value), parseFloat(data.address1_latitude.value)]), null, {
                            color: 'DodgerBlue',
                            label: data.name.value,
                            // title: "test",
                        });
                    }
                    if (this_.isValid(markers)) {
                        this_.markersColl.push(markers);
                    }
                })
                this_.datasource.add(this_.markersColl);
Promise.all(thisObj.iconPromises).then(function () {
            thisObj._map.sources.add(shapeDatasource);
            circle = new thisObj._atlas.data.Feature(new thisObj._atlas.data.Point([-122.5430235659865, 48.947622108796494]),
                {
                    subType: "Circle",
                    radius: _proximitydisInfo.distance
                })
            shapeDatasource.add(circle);
            //Here I am Trying to Remove the Datasourvce and Layers
            thisObj.datasource.clear();
            map.layers.remove([thisObj.primaryMarkerLayer, thisObj.hoverLayer]);
            thisObj.markersColl.forEach(function (data: any, index: any) {
                var iswithinShape = thisObj._turf.booleanPointInPolygon(data.data.geometry.coordinates,shapeDatasource.shapes[0].circlePolygon)
                if (iswithinShape) {
                    temp.push(data);
                }
            })
            // thisObj.datasource.clear();
            shapeDatasource.add(temp);
            // setTimeout(function(){
            //     shapeDatasource.clear()
            // },5000)
          
            thisObj._map.layers.add(new thisObj._atlas.layer.PolygonLayer(shapeDatasource, null, {
                fillColor: `rgba(${_proximitydisInfo.r},${_proximitydisInfo.g},${_proximitydisInfo.b},${_proximitydisInfo.a})`,
                ignorePlacement: true,
                allowOverlap: true,
            }));
            map.layers.add(new thisObj._atlas.layer.SymbolLayer(shapeDatasource, null, {
                iconOptions: {
                    image: 'gas_station_icon',
                    ignorePlacement: true,
                    allowOverlap: true
                },
                textOptions: {
                    textField: ['get', 'title'], //Alternatively replace with 'label' property name.
                    anchor: "top", //Show the label below the pin.
                    offset: [0, 1.2],
                    ignorePlacement: true,
                    allowOverlap: true,
                    color: ['get', 'pink'], //Set the color of the text. Alternatively pass in a color value here if the color will always be one color.
                },
            }));
Azure Maps
Azure Maps
An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
654 questions
0 comments No comments
{count} votes

2 answers

Sort by: Most helpful
  1. rbrundritt 16,456 Reputation points Microsoft Employee
    2024-07-02T14:37:05.8366667+00:00

    I see you also posted a similar question here: https://learn.microsoft.com/en-us/answers/questions/117382/how-to-clear-previous-layers-point-and-data-in-azu Did that also resolve this issue?

    You can clear data sources from other files as long as they are exposed and accessible from that other page. For example, if it is a global variable window.shapeDatasource or if you expose it through a class as a public property or via a function like getDatasource.

    1 person found this answer helpful.

  2. Deleted

    This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.


    Comments have been turned off. Learn more