Search code examples
javascriptazureazure-maps

Removing a Layer From Azure Maps


I'm working with Azure maps and the weather widget, i have the weather loaded, and works great but now I want to remove it with a button, I put a click event and passed the remove function but it says layers is not a function. Any help would be appreciated. Thanks

function TriggerWeather(model, map) {

    //If there is already a layer, stop it animating.
    if (layer) {
        layer.stop();
        clearInterval(timer);
    }

    //Get the current time.
    var now = new Date().getTime();

    //Get the details for the requested weather layer.
    var layerInfo = weatherLayers[model];

    //Calculate the number of timestamps.
    var numTimestamps = (layerInfo.past + layerInfo.future) / layerInfo.interval;

    var tlOptions = [];

    for (var i = 0; i < numTimestamps; i++) {
        //Calculate time period for an animation frame. Shift the interval by one as the olds tile will expire almost immediately.
        var time = (now - layerInfo.past) + (i + 1) * layerInfo.interval;

        //Create a tile layer option for each timestamp.
        tlOptions.push(createTileLayer(model, time));
    }

    if (layer) {
        layer.setOptions({
            tileLayerOptions: tlOptions
        });
        layer.play();
    } else {
        //Create the animation manager.
        layer = new atlas.layer.AnimatedTileLayer({
            tileLayerOptions: tlOptions,
            duration: numTimestamps * 800, //Allow one second for each frame (tile layer) in the animation.
            autoPlay: true,
            loop: true
        });

        //Add the layer to the map.
        map.layers.add(layer, 'labels');

        //Setup an interval timer to shift the layers (remove oldest, add newest) based on the update interval of the tile layer.
        timer = setInterval(intervalHandler(model), layerInfo.interval);
    }

    $('.weather').click(function() {
        if (layer) {
            // Remove the weather layer if it's already added
            map.layers.remove(layer);
        } else {
            // Add the weather layer if it's not added
            map.layers.add(layer);
        }
    })
}

Solution

  • Looking at the code you provided I'm not sure if there is enough information to debug it, but here is where I would start:

    1. You have the code for adding the click event inside the TriggerWeather function. That click event doesn't appear to be removed ever, so if you call this function more than once, there would be multiple click events fired on button press, and the first one would remove the layer, and the rest would have no layer to remove and thus throw an error. Try adding a break point inside of your click event handler and see how many times it gets fired when you press the button.
    2. I don't see where the layer object is defined/stored. Is it a globally accessible variable? It's possible that this variable isn't visible/accessible within your event handler, and thus the error you are getting.