CODEWITHSUNDEEP
javascriptleaflet
alphapilgrim
alphapilgrim

Reputation: 3975

How to use the addClass method in leaflet maker?

I'd like to pass the marker a class name dynamically. I just need to know how to use leaflet's add class method. Iv'e tried a couple variations with no success.

            var venueName = venues[i]['venue']['name'];
              /* Build icon for each venue. */
            var fsqIcon = venues[i]['venue']['categories'][0]['icon'];
            var leafletIcon = L.Icon.extend({
                options: {
                    iconUrl: fsqIcon['prefix'] + '32' + fsqIcon['suffix'],
                    shadowUrl: null,
                    iconSize: new L.Point(32, 32),
                    iconAnchor: new L.Point(16, 41),
                    popupAnchor: new L.Point(0, -51)
                }
            });
            var icon = new leafletIcon();
            var marker = new L.Marker(latLng, {
                    icon: icon,
                    riseOnHover: true
                })/*tried adding here */
                .bindPopup("<div class='venueName'>" + '<h1>' + '<u>' + venueName + '</u>' + '</h1>' + '<br>' + venueLocation + '<br>' + 'Category:' + " " + category + '<br>' + 'Rating:' + " " + rating + '<br>' + venueHours + '</div>', {
                    closeButton: false
                })
                .on('click', function(e) {
                    this.openPopup();
                    this.bounce(1000, 50);
                })
                .on('mouseout', function(e) {
                    this.closePopup();
                   /*also tried this dot method here*/
                }).addClass(venueName);
            /*also tried this variation as well*/
            marker.addClass(venueName);
            map.addLayer(marker);

Upvotes: 2

Views: 2897

Answers (1)

iH8
iH8

Reputation: 28678

You can use the className option of the L.Icon class:

A custom class name to assign to both icon and shadow images. Empty by default.

http://leafletjs.com/reference.html#icon-classname

var leafletIcon = L.Icon.extend({
    options: {
        iconUrl: fsqIcon['prefix'] + '32' + fsqIcon['suffix'],
        shadowUrl: null,
        iconSize: new L.Point(32, 32),
        iconAnchor: new L.Point(16, 41),
        popupAnchor: new L.Point(0, -51),
        className: 'my-own-class'
    }
});

Upvotes: 5

Related Questions