Add a script version of MarkerCluster to speedup creating many markers.
See original GitHub issueFor example following code costs 5 seconds to add 1000 markers:
import folium
import numpy as np
from folium.plugins import MarkerCluster
N = 1000
fig = folium.element.Figure()
map_ = folium.Map(location=[20, 50], zoom_start=3)
cluster = MarkerCluster(np.random.uniform(0, 90, (N, 2))).add_to(map_)
map_.add_to(fig)
and the output html contains code for 1000 markers.
I tried a Javascript version to speedup this:
class MarkerClusterScript(MarkerCluster):
def __init__(self, data, callback):
from jinja2 import Template
super(MarkerClusterScript, self).__init__([])
self._name = 'Script'
self._data = data
if callable(callback):
from flexx.pyscript import py2js
self._callback = py2js(callback, new_name="callback")
else:
self._callback = "var callback = {};".format(_callback)
self._template = Template(u"""
{% macro script(this, kwargs) %}
(function(){
var data = {{this._data}};
var map = {{this._parent.get_name()}};
var cluster = L.markerClusterGroup();
{{this._callback}}
for (var i = 0; i < data.length; i++) {
var row = data[i];
var marker = callback(row);
marker.addTo(cluster);
}
cluster.addTo(map);
})();
{% endmacro %}
""")
and then create the map by
import pandas as pd
N = 1000
df = pd.DataFrame(np.random.uniform(0, 90, (N, 2)), columns=list("xy"))
df["color"] = np.random.choice(["red", "green", "blue"], N)
fig = folium.element.Figure()
map_ = folium.Map(location=[20, 50], zoom_start=3)
def create_marker(row):
icon = L.AwesomeMarkers.icon({markerColor: row.color})
marker = L.marker(L.LatLng(row.x, row.y))
marker.setIcon(icon)
return marker
MarkerClusterScript(df.to_json(orient="records"), callback=create_marker).add_to(map_)
map_.add_to(fig)
It only takes 0.3 seconds. All the data are saved in a javascript array, and the for-loop for creating markers occured in web brower.
I suggest to add this kind of Classes for speedup.
Issue Analytics
- State:
- Created 7 years ago
- Reactions:4
- Comments:13 (5 by maintainers)
Top Results From Across the Web
Marker Clustering | Maps JavaScript API - Google Developers
Overview. This tutorial shows you how to use marker clusters to display a large number of markers on a map. You can use...
Read more >Leaflet markercluster: How can I create a ... - Stack Overflow
Is there some better way to create markers that have an ID that I can refer to ... with the need to add...
Read more >Rethinking the usage and experience of clustering markers in ...
In practice inside the clustering web map 'community', it was popularised by Dave Leaver on the plugin Markercluster for the Leaflet library and ......
Read more >[Google Maps] How to Cluster Map Markers to Greatly Improve ...
To create a marker cluster, let's first look at how to create non-clustered markers. When you add typical markers to the map, the...
Read more >How to Create Marker and Marker Cluster with Leaflet Map
A method of creating markers and layers in the Leaflet map architecture ... First, we add the necessary modules to our package.json file....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Sorry for referencing a closed issue, but this is way above my Javascript capacities. Would there be an easy way at all for markers created using FastMarkerClusters to have popups as well?
@ruoyu0088 your class was incredibly useful for plotting 25,000+ points globally http://nbviewer.jupyter.org/gist/anonymous/33f38b09ad3bfa277e2d9c06e4bb588c