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,
        });
    }
    if (this_.isValid(markers)) {
        this_.markersColl.push(markers);
    }
});
this_.datasource.add(this_.markersColl);

});`

// Another Function (Attachment 2)

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 datasource 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);
    }
});

shapeDatasource.add(temp);

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

});

I hope this helps! If you need more specific troubleshooting advice, feel free to provide more details or context.