mapbox - loading different geojson choropleth overlays at different zoom levels - mapbox

so i have a mapbox base map and want to load a dynamic choropleth area map over the top of it. it will cover all continents. i've looked into doing this before using geojson but the resulting file was over 9mb. is there a way to have different geojson vectors loaded at different zoom levels as to reduce the file size ?
the reason the file was so big was because it was a very detailed vector overlay. basically i'd like to replicate the vectors of 'am map' but with the performance of mapbox, with much better vector resolution at bigger zoom levels. (http://www.amcharts.com/javascript-maps/)
the only other way to do this is by using geojson markers that are loaded on top of the base map, but this doesn't give the same visual impact of the fully coloured continent vectors..
any help would be greatly appreciated!
x

Well, you could watch zoomend on the map to add/remove overlays as needed.
map.on('zoomend', function() {
var currentZoom = map.getZoom();
overlayGroup.clearLayers() //remove existing
overlayGroup.addLayer(myZoomLevelMapping[currentZoom]) //add layer for this zoom level.
})

Related

Leaflet: caculate zoom levels for resolutions for map with CRS = EPSG:25832

my map has crs EPSG:25832. I have a layergroup containing two layers. One layer shall be visible between map resolution 0.149 and 19.093 m/px, the second layer shall be visible between resolution 19.093 and 156412 m/px. So while zooming the layers will switch their visibility.
In leaflet I can only set minzoom and maxzoom for a layer not a resolution. So I need to find a way to calculate the zoom levels based on the given resolutions.
For EPSG:3857 this works pretty good with the equations from here:
https://wiki.openstreetmap.org/wiki/Zoom_levels.
But I have no idea how to properly calculate the zoom levels for EPSG:25832.
Does anybody have any suggestions?
Thanks a lot!

GeoServer Vector Tiles show tile boundary issue in Mapbox GL JS

I use GeoServer to provide Vector Tiles (based on the GeoServer Vector Tile Extension) of my biking trails as .pbf.
The data are added as vector source and visualized using Mapbox GL JS.
Additionally, I use the GeoServer perpendicularOffset to offset the lines (as I always have two directions of the biking trail).
A problem occurs when visualizing the data within Mapbox. The lines are cut at the tile edges, although they are visualized correctly using the layer preview on GeoServer.
The further I zoom in the map, the less the clipping of the lines happens and at a very detailed zoom, the lines are drawn correctly.
I already tried to use a large enough buffer and modify the tile size, as these were suggestions when researching the problem. Unfortunately, these settings had no effect.
I have another vector source layer for the base map, there I have no problems.
It seems to me, that offsetting the lines might be a problem.
Any idea what I can try?
the tile size of Geoserver's tile grid is 256x256 , but mapbox need 512x512, add a custom tile grid, set the tile size to 512x512, generate your vector tile with the custom tile grid should be ok.

Mapbox geometries get degraded when exported to tilesets

I'm trying out Mapbox for the first time, and playing around with drawing some polygons in the dataset editor for export to a tileset. However, the polygons in the resulting tileset are not the same as what I create in the editor. The polygons are only very rough, simplified approximations of the originals.
In dataset editor:
In map layer as tileset export:
I understand that Mapbox does vector simplification at certain zoom levels, but these changes are not zoom-dependent. I zoom in all the way and the shapes are still like this.
Moreover, such extreme degredation of the geometries makes tilesets essentially useless for features that require any sort of accuracy, like property lot lines.
Am I missing something, or is this really the expected behavior? Is there really no way to get accurate geometries into a tileset?
UPDATE: It appears this is only happening with shapes I create by drawing in the Mapbox data editor. So far the geometries that I've uploaded as geojson files have gotten converted to tilesets accurately...
I suspect this is because the maxzoom is too low.
When you create a Mapbox Tileset, either by uploading GeoJSON directly as a new Tileset, or by exporting your your Dataset to a Tileset, Mapbox will try to guess an appropriate minzoom and maxzoom of the Tileset.
Sometimes the min/max zoom's used aren't suitable for the map you're trying to create. Since there is no way to specify a maxzoom in either of the two approaches the only alternative is to create your Tileset locally with https://github.com/mapbox/tippecanoe specifying an appropriate maxzoom for your data and then uploading the resulting .mbtiles as a Mapbox Tileset.

Vector layers with mapboxgl with no coordinates

Is there a way to draw a vector layer with CorelDraw for example and place it on napboxgl and use it as geojson layers?
For example https://seatgeek.com/colorado-rapids-at-seattle-sounders-fc-tickets/mls/2017-10-22-1-pm/3700786
Are they using geojson or etc.? Or just some sort of vector format?
I can't use geojson as it is hard to draw with QGIS any straight lines or symmetrical objects. I just want to draw a lot of vector objects and use them as layers with mapboxGL(use mapbox as render method and interact with layers as with geojson)
Any suggestions how to do it? Or is there a way to draw with Corel and then place it on map with QGIS?
Thanks
UPD:
Now I am using Corel -> dxf export and then import it to QGIS, then save it as geojson. But have some glitches with displaying that geojson geometry in mapbox, so I have to draw another in QGIS over the imported(dxf) one.
Here is an example of the bug, should be just a green polygon like the gray one
UPDATE: my fault, I was using lines instead of polygons.
I think you can achieve this as follows:
Convert the Corel output to SVG
Create an HTML element containing the SVG (not necessarily added to DOM)
On your Mapbox map, add a Canvas source containing the canvas: see https://www.mapbox.com/mapbox-gl-js/api/#canvassource
Obviously you will need to determine the lat/lon of the corners of your image somehow.

Leaflet + geojson datas

I'm working on a project using Leaflet. For this project I've created an interface to draw all the roofs of a large city as polygons. A lot of scripts calculate the surfaces, the addresses, the orientation and so on... I'll store each roof's datas in a geojson file (or files). We expect to get about 10 000 roofs or more. I don't know if Leaflet displays only visibles polygons depending window's boundaries or if all the polygons are drawn, and my problem is to find the better way to do this storage.
In one geojson file. It may be a problem because the 10 000 roofs are computed in the same time and waiting for polygons loading may be very boring for users.
In separated geojson files: for each roof I can approximatively calculate the coordinates of its center and put this roof in the right geojson file depending the lat/lng. By this way I can create (say 20 or 50) differents geojson files and call the right one depending boundaries. Then the question is: to create all the polygons, is it better to call the 6 (or 8 or 10) geojson usefull files for the area on screen, or is it better to create a new dynamic geojson file?
All the roof's datas are stored in a database or in a XML file and I have to detect boundaries and automatically create a dynamic geojson file. But each time user scroll or darg or zoom the map I'm supposed to recreate this unique geojson file...
Do you ever have a similar problem to solve and how do you solve it ? Thx.
I think the second scenario is the most robust, you need tiled GeoJSON tiles. Have a look at Leaflet Plugins. There is one called TileLayer.GeoJSON. Some links on how to create these tiles are on OpenStreetMap wiki.