In mapbox GL JS, the ability to cluster is for point according to the documentation.
But can we cluster polygon ?
Thanks for your input ?
No, it is not possible to cluster polygons by "default" when using Mapbox GL JS. As noted here in the documentation for the cluster property of a GeoJSON source:
If the data is a collection of point features, setting this to true clusters the points by radius into groups.
Since polygons are not of type point (rather, they are of type polygon), the cluster option cannot be applied. This makes sense when you think about it, because polygons are far too arbitrary to "cluster." Points are well-defined in their shape and scope, meaning that they can be pre-clustered in the source object itself by specifying cluster: true as shown in this example from the Mapbox GL JS examples page.
You can create another source with points from your polygons:
https://gis.stackexchange.com/questions/304794/ogr2ogr-polygon-to-point-with-point-inside-the-polygon
Then just use the source with points for clustering when zoomed out and the source with polygons for rendering those polygons when zoomed in.
Related
I have a source with a geojson with a bunch of Features of type Point.
Is it possible to draw a line through them? I've tried Layout with type line, but it produces points...
I don't want to create an additional source with the same data.
Is it possible to draw a line through them?
No. For starters, Mapbox GL JS wouldn't know in which order to draw the line.
I don't want to create an additional source with the same data.
That would be the correct solution: simply construct a new GeoJSON on the fly that uses the coordinates of each point as the coordinates of a line LineString feature. I'm not sure what your reservations are.
I am trying to draw polygons using leaflet js and I have a geojson file that has co-ordinates of different regions in langLat [longitude,latitude] format. But leaflet polygon requires us to use the co-ordinates in latLang [latitude,longitude] format. So how do I revert the array elements considering there will be different multiple dimensions of arrays for different region?
I'm using Vue-leaflet component.
<l-polygon :lat-lngs="coordinates"></l-polygon>
I hope my question made sense. Any help would be appreciated.
I am using React Mapbox GL in my project and as i use Marker for about 10000 data points and performance is not that good. I have read the documentation and it says
Note: When rendering many objects, avoid using Markers as it will negatively affect performance. Use Layers and Features instead.
How to use Layers and Feature to display markers?
To render something with layers and features, put one or more Feature components inside of a Layer component. You can give each Feature a position using the coordinates prop.
Now, what's left over is to style these features. How you do this depends on what your markers previously contained, but for example, if you'd like to draw circles for each of the positions, you can set the Layer's type to circle and under the paint prop, provide values for circle-color and circle-radius (these are described in the mapbox-gl API docs.
For drawing images for each coordinate, you can use the icon-image layout property on the Layer (you would have to either use a preexisting icon or upload one to Mapbox Studio).
You can see some sample code in the demos, for example the all-shapes demo styles data with circles.
I'm trying to move a geoJSON polygon (the outline of a city's administrative borders) from it's original location to another arbitrary one, maintaining its shape while respecting the Mercator projection. Much like how this site does it: https://thetruesize.com/
I've experimented with moving images around the map and those do respect the mercator projection when moved north, but this isn't ideal as the geoJSON would have to be converted to an image on the fly...
Is there an easy way to do this in mapbox without modifying the entire geoJSON to new coordinates?
Thanks!
transformTranslate from Turf.js can help you to translate GeoJSON features or geometries.
I sometimes had some problems when moving polygons across the globe with transformTranslate, so I wrote some function (repl.it) that behaves a bit differently.
I have different layer's arrays, but I want to put one of these in foreground when I change it latitude and longitude.
How I can do that in javascript?
Thanks!
Browse over to the trusty Leaflet documentation, and look at the setZIndex() function on all tile layers.
layer1.setZIndex(1);
layer2.setZIndex(2);
It depends on whether your layer is Raster or Vector.
For layers inheriting from Path, such as Polylines, Polygons, etc use bringToFront
layer.bringToFront()
For TileLayers (and layer types that inherit from TileLayers) use setZIndex
layer.setZIndex(<number>)