So my problem is, that I have a tileset which geometries are Multipolygons and when I want to display the district names it places multiple labels instead of just one centered. Is there a way to fix this?
Here is a screenshot for clarification
The data comes from a postgis database, I just export it to a CSV and upload it to mapbox.
I have tried converting the Multipolygon into single Polygons but that ended in the same result.
I also played around with the text padding in mapbox studio but with this option the label placement is very off.
Is there possibly a way trough Mapbox GL JS to fix this issue?
You need to generate a separate label layer. You can use geojson-polygon-labels to do this.
Related
We used wgrib2 to convert weather radar data into NetCDF format. We converted it to GeoPackage format using gdal_translate. We created a Color Map on QGIS 3.10 and the GeoPackage appeared as expected.
We would like to display this on the Internet using these files or processed versions of these files. We have Mapbox GL JS as a candidate for that but it is not required. We have not found a way to display the gpkg files we have generated. How can we get it to display?
https://docs.mapbox.com/mapbox-gl-js/guides/
We generated png images using gdaldem color-relief and we also tried the following method
However, when we zoomed in on the map with this method, the quality of the image was rough and it could not be displayed beautifully.
https://docs.mapbox.com/mapbox-gl-js/example/image-on-a-map/
Since the gpkg we generated displays correctly in QGIS, it would be most desirable to be able to display the gpkg on MapBox. However, if that is not possible, we would like to display that data beautifully, even in another format.
We also tried to generate tiles using gdal2tiles.py. It worked as we expected when we created data up to zoom level 10. However, when we created the data for zoom level 11, it took more than 12 minutes. Since our data is generated every 5 minutes, we cannot spend any more time on tile generation.
Mapbox GL JS specialises in displaying vector tiles, but can also display raster tiles. If you can't generate static raster tiles from your GeoPackage data source (because they're too big and change too fast), you'll need some kind of server that can read GeoPackage and serve up raster tiles on demand.
Running GeoServer would be one way to do that. It supports GeoPackage natively and could serve up the requested tiles without having to generate them all in advance.
There is also a NetCDF extension that might let you skip the GeoPackage conversion step.
(What you tried was generating a single raster image, which was probably insufficiently detailed for your needs).
We are trying to create a polygon programmatically in typescript using mapbox gl. But starting height and ending height of the polygon will be different to create a slope. Please let me know is there any way to achieve this requirement.
Mapbox GL JS does not support 3D shapes with sloping surfaces. You could use something like three.js (via ThreeBox) to achieve it.
I want to label stations on my map, and I would like to clusterize the stops at different zoom levels to filter them down. So as you zoom out all you get is the start and end, and then finally a single label start->end.
How do I render a text label on a vector tile ?
I could fetch the stations as a geojson and reload on zoom change if there's no easy way to do this with tiles.
Is there a reason you need to encode your data differently per-zoom-level in the tiles or are you mainly concerned with displaying data differently per-zoom-level? If the latter, I would recommend looking for an approach that focuses more on styling the vector tiles you already have rather than trying to generate those tiles in a more complex fashion. You could try using a zoom function to style your data. If you're using Mapbox Studio, you can also set zoom-specific style rules in the Studio UI, which is the route you'll probably want to go if you're using Leaflet (I see the Leaflet tag in your post but it's not entirely clear what your implementation looks like).
If the former, you may need to use a tool like Tippecanoe. This route will likely be a bit more complex, but gives you fine-grained control over how your vector tiles are generated. Keep in mind that once you've created your tiles using Tippecanoe, you'll still need to style them somehow.
I'm using Leaflet (with omnivore and the MapQuest tile plugins) to display a map with colored polygons. The map and polygons look/work fine, but there are these mysterious blue markers everywhere.
There's nothing in the JS about markers at all, and if I comment out the polygon.addTo(map); line, the markers disappear. So they're definitely related to the polygons, even though they're not directly positioned on the polygons.
Any idea why the markers are appearing, or how I can make them disappear?
SOLVED: It turns out that the problem was that I'm using MSSQL's ".Reduce(n)" function to simplify the polygons (for performance), and if you simplify the polygons too far, the results have "Point(...)" items in them - which leaflet renders as markers!
Now, off to figure out why MSSQL is turning things into points...
Welcome to SO!
Most probably your polygon variable is a Leaflet GeoJSON Layer Group built by the omnivore plugin, and the data you feed it with contains "Point" type geometries.
If you do not specify anything special to handle these points, Leaflet will render them with this default blue marker icon.
In that case, you could simply filter out those point features, whether after omnivore processing (use the ready event) or using a custom GeoJSON Layer Group with its filter option. There should be other posts describing such solutions.
See e.g. Mapbox: Filtering out markers in a Leaflet Omnivore KML layer
If you are not in this case, you would have to provide more information for people to be able to help you. Typically code that you use to build your polygon layer and sample data.
I have played with Mapbox and can quite easily create a Choropleth map in Mapbox studio and interact with it in Javascript.
I would like to create Choropleth map of the states with the ability to change the colours of the states for 100 years of different data points. I'm not allowed to upload the data into Mapbox as its sensitive healthcare data and I can't get sign of for the $499 a month cost.
My idea is I create a mapbox style layer in MapBox Studio then push the data client side for each of the states depending on the year x that the user selects. I have seen quite a few cloropeth tutorials such as this https://www.mapbox.com/help/choropleth-studio-gl-pt-1/ but the data is added in through a layer in Mapbox Studio. My thoughts are to embed the large GeoJson in the style and only push the data to the Polygon ID's, whilst creating transtions between the two.
Does anyone have any ideas if this is possible? and perhaps any useful API requests which may help me achieve this https://www.mapbox.com/api-documentation/.
It's possible. There are two approaches:
Upload the geometry as a Dataset in Studio, or load it directly as a GeoJSON.
Set data attributes directly on the geometry.
Create a style with data-driven styles (eg, map "47" to "rgb(100,0,0)" and "153" to "rgb(250,250,0)" and let Mapbox interpolate.
Or:
Upload the geometry as a Tileset to Studio.
Calculate the color you want to represent each possible value of each state.
Generate a data-driven style property that maps each state's code to the color you want, like ...['FL','rgb(143,15,0)']....
Neither method will cope with large numbers of regions, but should be ok for 50 US states at low resolution.
More discussion here: https://github.com/mapbox/mapbox-gl-js/issues/4261