I use angular-leaflet with leaflet markercluster plugin (see http://tombatossals.github.io/angular-leaflet-directive/examples/0000-viewer.html#/layers/overlays-markercluster-example for example).
Now I have three different overlays with 'clustermarker' type. At the moment markers of each overlay cluster only with markers from the same overlay. I would like all of them to cluster with each other. How can I accomplish this?
You might be interested in those extra Leaflet plugins:
Leaflet.FeatureGroup.SubGroup
Leaflet.MarkerCluster.LayerSupport
But I am unsure about how to use them with Angular Leaflet Directive.
Disclaimer: I am the author of those plugins.
Related
I am using Leaflet masterCluster in angular for maps. I have added some markers in the map and i can see the marker clusters in the map. Currently i am able to spiderfy when i click on the marker cluster.
My requirement is to make all clusters automatically "spiderfy" when i load the map.
Here i am sharing stackblitz link to play around
Link : https://stackblitz.com/edit/ts-leaflet-markercluster-hufa4u?file=locations.json
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'm using Leaflet (with omnivore and the MapQuest tile plugins) to display a map with colored polygons. The map and polygons look/work fine, but there are these mysterious blue markers everywhere.
There's nothing in the JS about markers at all, and if I comment out the polygon.addTo(map); line, the markers disappear. So they're definitely related to the polygons, even though they're not directly positioned on the polygons.
Any idea why the markers are appearing, or how I can make them disappear?
SOLVED: It turns out that the problem was that I'm using MSSQL's ".Reduce(n)" function to simplify the polygons (for performance), and if you simplify the polygons too far, the results have "Point(...)" items in them - which leaflet renders as markers!
Now, off to figure out why MSSQL is turning things into points...
Welcome to SO!
Most probably your polygon variable is a Leaflet GeoJSON Layer Group built by the omnivore plugin, and the data you feed it with contains "Point" type geometries.
If you do not specify anything special to handle these points, Leaflet will render them with this default blue marker icon.
In that case, you could simply filter out those point features, whether after omnivore processing (use the ready event) or using a custom GeoJSON Layer Group with its filter option. There should be other posts describing such solutions.
See e.g. Mapbox: Filtering out markers in a Leaflet Omnivore KML layer
If you are not in this case, you would have to provide more information for people to be able to help you. Typically code that you use to build your polygon layer and sample data.
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 followed several threads on this topic but have not been able to fix the following issues:
How to prevent Leaflet map tile images names from being read out by screen readers?
How to make vector layers (like Circles and Rectangles) tabbable?
How to make tile images not selectable - is this related to #1?
I have tried with current Leaflet distribution 0.7.5 and 1.0 Beta2 - without any success. Here are some related discussions:
Leaflet issue: accessibility improvements
StackOverflow: how to make Leaflet tile layers accessible
Does anyone have a link to share - to a Leaflet based site/page that is WCAG2 compliant?