question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add a script version of MarkerCluster to speedup creating many markers.

See original GitHub issue

For 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:closed
  • Created 7 years ago
  • Reactions:4
  • Comments:13 (5 by maintainers)

github_iconTop GitHub Comments

4reactions
leblancfgcommented, Oct 5, 2017

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?

3reactions
JamesGardinercommented, May 19, 2016

@ruoyu0088 your class was incredibly useful for plotting 25,000+ points globally http://nbviewer.jupyter.org/gist/anonymous/33f38b09ad3bfa277e2d9c06e4bb588c

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found