I want a Leaflet layer control which when checked/unchecked must display/hide all the sublayers inside the main layer. I also want to check/uncheck the sublayers independently. I looked through Leaflet docs and forums but couldn't find any reference for this. Should I write a custom control for this? Please advise.
I believe you are going to need to have to write a custom control for this, as L.Control.Layers does not have nesting support built in currently.
You can try using LayerGroup. From official documentation:
LayerGroup
Used to group several layers and handle them as one. If you add it to
the map, any layers added or removed from the group will be
added/removed on the map as well. Extends Layer.
Usage example
L.layerGroup([marker1, marker2])
.addLayer(polyline)
.addTo(map);
Related
I’m using the new map viewer and I have two overlapping polygon layers. When I have popups turned on for both layers, but I’d prefer popups for one layer shows up first.
Is there a way to reorder popups without reordering layers?
There's no way to make these pop up reordered. I hope esri fixes this soon- it is obnoxious!
In Mapbox GL JS, I'm looking to use clustering + use a different icon for one feature which is currently defined as "active". I want the necessary transitions (unclustering + change of the active feature) to be animated, but can't find a way of making this all happen.
Mapbox provides an example showing how to implement clusters, which uses different layers for the clusters and for non-clustered features. This technique can also be used for rendering the "active" feature in its own layer with a different image. When a cluster breaks ("unclusters") into features, it basically gets removed from the clusters layer, and the features get added to the "unclustered" features layer. But this doesn't allow adding a transition animation, since there isn't really a transition here. I would like to show the cluster splitting into features, with each feature moving to its respective location.
Any ideas how to solve this?
Some ideas that don't quite provide a full answer:
Use Leaflet with the markercluster plugin and its "spider" behavior for clustering. This works and provides a nice "spider" transition animation for unclustering. However there is no "official" binding between leaflet and Mapbox GL, so I'm reluctant to use that (there is just this which I would need to modify and it's based on undocumented Mapbox internals). Also I'm now sure whether this is good or bad performance-wise with thousands of features. And I know from experience that adding an animation to modify the shape of Leaflet markers (for active/inactive transitions) doesn't really work.
Use markers in Mapbox, instead of layers, but then how to do any sort of clustering?
I can't think of any reasonable way to implement this just using Mapbox GL JS, short of learning WebGL and implementing a custom source.
But I wouldn't write off the Leaflet+Mapbox approach - in my experience, the performance is ok (though I haven't tested with clusters or what you're trying to do).
There is a similar approach with OpenLayers: https://openlayers.org/en/latest/examples/mapbox-layer.html I have also used this and it worked fine.
Finally, it seems there are quite a few Leaflet and OpenLayers libraries that specifically solve the animated clustering issue: https://gis.stackexchange.com/questions/17250/how-to-create-animated-cluster-markers-in-openlayers-leaflet (And most of these answers are very old, so perhaps there are more libraries now).
I have a V-Leaflet map.
Depending on what the backend "says" (where/how-many), there'll be marker(s) on this map.
When 2 or more of these markers are closely located and thus overlap,
i'll look to combine them into one marker that refers to them all.
The only way i can think of is the explicit way -- getting the Bounds (org.vaadin.addon.leaflet.shared.Bounds)
of the portion of the map in view and going from there
(calculate how close/apart now those markers are, group/ungroup them accordingly.)
Is there a built-in/quicker way of doing this?
Note: i'm not interested in the mathematical/clustering part of the problem.
checking just not to miss out -- dont wanna redo if this is coded.
TIA.
Sounds like you are looking for V-Leaflet Markercluster extension:
Server side api for Leaflet Markercluster extension
It wraps Leaflet.markercluster plugin:
Provides Beautiful Animated Marker Clustering functionality for Leaflet, a JS library for interactive maps.
I have 3 layers, one GeoJSON that is used with leaflet-draw and two (vector and canvas/heatmap) that just display overlays.
My problem is, the overlays get added later dynamically with the layer-control, while the GeoJSON layer is always there. When the overlays get added, some of the draw features and general interaction with the GeoJSON layer top to work, because my overlays are always on top.
How can I get the GeoJSON layer back to the front?
Using layer.bringToFront() didn't work.
If the layers are being added through the layer control, you can keep your GeoJSON layer on top by bumping it back using .bringToFront() each time an overlayadd event is fired:
map.on('overlayadd', function() {
yourGeoJsonLayerName.bringToFront();
});
A somewhat unwieldy example fiddle is here:
http://fiddle.jshell.net/nathansnider/yt65dkyt/
Though layer ordering can be handled more gracefully in the Leaflet 1.0 betas by assigning layers to panes with a persistent zIndex, it looks like Leaflet Draw doesn't officially support 1.0 yet, so .bringToFront it is!
I've got 2 tilelayers on a Leaflet/Mapbox map and I am able to toggle between the layers, similar to this map. The difference is that my two layers are of the same type, both showing 'bike stations' to continue with the linked example.
Since I'm adding and removing the layers for each click, there's a small delay between the removal of the first layer and the adding of the second layer. I think I need to listen for when the second layer has finished loading, the removing the first layer to get a smooth transition between the two.
Is there any built-in functionality in Leaflet or Mapbox for accomplishing this?
UPDATE:
I managed to work around this problem by using the setOpacity method of the tilelayers instead of reloading them for each click. But I'm still curious as to whether there exists a ready-method as described above.
There's nothing built-in to accomplish this, but it's something we might cover with an example in the future.