Search code examples
javascriptleaflet

set markerColor of leaflet AwesomeMarkers to 'none / transparent'


I want to use the leaflet AwesomeMarkers (https://github.com/lvoogdt/Leaflet.awesome-markers). However there is no possibility to not set a marker color. That means, I just want to have the icon on the map, with a transparent markerColor.

Anyone knows how to do that?


Solution

  • Here's a fiddle that leaves out the color:

    http://jsfiddle.net/VPzu4/861/

    I've set the markerColor to transparent which results in the marker getting the class awesome-marker-icon-transparent and then I've defined my own style for that class which just removes the background for the icon.

    Note that this will probably break something if Leaflet.awesome-markers ever decides to use the transparent keyword in a different way.

    Update:

    To get rid of the shadow you could hide the entire leaflet-shadow-pane by css but that would hide all the shadows.

    To set the size of the marker you can try applying more css rules to awesome-marker-icon-transparent or you can pass in the extraClasses property which is used to add classes to the icon element.

    There's also the possibility that one of the 160 forks in GitHub already does what you want.