I want to use two leaflet plugins: ExtraMarkers and IconLabel. How to combine them together? The result should be ExtraMarker with label.

When I create ExtraMarkers:

        var icon = L.ExtraMarkers.icon({
            shadowSize: [0,0],
            prefix: 'fa',
            extraClasses: 'fa-fw',
            shape: 'circle',
            icon: 'fa-'+Icon,
            iconColor: IconColor,
            markerColor: MarkerColor

or IconLabel

        var iconLabel = L.Icon.Label.extend({
            options: {
                iconUrl: 'img/icon.png',
                shadowUrl: null,
                iconSize: new L.Point(24, 24),
                iconAnchor: new L.Point(0, 1),
                labelAnchor: new L.Point(26, 0),
                wrapperAnchor: new L.Point(12, 13),
                labelClassName: 'icon-label'
        var icon = new iconLabel({labelText: title})
  • Are you receiving an error or unexpected results when trying to combine them? What is the text of the error or what are your results vs. what you are expecting? A little extra info can help us troubleshoot. :) – MaryBeth Jul 27 '16 at 12:54

Welcome to GIS SE!

If you are referring to Leaflet.iconlabel plugin, please note that it is quite old already, and no longer maintained.

As mentioned on its home page, a more simple version is Leaflet.label plugin, for which you just "bind" a label to your marker, whatever its icon (could be your ExtraMarker).

That being said, note that with Leaflet 1.0.0-rc.2, you now have L.tooltip which provides a similar functionality as Leaflet.label, but styled like Leaflet.iconlabel. In particular, you can also simply bind it to your marker, whatever its icon: myMarker.bindTooltip("tooltip text").

  • I'm using Leaflet 1.0.0 rc2. There is tooltip feature already built in, but it doesn't work with permanent: true. See my code here JSFiddle – Dusan Kolesar Aug 1 '16 at 13:53
  • Your marker must be added to map before you can open its tooltip… jsfiddle.net/u4mg9nL1/4 – ghybs Aug 1 '16 at 14:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.