Azure Map Layers And DataSource Not Getting Cleared From Map

Question

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.
                },
            }));

Answer 1

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.