I serve map png files from disk and I have tile pngs for whole city in zoom level 15. I have also tiles in zoom levels 16-18 but only for certain areas.
I would like to set up the tile Layer, so that when the user is in zoom level 18 the map will display scaled tiles from level 15 as a fallback.
I tried setting option maxNativeZoom, but didn't work for me.
Here is my code:
offlineLayer = L.mapbox.tileLayer(tileJSON, {
minZoom: 8,
maxZoom: 18,
maxNativeZoom: 15
});
map.addLayer(offlineLayer, 'Offline', 1);
Can I make it work, that way using some options or do I need to hack it some way? Or is there some example code for that?
Just to let people know that I wrote Leaflet.TileLayer.Fallback plugin some time ago to address this exact use case:
Replaces missing Tiles (404 error) by scaled lower zoom Tiles.
Demo page
In OP's situation, you would just specify the maxZoom Tile Layer option as usual, and whenever a tile is found missing at the current zoom level, the plugin will try to replace it by the "parent" tile at the previous zoom level (scaled and clipped appropriately so that it fits the missing tile), and so on until a tile is found or minZoom is reached.
L.tileLayer.fallback(urlTemplate, {
minZoom: 8,
maxZoom: 18
});
Disclaimer: I am the author of that plugin.
When you say that it didn't work for you, I'm guessing that what you're seeing with the code above is level 15 tiles for everywhere even when at zoom levels 16-18 in the areas where you have tiles at those levels? That's the expected behavior of maxNativeZoom. TileLayer creates all of the tiles for a given zoom level and map bounds and sets the "src" to a URL containing the current zoom level. If the current zoom level is greater than "maxNativeZoom" then the zoom level in the URL is set to "maxNativeZoom". For example, src="http://a.tile.openstreetmap.org/15/16368/10896.png" would be used for zoom levels 16-18 if "maxNativeZoom" is set to 15.
There is no logic in the code that checks to see if an image actually exists for that tile at that zoom level.
If your tiles are in a single data set then you could modify the code in TileLayer to check for a HTTP 404 return code for the generated URL and if one is received then create a new URL using "maxNativeZoom". If your tiles are in multiple data sets (i.e. one for zoom level 15 and less, and another for zoom levels 16-18) then I think you'd have to write a TileLayer that supports multiple data sets.
Related
I'm fairly new to maplibre/mapbox. I've about 40,000 polygons in my PostGIS database. That's just too much data to load it all at once into the maplibre map as a geojson source when the webapp starts. Thus I implemented a simple rest server which returns the polygons compiled into X/Y/Z MVT Vector tiles, so I can use it as a "vector" source in my maplibre style file. This works fine, polygons start showing up at zoom-level 10.
The question is... for the sake of performance and server load I would like to reduce the amount of tile requests.
At the moment when I change the zoom level from 10 to 11, maplibre requests new tiles, which actually isn't necessary, as all needed data already was included in the tile it got for zoom-level 10. Is there a way to tell maplibre to request tiles not for the current zoom-level, but for the higher zoom level instead? e.g. instead of requesting 1/1/12, request 1/1/10.
In other words, I would like to tell maplibre to always use the data from the z10 tile, even for greater zoom levels. And to load the z10 tile if it hasn't been loaded yet.
Thanks
I may be misinterpreting your question, but yes, you can tell the client library to never request tiles above zoom 10, and always to overzoom them, by setting maxzoom on your source:
map.addSource('polys', { type: 'vector', /*...*/, maxzoom: 10 });
My question is about mapbox gl js.
How to change map fill-color by current zoom level?
The fill-color of this map has population growth rates by country, with a gradation from minimum to maximum. However, if the zoomed location has similar data, the fill-color difference becomes difficult to understand. So, I want to refer to the tile information according to the zoom level, get the country on the screen, and redraw it.
I searched a lot, but I couldn't figure out how to get the information on the screen. Please let me know if you have any information.
Zoom Level: 1
Zoom Level: 3
Thank you!
Your question initially asks:
How to change map color by current zoom level with mapbox gl js?
For that, you use an expression like 'fill-color': ['interpolate', ['linear'], ['zoom'], ...]
But what you want is something very different:
However, if the zoomed location has similar data, the fill-color difference becomes difficult to understand. So, I want to refer to the tile information according to the zoom level, get the country on the screen, and redraw it.
It sounds like what you want is context-sensitive color scaling. That is, instead of a fixed scale of colors where dark green always means X and light green means Y, instead, dark is the lowest value in the current viewport and light is the highest value in the viewport.
This does not have anything to do with zoom.
The steps you need are:
Detect when the viewport has changed: map.on("moveend", ...)
Find what values exist within the viewport: map.queryRenderedFeatures(...)
Calculate a new expression based on those values.
Set the new expression: map.setPaintProperty(...)
Tiles come with a zoom level, and depending on the area that is viewed, leaflet fills the display with tiles of a certain zoom level.
Currently, the number of pixels in the display and the number of pixels in a tile, are tightly bound together, if I understand correctly. Or actually, it is probably the html/css pixels, which are no longer device pixels.
I believe that these are actually two fundamentally different zoom parameters, especially when (mobile) devices have varying pixel densities (window.devicePixelRatio).
My question is: is it possible to control which zoom level of the tiles is shown, as a function of the zoom level that is displayed (geospatial distance vs screen distance)?
The reason I ask is that the level of detail is often different for different zoom levels. On some devices displaying tiles of higher detail might actually look good. Some map sources, like topographic maps from http://geoportail.gouv.fr even change the map style drastically between different levels. I want to play with the possibility of showing, say, zoom level 15 over a large physical area on a hdpi display, where leaflet would normally show zoom level 14 or 13.
I found that by modifying the option "tileSize", passed to the TileLayer constructor, choosing a value lower than the default 256, I get almost what I want. However: the positioning is way off. Is there a simple solution for this?
After some digging in the source code, I noticed, as IvanSanchez pointed out, that the functionality is present indeed.
detectRetina applies a zoom of 'one up', that is bumping the zoom by one and dividing the length of the sides of the tiles by two, if the device has a devicePixelRatio >= 2.
I want to apply an arbitrary offset at will. This can be done at once for a layer by initializing with the options
let zoomOffset = 2;
let options = {
"detectRetina" : false,
"zoomOffset" : zoomOffset,
"tileSize" : 256 / Math.pow(2, zoomOffset)
}
However, it's even neater to have the possibility to do this realtime while viewing, so I wrote this L.Control-plugin: Leaflet.Control.DetailLevel
I want to play with the possibility of showing, say, zoom level 15 over a large physical area on a hdpi display, where leaflet would normally show zoom level 14 or 13.
It seems that what you want is already implemented by the detectRetina option of L.TileLayers. Quoting the docs::
If true and user is on a retina display, it will request four tiles of half the specified size and a bigger zoom level in place of one to utilize the high resolution.
How can I display layers that by default seem hidden to show at lower zoom levels? For example, I am trying to display mountain names ("poi-parks-scalerank1") at zoom level lower than 10. Is that possible?
It is not possible to show vector tile data at zoom levels lower than the tiles in which it is physically present. For instance, if the mountain names only exist at zoom 10 and above (that is, any vector tiles at /9/x/y.pbf don't have them), there's nothing you can do to force Mapbox-GL-JS to render them.
(The reverse is not true: you can "overzoom" vector tiles by setting maxzoom on the layer.)
It's possible (but very unlikely - Mapbox's tiles are pretty optimised) that the data exists in a lower level than the style actually calls for, so you might as well have a go, as leelum1 suggests.
Otherwise, you will have to obtain the mountain name information somehow and create your own layer, then style it.
I am using tippecanoe command line utility to create my application vector tileset. This is creating a directory structure as per the z/x/y coordinates which is perfectly fine. I have a certain group of features(allocated with a layer) which do not need z to be up to 21 zoom level so it's creating the tiles up to zoom-level 14. It is critical in my case to not to waste the memory space by increasing the max-zoom to 21 for certain layer of features.
As per my understanding, mapbox gl-js queries for the vector tiles as per its coordinate space.
So during my zoom-in from 6 to 21, although zoom-level > 14 tile queries are responding with 404, gl-js is adopting the same tile which is available at 14.
The problem is,
For example, If I click on any feature, I need that feature to be highlighted. I am doing it by filtering out the layers as :
//hiding the current layer
mapBox.setFilter(currentLayer, ["==",'gid', "_none_"]);
//showing only the clicked feature by filtering it out with a unique id it has
mapBox.setFilter(highlightedLayer, ["==",'gid', feature_gid]);
This works as expected for zoom-level < 14 but if zoom-level exceeds 14 (the max-zoom while tile creation) then it is not able to render the tile with applied layer style as it tries to fetch a tile which is not there on my server. So my question is if a source tile at particular zoom level is giving 404 then why not apply the layer style to whichever tile is available at zoom level 14 ?
Any help to solve this problem?
This functionality is not supported by mapbox-gl. You need to go back to Tippecanoe and generate the tiles for this zoom level.
Note that you those new tiles can be similar in terms of data as the other zoom levels.
Remember that tiles are like images generated at a precise zoom level. If you zoom in, one tile will be divided in many tiles.