Mapbox GL JS: Set Map Center or Bounds to show visible part of a layer - mapbox

I have a layer with 7000+ polygons and am displaying a portion of the polygons in a web app using "setFilter" on map load. (The filter is choosing the polygons to display dynamically based on data from the url of the current page.)
However, I can't figure out how to make the map center on the particular polygons currently showing (the visible part of that layer), which means the user has to hunt around to find it. There can be multiple polygons visible at one time, and they are a range of different sizes. Any ideas?

If you have the feature collection of polygons that are visible on your map, you can use the turf-extent module to get the geographical extent of the visible polygons, and then call map.fitBounds(extent) to make all visible polygons within the viewport.

Related

Mapbox studio : how to display building at any zoom level

I'm using mapbox studio to customize a map and I haven't found the way to display building-outline layer at any zoom level.
If I'm under of 16 zoom level, this layer disappears... even if I force opacity to 1.
Any idea ?
Thank you in advance
The minimum zoom level for the buildings layer in the current tileset (Mapbox Streets v8) is 13.
This means that if you zoom out further (from 12 to 0) the buildings layer will not be rendered on the map.
See documentation:
https://docs.mapbox.com/vector-tiles/reference/mapbox-streets-v8/#layer-reference
The reason for this restriction is that if you requested your browser to fetch and render every building polygon in a wider area (like an entire city or country), this would be more than a reasonable amount of data to render.
If you have your own buildings polygon data and you create a tileset from that, you could choose to include your data across more zoom levels. However, you might waste a lot of computing resources drawing shapes that are too tiny to understand at those further zoom levels.

Mapbox - Show point of interest markers regardless of zoom level

I'm filtering on the 'poi-label' layer on the default Mapbox Streets V8 data source. What I'd like to have is that certain maki or class labels like 'fitness-centere' to always be visible (both icon and label) regardless of the zoom level.
I see no clear documentation on how to do this using Mapbox studio. Can it be done in that tool?
It is generally not possible to have layers in vector tile sources display at "all zoom levels" because they don't exist at all zoom levels within the vector tile sources.
Generally, the Mapbox tilesets are heavily optimised and only include data at the zoom levels that they are intended to display at in the corresponding Mapbox styles.

Marker versus point feature?

When should one use a marker instead of a feature layer of points in Mapbox?
Points layers can be updated and styled dynamically using all the styling tools of Mapbox GL JS. Features in points layers can also be clicked, presenting a popup just like with a marker.
Given this, when would one want to use a marker?
As Andrew mentioned there are two sides two this:
Accessibility
Markers are implemented as DOM elements and thus can be included in the tab order and can be given accessibility attributes
Animation
As markers are DOM elements animating them is quite easy with a bit of CSS & JS. You can animate points on a circle layer too, but its much more of a hassle.
Small point count
The number of markers/points you can display at once is somewhat limited by what the DOM can manage. My suggestion is that, if you have more than 500 points to display, you should opt for a circle layer instead of markers (this is a very rough estimates and depends on other parameters as well, animation, point size etc.). Using a circle layer you will hit - depending on the hardware - a limit in the 10s of thounds of points.

How can I tell if a Leaflet layer is currently visible?

I'm building a Leaflet plugin that adds/removes layers to/from a Leaflet map. My plugin needs to know if a given layer is visible on-screen. So far, I've come up with the following criteria that a layer must meet in order to be considered "visible":
It must be added to the map. (This is trivial to check in my case.)
It must be within a valid zoom range. (This is also pretty easy to handle.)
It must be visible within the current extent/bounds.
The third criteria is the one I am having difficulty checking. My layers are a variety of different Esri-Leaflet layers. I understand that I can check whether a given point or rectangle is contained within the visible bounds of the map with map.getBounds().contains(...), but my problem is I am not sure how to represent my Esri-Leaflet layer as a rectangle. Not even all Leaflet layers have a getLatLng() method, so this question isn't even Esri-Leaflet specific (e.g. how would you perform the same check on a TileLayer)?
How can I get the bounds of a Leaflet layer, or otherwise check if the layer is visible on the map?
Not a duplicate of:
Get a list of markers/layers within current map bounds in Leaflet
Get the bounding box of the visible leaflet map?

Mapbox gl repeat marker

I try to repeat a marker at the same coordinates when I am moving the map to infinity, in the same way that layers.
example : https://www.mapbox.com/mapbox-gl-js/example/geojson-polygon/
Has anyone found how to do that please?
If it's not possible, conversely is it possible to not repeat layers when you moving the map ?
Thank you
The Link example you provided is not using Markers to render the shaded area. It is using a feature, in this case a polygon, included in a layer (a layer can have many features).
In MapBox the rendered map is made up of any number of layers (including the tile data) which is rendered whenever you scroll or drag to a particular area of the map. For example as you keep dragging to the right in the map it will just keep rendering in the relevant layers and tiles.
The Marker functionality has a different purpose which is as a one off selected point which is useful for a user click or hover interaction.