How to set map.loadImage visibility by zoom level in Mapbox GL JS?

Question

I'm loading an image with the following code:

map.on('load', function () {

map.loadImage('....png', function(error, image) { 
  if (error) throw error;
  map.addImage('b7', image);
  map.addLayer({ 
    "id": "b7",
    "type": "symbol",
    "source": { 
      "type": "geojson",
      "data": {
        "type": "FeatureCollection",
        "features": [{
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [0, 0] 
          } 
        }] 
      }
    },
    "layout": {
      "icon-image": "b7",
      "icon-size": 0.2
    }
  });
});

How can i set the visibility to none, at a certain zoom level?

It looks like that you cant use map.setLayoutProperty on an loadImage. In the console, it says: Error: The layer 'b7' does not exist in the map's style and cannot be styled.

Whey i try something like:

map.setLayoutProperty( 'b7', 'visibility', 'none' );

Any ideas?

cb64 cb64 · Accepted Answer · 2019-04-02T17:07:31

Two suggestions on how to solve this:

First, make sure your image name and layer name are different. It could be that the function is looking for b7 layer but it finds an image named b7 first (or vice versa). Either way this should be changed as it creates conflicting variables.

Second, if that doesn't work try adding your source separately instead of inside the layer.

 map.addSource("mySource", {
  "type": "geojson",
  "data": {
    "type": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-74.981906, 41.742503]
      },
      "properties": {
        "title": "title ",
        "icon": "myImage",
      }
    }]
  }
});

And then add the layer with the source.

 map.addLayer({
  "id": "b7",
  "type": "symbol",
  "source": "mySource",
  "layout": {
    "icon-image": "myImage",
    "icon-size": 0.2
  }
});

You can now call the setLayoutProperty on a zoomstart listener. Add a conditional if you want it only at a specific zoom level using map.getZoom(); You need to be setting the visibility for the layer here, not the image.

map.on('zoomstart', 'b7', function(e) {
  if (map.getZoom() > 12) {
    map.setLayoutProperty('b7', 'visibility', 'none');
  }
})

Snippet is below, let me know if you encounter any problems.

map.on('load', function() {

  map.loadImage('myImage.png', function(error, image) {
    if (error) throw error;
    map.addImage('myImage', image);
    map.addSource("mySource", {
      "type": "geojson",
      "data": {
        "type": "FeatureCollection",
        "features": [{
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [-73.981906, 40.742503]
          },
          "properties": {
            "title": "title ",
            "icon": "myImage",
          }
        }]
      }
    });

    map.addLayer({
      "id": "b7",
      "type": "symbol",
      "source": "mySource",
      "layout": {
        "icon-image": "myImage",
        "icon-size": 0.2
      }
    });
  });
});

map.on('zoomstart', 'b7', function(e) {
  if (map.getZoom() > 12) {
    map.setLayoutProperty('b7', 'visibility', 'none');
  }
})

How to set map.loadImage visibility by zoom level in Mapbox GL JS?

1 Answers