Search code examples
leafletmarkerclustererleaflet.markercluster

Font edit markerclustering


is it possible to edit only the font and its size on leaflet marker cluster? without changing the main icon?

In that case where I would have to put the line?

var clusterGroup = L.markerClusterGroup();
{

function estiloIcon(feature, latlng) {
    return L.marker(latlng, {
        icon: myIcon
    })
};
var geojsonLayer = new L.geoJson(geo, {
    pointToLayer: estiloIcon

})

clusterGroup.addLayer(geojsonLayer); 
}
map.addLayer(clusterGroup);
}

Solution

  • So I already found the answer lookin in the archives of "MasterCluster.Default.css" In the bottom of the file there is the lines to modify the font

        @font-face {
        font-family: 'freesans'; /*a name to be used later*/
        src: url('./freesansbold.ttf'); /*URL to font*/
    }
    .marker-cluster {
        background-clip: padding-box;
        border-radius: 20px;
        }
    .marker-cluster div {
        width: 30px;
        height: 30px;
        margin-left: 5px;
        margin-top: 5px;
    
        text-align: center;
        border-radius: 15px;
        font: 16px "freesans", Arial, Helvetica, sans-serif;
        text-shadow: 1px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
        }
    

    This is the lines edited