Search code examples
pythoncolorsfoliumleaflet.markercluster

Is it possible to change the default colors used in a folium marker cluster map?


I am using folium to generate some maps and one of the features I am including is the markercluster overlay - as I am frequently plotting thousands of points on a map. The clustering groups GPS points of varying quantities together and overlays a number on top of the map icon, which represents how many points have been grouped together into that cluster. By default, the fewer points grouped together in a cluster will result in a green color for the map icon and the more points grouped together will be more towards the red spectrum. Ideally, I would like to reverse this, so that when there are a lot of consolidated points in one location, the icon will be green. Whereas when there are only a few consolidated points, the color will be red. I'm thinking this needs to be edited in the branca module somewhere, but I'm not sure and generally pretty unfamiliar with how branca works. Any help is much appreciated.

Here's an example of how marker clusters are typically created:

import folium
from folium.plugins import MarkerCluster
#Create the map image and establish the center point
mapImage = folium.Map(location=[40.165505, -99.788130], 
zoom_start=12, 
tiles='OpenStreetMap')

#Create the marker cluster group, which organizes all the gps points put into it
marker_cluster_group = MarkerCluster(name='Cluster Icons')
#This is just a reference to a default google mapping icon, purely optional
pointIcon_url = "http://maps.google.com/mapfiles/kml/shapes/shaded_dot.png"
#Create the icon object    
icon = folium.features.CustomIcon(pointIcon_url, icon_size=(15, 15))
#Create the marker/gps point and add it to the cluster group
folium.Marker([40.058377, -99.939192], icon=icon).add_to(marker_cluster_group)
#Adding the cluster group to the map image
marker_cluster_group.add_to(mapImage)

Solution

  • With the help of @Conengmo 's response, I was able to get the info I needed and modify it as needed to create the below.

    import folium
    from folium.plugins import MarkerCluster
    #Create the map image and establish the center point
    mapImage = folium.Map(location=[40.165505, -99.788130], 
    zoom_start=12, 
    tiles='OpenStreetMap')
    
    #Create a variable to store your javascript function (written as a string), which adjusts the default css functionality
    #The below are the attributes that I needed for my project, but they can be whatever is needed for you
    icon_create_function = """
        function(cluster) {
        var childCount = cluster.getChildCount(); 
        var c = ' marker-cluster-';
    
        if (childCount < 50) {
            c += 'large';
        } else if (childCount < 300) {
            c += 'medium';
        } else {
            c += 'small';
        }
    
        return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
        }
        """
    #Create the marker cluster group, which organizes all the gps points put into it
    marker_cluster_group = MarkerCluster(name='Cluster Icons', icon_create_function=icon_create_function)
    #This is just a reference to a default google mapping icon, purely optional
    pointIcon_url = "http://maps.google.com/mapfiles/kml/shapes/shaded_dot.png"
    #Create the icon object    
    icon = folium.features.CustomIcon(pointIcon_url, icon_size=(15, 15))
    #Create the marker/gps point and add it to the cluster group
    folium.Marker([40.058377, -99.939192], icon=icon).add_to(marker_cluster_group)
    #Adding the cluster group to the map image
    marker_cluster_group.add_to(mapImage)