How To Add A Marker With A Specific Class To A Layer Or Layergroup?

I have a couple of markers that have a css class with its names, for example: markerOne has .markerone as css class, and so on. Its possible to create a function to assign these ma

Solution 1:

You could add some functionality to L.Marker by creating a custom marker class to make things easier. Hook into the onAdd function so that you can automaticly assign a classname upon marker initialization. And you can add a function to check for that classname:

L.CustomMarker = L.Marker.extend({

    // Overwrite onAdd function
    onAdd: function (map) {

        // Run original onAdd function
        L.Marker.prototype.onAdd.call(this, map);

        // Check if there's a class set in optionsif (this.options.className) {

            // Apply className to icon and shadow
            L.DomUtil.addClass(this._icon, this.options.className);
            L.DomUtil.addClass(this._shadow, this.options.className);
        }

        // return instancereturnthis;
    },

    // Function for checking class
    hasClass: function (name) {

        // Check if a class is set in options and compare to given onereturnthis.options.className && this.options.className === name;
    }
});

Now you easily apply a classname upon initialization of your markers:

var marker = new L.CustomMarker([0, 0], {
    'className': 'foobar'
}).addTo(map);

And check if a certain class is set on your marker:

if (marker.hasClass('foobar')) {
    // YES! Do stuff
}

That said, you don't actually need to add classes to your markers to split them up into different groups. You already have those groups in your datastructure. Consider the following structure:

var markers = [{
    'name': 'Foo',
    'coordinates': [{
        'lat': -25,
        'lng': -25
    }, {
        'lat': 25,
        'lng': -25
    }]
}, {
    'name': 'Bar',
    'coordinates': [{
        'lat': -25,
        'lng': 25
    }, {
        'lat': 25,
        'lng': 25
    }]
}];

To put those into different groups, first create a object to store the groups which you can later add to your layercontrol:

var overlays = {};

Now you can iterate the structure, create layergroups for each set of markers and add them to it:

// iterate the structure, handle each group
markers.forEach(function (group) {

    // check if there's already a group for this nameif (!overlays.hasOwnProperty(group.name)) {

        // new group, create layergroup, store in object and add to map
        overlays[group.name] = new L.LayerGroup().addTo(map);
    }

    // iterate the coordinates for this group
    group.coordinates.forEach(function (coordinate) {

        // create markers for each coordinate and add to the layergroupnew L.Marker([coordinate.lat, coordinate.lng]).addTo(overlays[group.name]);

    })
});

Now you can add the overlays object to the layercontrol so you can toggle them:

new L.Control.Layers(null, overlays).addTo(map);

Here's a working example on Plunker: http://plnkr.co/edit/t0YiJO8RmEdnIKKXugdm?p=preview

You can still add classnames if you need to by using the custom marker class above and changing the coordinates iterator like this:

group.coordinates.forEach(function (coordinate) {
    new L.CustomMarker([coordinate.lat, coordinate.lng], {
        'className': group.name
    }).addTo(overlays[group.name]);
})

Here's a working example on Plunker: http://plnkr.co/edit/cHPSLKDbltxr9jFZotOD?p=preview

Solution 2:

In Leaflet, markers do not have CSS classes. Markers have icons, and icons have a className option, so:

var marker1 = L.marker({ 
      icon: L.icon({ 
             className: 'green'// Other icon options
      })
      // Other marker options
 });

console.log(marker1.options.icon.options.className);