Tiles at zoom > 19 features are split / broken - leaflet

In our project, we have a max zoom of 22 where the map is displayed through Leaflet.
Untill 18th zoom level, the tiles are formed properly.
Beyond that level , the map shows split routes as shown in attached figure: (The below link is when we have zoom level as 19 and so on)
Screenshot
If I use maxNativeZoom as 18 and max zoom as 22, zoom happens
but it blurs the tiles.

Related

Ability to load new samples on echart zoom actions (Zoom in & zoom out)

For the time series chart, on the initial load, we are displaying data aggregated for every 1 hour. when the user zoom in( for example for 4 hours) we see only 4 samples, instead, can we pull more data from the server which is aggregated for lower interval like 30 or 15 and display it in the chart when the user zoom in, display higher interval data on the zoom out.
On zoom in display lower intervals new data like more samples.
On zoom out restore the data which was already available.
Checking if this feature is available or not.

Z Offset for Mapbox labels

I have a 5-floor indoor building on top of a Streets Style map in Mapbox Studio Style editor. It looks almost ok in 3D, all extruded poygons and lines are at the right base height and height with about 3m space betwee the floors.
But I cannot find any base hieght or z-offset option for Symbol types in order to show labels correctly at the place where they should be in 3D. Is there a z offset for labels at all?
It's not currently possible, but has been discussed as a possible enhancement: https://github.com/mapbox/mapbox-gl-js/issues/3993

Mapbox Terrain RGB image '

I am new to mapbox and am trying to get the Terrain rgb data. I have followed the example from the documentation here :
https://www.mapbox.com/help/access-elevation-data/
and used the following query:
api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token={my_access_token}
which works find for zoom levels from 0 to 5 and returns RGB tiles of elevation data from a high level.
api.mapbox.com/v4/mapbox.terrain-rgb/5/0/0.pngraw?access_token={my_access_token}
I need to get the data at a much higher zoom level than 5, but once I use a zoom level above 5 it returns 'Tile Does Not Exist'.
The documentation says that there is data up to zoom of 15. My access token works and I have tried x,y tiles of 0, 0 (which should exist at all levels). Has anyone any help or suggestions ?
Had a similar issue and in my case the mistake was assuming that given an {x}/{y} tuple the zoom {z} was free to change, but it isn't, if zoom changes xy changes too.
To get the correct tiles I used mercantile (pip install mercantile)
import mercantile
print(mercantile.tile(-71.0638031, 42.3578952, 15))
>>> Tile(x=9915, y=12120, z=15)

How should I overlay a grid on a LeafletJs Map?

I have a LeafletJs Map with a Lat / Lon graticule. However what I would like at this point is to overlay a grid on the map with a fixed number of rows & columns (say, 19 rows and 17 columns), where the little rectangles that make up the grid would not change size as I zoom in and out on the map. How would I do that?
There is a Leaflet plugin called leaflet-virtual-grid (based on L.Grid) which does what you want. The provided examples need a few fixes to work, here is the result.
I didn't see any option to make the x and y length different.

Rendering OpenStreetMap in OpenLayers 3 with more detail and higher DPI

I'm using OpenLayers 3 and OpenStreetMap to print maps on paper, and for this I'd need to render the maps with more details and higher DPI than are shown on the screen. I'm using CSS to set the size of ol.Map's target in centimeters to the desired size for the printout (.map { width: 7cm; height: 6.3cm; }).
By default OpenLayers shows one of my maps like this, which is too low detail for my needs:
By changing the map size with map.setSize(map.getSize().map(function (x) { return x*2; })); I'm able to increase the detail closer to what I need:
But the problem with this hack is that when the window is resized, the size is reset and it will look wrong like this:
How would I be able to control the OSM zoom level and map DPI independently of the map's size on screen to achieve the desired outcome (the second picture) reliably?
A solution I've found is to put the map inside two nested divs. The inner one has, for example, width: 200%; height: 200%, and the outer one would have transform: scale(.5) translate(-50%,-50%);. This would double the resolution the user sees.
This approach changes the pixel zoom level relative to the zoom level on screen. However, it needs to be recalculated and updated whenever the user zooms the map.