I had allowed double finger map zoom on mobile devices which is good.
But if maximum zoom level is reached I can zoom more, and when I release fingers from display map zoom is reverted to the max zoom level.
How can I disable further zoom in on mobile devices after max zoom level on the map is reached?
This is a case of RTFM. If you look carefully at the Leaflet API documentation, you'll find the bounceAtZoomLimits option for L.Map. Let me quote:
bounceAtZoomLimits Boolean default true
Set it to false if you don't want the map to zoom beyond min/max zoom and then bounce back when pinch-zooming.
so:
var mymap = L.map('map', {
bounceAtZoomLimits: false
})
Related
When you zoom in and out, the markerclusters automatically "re-cluster", as in it calculates clustering again.
Is there an option for to disable the auto re-cluster when the zoom is changed?
Depending on exactly what you are trying to achieve, you might be interested in Leaflet.MarkerCluster.Freezable subplugin:
When frozen / disabled, clusters will no longer split / merge on map zoom, but retain their status as if they were on the specified zoom level.
For example if you want the clusters to reflect the zoom 15 configuration:
var map = L.map("map"),
mcg = L.markerClusterGroup(options);
mcg.addLayers(arrayOfMarkers);
mcg.addTo(map);
mcg.freezeAtZoom(15);
Disclaimer: I am the author of that subplugin.
Is there an option for to disable the auto re-cluster when the zoom is changed?
No.
In Leaflet.MarkerCluster, the cluster depends on the value of the maxClusterRadius option, which is measured in screen pixels at the current zoom level.
I encourage you to have a look at the other Leaflet plugins for clustering, as some of them have clustering algorithms which do not depend on the zoom level.
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.
I have a search bar in my leaflet map and I would like the map to slowly zoom and pan to the marker when selected from the search bar. I can get it to zoom and pan but not slowly. My desired effect would be similar to when you type in a location in Google Earth and the view 'flys' from one location to the next. This is the code I have which zooms to my location but not slowly.
controlSearch = new L.Control.Search({layer:listOfMarkers, propertyName: 'IntersectionName', circleLocation:true, position:'topleft'});
map.addControl(controlSearch)
controlSearch.on('search_locationfound', function(e){
map.setView(e.latlng,15, {animate:true, duration:10.0})
});
I'm using leaflet v0.7.7.
Thanks!
Unfortunately, there is no way to change the duration of any setView that changes the current zoom level in Leaflet 0.7.7*. The duration of any animated zoom is hard-coded to be 0.25s, and because setView accepts zoom/pan options, which do not include duration, your duration:10.0 will be ignored.
However, setView does accept separate options for panning and zooming, and because the pan options do include duration, you can pan smoothly at the current zoom level using the following:
map.setView(e.latlng, map.getZoom(), {
"animate": true,
"pan": {
"duration": 10
}
});
I realize that this is not quite what you are looking for, but it is one step closer.
*In Leaflet 1.0b, there is a flyTo method, which produces the effect you describe, but there is nothing similar in 0.7.7.
Another way
map.flyTo(e.latlng, map.getZoom(), {
animate: true,
duration: 0.5
});
I need to display on the map a scale showing how far a inch / cm is for example. This will need to change depending on the zoom level.
My theory is that if I know the length of the map, and the length of the graphic, If I know what the current scale of the map was I could just do some maths to work out the graphic indicator scale.
So is there a way to get the current zoom lvl in meters? Is it linked to the span or something?
The zoom level is linked to the span - you first need to get the span of your map view, and then convert it into meters.
Is it possible to determine the pixel co-ordinates of a given marker, taking into account current zoom level and visible area of the map?
Current (v3):
map.getProjection().fromLatLngToPoint(marker.position);
https://developers.google.com/maps/documentation/javascript/3.exp/reference#Projection
Old (v2):
The method fromLatLngToContainerPixel following should give you what you're after, assuming markerPoint is your marker, and zoomLevel your current zoom:
map.fromLatLngToContainerPixel(markerPoint.getLatLng(), zoomLevel);