Control draw order for geojson extrusions in MapboxGL - mapbox

I have a set of GeoJSON polygons which I have extruded at varying heights and placed on a map to be rendered with MapboxGL.
The resulting render will seemingly place, at random, buildings in the foreground behind those in the background. What is the strategy for resolving this?
Image above included for reference.

If you render each building in a separate style layer, the buildings will be rendered in the order that the style layers are added. I encourage you to either sort the style layers by z-index or render all the buildings in the same layer.

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.

overlay data over water but below land surface: Mapbox-gl.js

I want to overlay my data-layer on top of the water but below the land surface.
But the problem is that there is basically no "ground" layer on mapbox layers. There are different layers like 'water', 'roads' etc layered on top of a background which is basically 'land'
I have been able to use 'roads' on top on my data which gives the following images. but is there a way to visualize my data only on 'water' and not on 'land'?
For more information. data is in geojson format. I have used movelayer() funtion of mapbox and checked by moving my datalayer below each layer of map.getStyle().layers one by one.
Also, can this be done in different styles available in mapbox?
To do what you're trying to achieve, you'll have to find another tileset of land polygons to use as a mask. There isn't a way to dynamically clip a layer to within the polygons of another layer, for instance.

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.

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.

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

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.