I'm using Mapbox GL JS to display a map using my own tile-server (which just serves openmaptiles pbf files in a Z/X/Y directory structure).
The loading of tiles is done automatically, based on the current center coordinates.
I want to pre-load the surrounding tiles for an offline solution.
I know how to get the current zoom-level with map.getZoom()
How can I get the X and Y indexes of the current tile URL ?
I suggest framing the problem in terms of geographic coordinates:
You can get the viewport geographic coordinates from Map#getBounds)
You can convert geographic coordinates to tile coordinates with some light math
Also, if you need to do some calculations in bash scripts, you can use mercantile library or CLI utility to transform lon/lan coordinates to tiles, find parent or children tiles and get some other information. Another advanced tool is supermercado.
Related
I am working on a custom renderer an I want to access vector tile data to retrieve the features geometry from :
the offline dataset in priority
then a fallback on the cache
then a fallback to the Mapbox servers.
So given the bounding coordinates and a zoom level, how can I access the data ?
So given the bounding coordinates and a zoom level, how can I access the data ?
There is Mapbox Vector Tiles API (here is a sample query: http://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v7/14/4823/6160.mvt?access_token={your_access_token}).
This specification describes how lng/lat can be converted to tile numbers.
I'm trying to display a 3D skyline/panoromic view of Manhattan using Mapbox yet with Mapbox GL extruded 3D buildings start to disappear below zoom level of 15. Is there a way to render/display them at zoom level around 11-12? Or an alternative way by clipping/filtering rendered/loaded data by mapbox?
I have tried to filter the map to the area of Manhattan and Roosevelt islands yet later found out it's not possible to clip/filter MapBox to a geographical area.
As the final result I'm hoping to render the buildings at the final view shown in the last image.
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.
Trying to create a custom world map texture with tilemill to load into leafletjs. I have downloaded a free .tiff file from natural earth data and loaded it into tilemill.
When i want to export however, i notice alot of jagged edges mainly around greenland/canada on the lowest zoom level.
a few zoom levels down and it seems ok again. After exporting the tiles to png's the jagged edges stay. How can i improve the quality of these images?
How can i improve the quality of these images?
By using more detailed input data.
By the looks of it, you are projecting a raster image in EPSG:4326 projection into the EPSG:3857 "web mercator" projection. In the original data, each pixel spans the same amount of longitude and latitude degrees. In a mercator projection, each pixel spans the same amount of longitude, but a different amount of latitude. The artifacts you are experiencing are akin to a Tissot's indicatrix.
You can try using a different value for the raster-scaling symbolizer option in your tilemill stylesheet, but that's gonna make the artifacts different, not get rid of them.
Seems like a simple question, but I have been tearing my hair out for hours now.
I have a series of files ie.
kml_image_L1_0_0.jpg
kml_image_L2_0_0.jpg
kml_image_L2_0_1.jpg
kml_image_L2_1_0.jpg
kml_image_L2_1_1.jpg
etc. However just plotting them on the leaflet map surface understandibly puts the images at 0,0 on the earths surface, and the 0 zoom level inferred by the files should really be about 15 or so.
So I want to specify the latitude and longitude where the images should originate , and what zoom level they should start at. I have tried bounds (which doesn't display anything) and I have tried playing with offsetting the zoom level.
I need this because a user needs to click on an offline map to specify where they are and I need the GPS coordinates.
I also have a KML file but it seems to be of more help for plotting vector data on the map.
Any help is much appreciated, cheers.
If I understand correctly, the "kml_image_Lz_x_y.jpg" images that you have are actually tiles, with zoom, horizontal and vertical indices in their file name?
And your issue is that they use (z,x,y) numbers as if they started from the top-most level (zoom 0, single tile for entire world), but in fact they are just a small portion of the pyramid of tiles?
And you cannot use them as is because you still want to get actual geographic coordinates (latitude, longitude), which would be totally wrong if you used the tiles as if they were showing the entire world?
In that case, you have several options as workarounds:
The most simple and reliable would probably be to simply write a small script to rename all your tiles to their true (z,x,y) numbers.
Another option would be to modify the (z,x,y) numbers before they are written in the tile src attribute, and apply the appropriate offset (constant for z, scaled by z for x and y). That should probably happen in L.TileLayer.getTileUrl() method.
Good luck! :-)