Render objects based on zoom level in Azure maps

Question

I want to show a pop up on marker after a certain zoom level is it possible?

Answer 1

Data layers have a min/max zoom option that can be used to specify the zoom level range that layer should appear. Popups however don't have such an option, but such logic can be added by making use of the zoomend event. Here is a code sample.

var map;

function GetMap() {
    //Initialize a map instance.
    map = new atlas.Map('myMap', {
        view: 'Auto',

        //Add authentication details for connecting to Azure Maps.
        authOptions: {
            authType: 'subscriptionKey',
            subscriptionKey: '<Your Azure Maps Key>'
        }
    });

    //Wait until the map resources are ready.
    map.events.add('ready', function () {
    
        //Create one or more popups.
        var popup = new atlas.Popup({
            //Set the position.
            position: [-99.213191, 39.507909], //Middle of the USA 
            
            //Add the content.
            content: '<div style="padding:10px;">Hello World</div>',
             
             //Likely don't want the user closing the popup if the map zoom level is managing this.
             closeButton: false
        });
        
        //Link some information to the popup that tells us the zoom level range.
        popup.metadata = {
            //In this case the popup will appear when the map is between zoom levels 3 and 8.
            minzoom: 3,
            maxzoom: 8
        };
        
        //Add the popup to the map.
        map.popups.add(popup);

        //Add an event to monitor the zoomend event. 
        //If you are only using a small number of popups in your app you could use the "zoom" event which will fire as the map moves, but can quickly cause performance issues if there is a a couple dozen or more popups.
        map.events.add('zoomend', mapZoomed);
    });
}

function mapZoomed(e){
    //Get the zoom level.
    var zoom = map.getCamera().zoom;

    var popups = map.popups.getPopups();
    
    for(var i=0, len = popups.length; i < len; i++){                
        var popup = popups[i];
        
        if(popup.metadata) {
            //Open/close the popup based on the zoom level range information.
            if(zoom >= popup.metadata.minzoom && zoom <= popup.metadata.maxzoom) {
                popup.open();
            } else {
                popup.close();
            }
        }
    }
}