How can I swap layer visibilty on map zoom?

Question

I thought this should be very easy or have some type of example with Azure Maps...

So I have 3 layers in a map 2 point and 1 polygon added to my map. I want the point layers to be on initially and then if the user zooms in on the map turn off point layers and turn on polygon. This would also happen in reverse if the user zooms out the polygon turns off and the points turn back on.

I have been able to get the 1 point layer to turn off with a click of a button and turn the polygon on but the 1 point layer which is an htmlMarker so I can pulse it for effects.

Also the documentation on adding a layer after another 1 doesn't work. Polygon is on top of both point layers if I leave the all on?

   htmlMarkerLayer = new atlas.layer.SymbolLayer(dataSource, null, {
     filter: ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']], // Only render Point or MultiPoint in this layer.
     name: 'htmlMarkerLayer'
   });
   map.layers.add(htmlMarkerLayer, 'poiPointLayer');

   poiPointLayer = new atlas.layer.SymbolLayer(dataSource, null, {
     filter: ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']], // Only render Point or MultiPoint in this layer.
     name: 'poiPointLayer'
   });
   map.layers.add(poiPointLayer, 'htmlMarkerLayer');

polygonLayer = new atlas.layer.PolygonLayer(dataSource, null, {
        filter: ['any', ['==', ['geometry-type'], 'Polygon'], ['==', ['geometry-type'], 'MultiPolygon']], // Only render Point or MultiPoint in this layer.
        name: 'facilityLayer',
        fillColor: 'gray',
        fillOpacity: 0.5
    });
    map.layers.add(polygonLayer, 'poiPointLayer');

// Does not work on htmlMarker layer with pulse?
      var opts = htmlMarkerLayer.getOptions();
      opts['visible'] = false;
      htmlMarkerLayer.setOptions(opts);

// Works
   opts = poiPointLayer .getOptions();
   opts['visible'] = false;
   poiPointLayer .setOptions(opts);

// Works
   opts = polygonLayer.getOptions();
   opts['visible'] = true;
   polygonLayer.setOptions(opts);

Any thoughts on how I can get any zoom interaction with the map? How can I get htmlMarker layer to turn off?

rbrundritt rbrundritt · Accepted Answer · 2020-04-06T16:54:02

All layers have minZoom and maxZoom options. Use these to specify your limits and it will do what you are asking for. Also, name is not an option of layers. The second parameter when initializing the function (null in your code) is where you can pass in an ID. I made this change in the code below.

polygonLayer = new atlas.layer.PolygonLayer(dataSource, 'facilityLayer', {
    minZoom: 10,
    maxZoom: 24,    
    fillColor: 'gray',
    fillOpacity: 0.5,
    filter: ['any', ['==', ['geometry-type'], 'Polygon'], ['==', ['geometry-type'], 'MultiPolygon']], // Only render Point or MultiPoint in this layer.
});
map.layers.add(polygonLayer, 'poiPointLayer');

poiPointLayer = new atlas.layer.SymbolLayer(dataSource, 'poiPointLayer', {
    minZoom: 0,
    maxZoom: 10,
    filter: ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']], // Only render Point or MultiPoint in this layer.
});
map.layers.add(poiPointLayer, 'htmlMarkerLayer');

For clarity, here is how the minZoom/maxZoom values work:

minZoom -> appears at this zoom level.
maxZoom -> disappears at this level (appears at maxZoom - 1)

How can I swap layer visibilty on map zoom?

1 Answers