Created my first map at
http://rich.littlebigfoot.org.uk/test7.html
I am plotting walks on the coast path (the yellow) and will be adding more walks and more information. However at current zoom I would like to exclude all the pins and only show them at zoom level 11?
Thanks
Rich
If I understand correctly, you want to hide some layers (pins/markers and/or vectors/paths) at some low zoom levels (like [0 to 10]), and bring them back at high zoom levels (like 11 and above)?
You would probably be interested in attaching a callback on map "zoomend" event, so that callback can remove or add your layers to the map depending on the current map zoom level, when the latter changes.
For example:
map.on("zoomend", showOrHideLayers);
function showOrHideLayers() {
if (map.getZoom() <= 10) {
map.removeLayer(markers);
} else {
map.addLayer(markers);
}
}
showOrHideLayers();
Demo: http://jsfiddle.net/ve2huzxw/116/
EDIT:
If your objective is to avoid overlapping of pins (markers), you might also be interested in "Clustering" functionality.
Have a look at available Leaflet clustering plugins.
The most popular one is Leaflet.markercluster (demo).
Related
Given a bound box like the below picture, how do you get all the features contained within, regardless of if they are visible or not.
I have tried to get all roads using
let features = map.querySourceFeatures('composite', {sourceLayer: 'road'})
But it only gives me roads that are visible if I am zoomed in.
I have also tried
let features = map.queryRenderedFeatures([tile_info.swPt, tile_info.nePt])
But again, it only gets features visible on the map based on zoom level.
I need all the features within the bounding box regardless of what you can see or zoom level
It is in the nature of vector tiles that you can not do what you want to do here. You can only query data which has been loaded into the browser, and the point of the vector tile architecture is to prevent that happening at lower zooms.
You could consider a server based approach like Tilequery.
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.
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.
Is there a Leaflet plugin or example for letting the user control the display order of overlay layers in a map?
Turning layers on and off is working fine, but I'd like the user to be able to drag layer names within the layer control to set the Z order.
For Path class (Polygons, Polylines, etc.) there are methods 'bringToFront()' and 'bringToBack()'. You can't exactly set precise position in draw order, but iterating over layer list and calling 'bringToFront()' could be less time consuming, then re-drawing every layer (especialy if they are bigger).