CODEWITHSUNDEEP
jqueryleaflet
Pepe
Pepe

Reputation: 1002

Group up different Leaflet circleMarkers

I have over 100 leaflet markers (circleMarker). Some markers have as style {color: '#ffffff', weight:"4"}, some other have {color: '#000000', weight:"4"}. To change it later the simple way, I don't want to write it inline into the markers itself. I just want to create two groups and a definition of styles for each of them. Is that possible?

At the moment:

var markers = [];
var marker1 = L.circleMarker([00.000,00.000],{color: '#ffffff', weight:"4"}).addTo(map).on("click", circleClick).bindPopup
    ('<div>City Name</div>').bindTooltip("Say hello");
    markers.push(marker1);
var marker2 = L.circleMarker([00.000,00.000],{color: '#000000', weight:"3"}).addTo(map).on("click", circleClick).bindPopup
    ('<div>City Name</div>').bindTooltip("Say hello");
    markers.push(marker2);
var marker3 = L.circleMarker([00.000,00.000],{color: '#ffffff', weight:"4"}).addTo(map).on("click", circleClick).bindPopup
    ('<div>City Name</div>').bindTooltip("Say hello");
    markers.push(marker3);
var marker4 = L.circleMarker([00.000,00.000],{color: '#000000', weight:"3"}).addTo(map).on("click", circleClick).bindPopup
    ('<div>City Name</div>').bindTooltip("Say hello");
    markers.push(marker4);

What I need is something like this (Group1 & Group2):

var markers = [];
var marker1 = L.circleMarker([00.000,00.000],{Group1}).addTo(map).on("click", circleClick).bindPopup
    ('<div>City Name</div>').bindTooltip("Say hello");
    markers.push(marker1);
var marker2 = L.circleMarker([00.000,00.000],{Group2}).addTo(map).on("click", circleClick).bindPopup
    ('<div>City Name</div>').bindTooltip("Say hello");
    markers.push(marker2);
var marker3 = L.circleMarker([00.000,00.000],{Group1}).addTo(map).on("click", circleClick).bindPopup
    ('<div>City Name</div>').bindTooltip("Say hello");
    markers.push(marker3);
var marker4 = L.circleMarker([00.000,00.000],{Group2}).addTo(map).on("click", circleClick).bindPopup
    ('<div>City Name</div>').bindTooltip("Say hello");
    markers.push(marker4);

var Group1 = /* some style definition */
var Group2 = /* some other style definition */

Is there a way to do this in leaflet?

UPDATE:

For everybody who is interested in the solution, it should be (based on Aesahaettr code):

function group1Style() {
    return {
        color: '#ffffff',
        weight:"4"
    };
}

var marker1 = L.circleMarker([00.000,00.000],group1Style()).addTo(map).on("click", circleClick).bindPopup ('<div>City Name</div>').bindTooltip("Say hello");markers.push(marker1);

So just add your "style function" after the latlng directly, no {style: ....}.

Upvotes: 0

Views: 122

Answers (1)

Aesahaettr
Aesahaettr

Reputation: 181

Yes it is possible to set up a specific style for a certain group and another style for the others.

You can do that using functions if you want or just a JSON you pass in the Leaflet constructor at the creation of the Marker :

/**
 * This is the function that will be returning the style of the Group1
 */
function group1Style() {
    return {
        color: '#ffffff',
        weight:"4"
    };
}

/**
 * This is the function that will be returning the style of the Group2
 */
function group2Style() {
    return {
        color: '#000000',
        weight:"3"
    };
}

// for good practice use let instead of var
let marker1 = L.circleMarker(
        [00.000,00.000],
        {
            /**
             *  Here we pass the style as an option of the constructor
             *  I am using a condition here but you can set the style however you want
             */
            style: condition ? group1Style() : group2Style()
        }
    )
    .addTo(map)
    .on("click", circleClick)
    .bindPopup('<div>City Name</div>')
    .bindTooltip("Say hello");
    
markers.push(marker1);

Upvotes: 1

Related Questions