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).
Related
I have recently implemented the flutter plugin called flutter_map, using the Mapbox tiles, and would like to know how you guys manage to count the network requests for the Static Tiles. Is it supposed to make a request for every move (zoom in, zoom out, move around, etc.) on the map itself? Is that the intended functioning or is there a way to diminish the number of requests made?Amount of requests made after zooming/panning
Is it supposed to make a request for every move (zoom in, zoom out, move around, etc.) on the map itself?
Yes indeed. The package supports static raster tiles, which means they must be re-downloaded if they change - such as on move or zoom events.
There isn't much in the way you can do about this, as it's a kind-of standard. This is why you'll find a similar thing in other mapping libraries, such as Leaflet.js and others.
See https://docs.mapbox.com/api/maps/static-tiles/ for potential ways to reduce costs whilst maintaining standards.
I'm starting research to add a user feature to an existing map built in Mapbox GL JS (wrapped in an Angular 2+ application). What I need to do, is allow a user to be able to draw and rotate ellipses and text labels over the top of a map, and be able to save screen captures of the result.
I'm coming into this with no experience in Mapbox or Leaflet, so I have a lot to figure out. My first goal is to determine if I can do this in Mapbox directly (with a plugin?), of if I will need to render a canvas over the top of my map with some third-part drawing library (I have a lot of experience with those).
The obvious advantage to doing this in Mapbox directly would be that we might still be able zoom and pan.
The Mapbox-gl-draw library lets the user author features in a map, but probably not to the extent you need.
If the features the user creates don't need to live "in map space" (ie, the map is static, and the labels are statically positioned over the top, for printing), working directly on a canvas will give you much more flexibility. You'll also have access to a much wider variety of libraries.
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'm new to leafletjs. Been working on cesiumjs for a while and we are trying leaflet now. The main reason for the switch is to see if there's a huge performance difference.
In Cesium, I had a collection of primitive points that I plotted. What's the most efficient way of plotting 140K points in leafletjs? Using markers or creating individual little circles?
I am also thinking of using the clustering plugin (http://leafletjs.com/2012/08/20/guest-post-markerclusterer-0-1-released.html), so please share any thoughts on performance.
You have 2 common options:
Display your points in a Canvas-based layer, like using Circle Markers and force rendering them on a Canvas instead of SVG (see also Leaflet MaskCanvas plugin). Circle Markers, even on a canvas, still emit events, so you can detect "click" etc.
Use a clustering plugin, like Leaflet.markercluster plugin that you mention for exampe. It can handle your 140k points, depending on the client's computer performance (see https://github.com/Leaflet/Leaflet.markercluster#handling-lots-of-markers and demo http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.50000.html with 50k points, but note that the demo uses an old version of the plugin, whereas the current version is even faster).
Trying to display your 140k points without Canvas or clustering will crash your browser for sure.
If you want to render more than 100k markers, you can use Supercluster library, because Leaflet.markercluster loading of >100k markers could take more than 30 seconds.
I created a github repo to compare initial loading of Leaflet.markercluster and Supercluster.
I understand it's not ideal to change mapkit colors but specifically for a location based game I'm creating I'd like to have to colors much less dramatic and more dark. Is there a built in way that I can accomplish this? Since the game won't be specific to a certain region custom overlays wouldn't really work. I know with the old google maps the only way to do so was to create a javascript version of the map and add it in a webview (not ideal for the game) but with this new apple maps is there a way to redraw the shapes of these elements (parks, water, building) with a different color.
I don't have a complete understanding how the previous or current mapkits work from the ground up so if I'm missing any information or am confusing I apologize.
No there is no way you can do that in the current iOS6 maps.
The MapKit Reference does not have any inbuilt functions to do that.
I would seriously ask you to reconsider changing colors of the current MapKit even if you could do it through some other hack. You might get rejected from the App Store.
You have 2 options
a. Instead use your own maps from other vendors if you want to change colors and so for different places.
b. Overlays are a good way to go too but they are heavy work on REST side of downloading maps. I am currently using this in my map right now because all my map tiles are generated on the fly and I do not have to do too intensive work on the iPhone.