How to extract map source id with getLayer in Mapbox?

Question

This question is related to a previous question.

I have a list of buttons in my Mapbox map, and a jQuery function to sort through their values and show me specific layers accordingly. Because this part of the interaction is about showing layers of raster maps, I would like each selection to have a fitBounds event.

I wonder if I can extract the bounds using getLayer? Since it gives out an array of properties to each given layer, I need to extract the source link, which can then be used with getBounds. But how?

Here's my code.

$("#yearselect button").click(function(){
  var mapnum = $.text(this);
  if ($(this).hasClass("selected")) {
     $(this).removeClass("selected");
     map.setLayoutProperty(mapnum, "visibility", "none");
     basicreset(); // resets other filters
     yearreset(); // resets previous selections
    }
  else {
     $(this).addClass("selected");
     $("#yearselect button").not(this).removeClass("selected");
     $("#typeselect input").prop("checked", true);
     $("#yearselect button").each(function() {
       map.setLayoutProperty(($.text(this)), "visibility", "none");
       });
     map.setLayoutProperty("railway", "visibility", "visible");
     map.setLayoutProperty("railway case", "visibility", "visible");
     map.setLayoutProperty("sat", "visibility", "visible");
     map.setLayoutProperty(mapnum, "visibility", "visible");
     map.setFilter("vislis-1sep2017", ["none", [">=", "Opening date", mapnum],["<=", "Closing date", mapnum], ["in", "Opening date", "Closing date", "??"]]);
     map.setFilter("railway", ["none", [">", "Opening date", mapnum],["<", "Closing date", mapnum], ["in", "Opening date", "Closing date", "??"]]);
     map.setFilter("railway case", ["none", [">", "Opening date", mapnum],["<", "Closing date", mapnum], ["in", "Opening date", "Closing date", "??"]]);
     map.setPaintProperty("limits", "line-color", "#ffffff");
     document.getElementById('active-year').innerText = mapnum; // updates time slider
     document.getElementById('ranger').value = mapnum;  // moves time slider's range
     $("#resetslider").hide();
     }
   });

Steve Bennett Steve Bennett · Accepted Answer · 2017-10-09T00:01:06

If I understand you correctly, you want to set the map's viewport to match the bounds of a given layer. You should be able to do that like this:

map.fitBounds(map.getSource(map.getLayer('my-layer').source).bounds);

How to extract map source id with getLayer in Mapbox?

1 Answers