For a few days, I've been trying to find out how to make Leaflet have fluid zoom, and by that I mean the one that can be found in for example OpenSeadragon. I've been playing around with the zoomSnap, wheelDebounceTime and wheelPxPerZoomLevel settings on the Map object, but all to no avail.
Fluid zoom has a huge 'wow'-factor and on top of that I would like to use Leaflet Draw to have users annotate tiled old maps, for storytelling purposes.
Is there anyone that has successfully achieved OpenSeadragon-style zooming? The .flyTo() method seems to relatively be able to smoothly zoom in and out, as does the TouchZoom handler. Also, when clicking the zoom-buttons the image zooms in smoothly. But I can't for the life of me figure out how to use that on scroll events.
Can anyone point me in the right direction?
A demo of the problem can be found here.
There is a Leaflet plugin called SmoothWheelZoom that has partial zoom levels for a smoother looking effect when zooming in or zooming out. SmoothWheelZoom is not listed on Leaflet's plugins page.
(It looks exactly like the OpenLayers smooth zoom.)
Leaflet now has partial zoom levels:
A feature introduced in Leaflet 1.0.0 was the concept of fractional zoom. Before this, the zoom level of the map could be only an integer number (0, 1, 2, and so on); but now you can use fractional numbers like 1.5 or 1.25.
Fractional zoom is disabled by default. To enable it, use the map’s zoomSnap option. The zoomSnap option has a default value of 1 (which means that the zoom level of the map can be 0, 1, 2, and so on).
[...]
zoomSnap can be set to zero. This means that Leaflet will not snap the zoom level.
This works especially well with pinch-zoom on smartphone, but it isn't as reactive as what I've seen on MapBox or OpenLayers.
See this article for a live demo with explanations
Related
I need to highlight a country's railways at zoom level ~4, and I'd like to do so just using the mapbox-streets-v8 data, but not matter what I seem to do, in Mapbox Studio, in the style JSON, or in the code, I can't seem to get the road/railways layer to be visible at a zoom level under 8.
It looks like, from tinkering around in Mapbox Studio, the source isn't even loaded until zoom 8, since the features don't appear as "filtered out", they just don't appear at all. I've set the "zoom extent" down to 5 on the layer (as low as it will go), but nothing I do seems to actually get it to appear at zoom 5, let alone at a level more zoomed out:
It's not possible. The data doesn't exist at that zoom level in those vector tiles. You would need to prepare your own vector tiles from your own data source.
Leaflet framework seems like perfect solution, however it is using tiles to zoom. I want to source a single file and have it fit to window and zoom based on image being much larger than container.
I cannot find anywhere to disable tile feature. If I did would it break zoom functionality?
Welcome to SO!
Sounds like you overlooked Leaflet Image Overlay.
There is also a tutorial, although you may not need the CRS.Simple part.
When zooming into the map, do the tiles ever get unloaded? Or do they just stack on top of each other? For example - if I zoom in from zoom level 4 to zoom level 6, do the new set of tiles replace the old ones? Or do they simply cover them?
The reason I am asking is that I am loading a 3D terrain mesh on top of each tile that loads, but I have found that I am getting multiple terrains stacking on top of each other (refer to my aforementioned zoom level example).
Ideally I would like to simply unload the terrain cover whenever the corresponding tile unloads, but the mapbox-gl library does not seem to expose that event...
Any info on this subject would help me figure out a working solution. Thanks!
Using leaflet mobile maps, you can easily get "lost" if you zoom in too far or pan in the wrong direction, so I'd like to display some kind of dynamic hint arrows(?) around the edge of the map which point to those offscreen markers. Something like the illustration below which I stumbled on here while trying to find a solution.
You would probably be interested in Leaflet EdgeMarker plugin (demo):
[…] allows you to indicate Markers, Circles and CircleMarkers that are outside of the current view by displaying [a chosen icon (like an arrow)] at the edges of the map.
When I zoom in far enough on my map, the TileLayer disappears and I see a bunch of tiles that say "Map data not yet available". I believe these tiles may be coming from the provider, but I am not sure (I am using ESRI WorldImagery dataset).
Is there any way to, at a certain zoom level, just force the tiles to stretch, instead of requesting the tiles for that zoom level? I am ok with some blur, but I do need to zoom in further.
I tried playing around with the zoomOffset option, but whenever I put something there other than 0, my tiles just never load (all grey).
Thanks!
This can be solved by using two of the options of L.TileLayer.
First, set maxNativeZoom to the highest zoom level your tiles provide (the last zoom level before the "Map data not available" starts to appear - this tells Leaflet to stop requesting new tiles when zooming in beyond this level; stretched tiles will be used instead.
Second, set maxZoom to whatever zoom is appropriate; you might not want this to be more than a couple of levels higher than maxNativeZoom, since the stretched tiles will start to look pretty horrible.
You can find out more about the details by checking under "Options" in the documentation for L.TileLayer: http://leafletjs.com/reference.html#tilelayer