Leaflet plugin for create colored icons with optional shadow.
Exemple without shadow :
Exemple with shadow :
<script src="L.colorIcon.js"></script>| Property | Description | Default Value | Possible values |
|---|---|---|---|
| iconSize | Name of the icon | [25, 25] | Size of the icon |
| iconUrl | Url of the icon | '' | Image url |
| color | Color of the icon | '#000000' | Color to hex value (#ff0000) or rgb value (rgb(255, 0, 0)) |
| shadowUrl | Url of the shadow (no shadow if empty) | '' | Image of shadow url |
| shadowSize | Size of the shadow | [25, 25] | Size of the shadow |
| shadowAnchor | Anchor of the shadow | [0, 0] | The coordinates of the "tip" of the shadow (relative to its top left corner) (the same as iconAnchor if not specified). |
| shadowColor | Color of the shadow | '#000000' | Color of shadow to hex value (#ff0000) or rgb value (rgb(255, 0, 0)) |
Exemple :
let iconBuilding = L.colorIcon({
iconSize : [30, 30],
popupAnchor : [0, -15],
iconUrl: "img/building-solid.svg",
color: "#3f39b6"
});Exemple with shadow :
let iconBuildingRed = L.colorIcon({
iconSize : [40, 40],
popupAnchor : [0, -20],
iconUrl: "img/building-solid.svg",
shadowUrl: "img/building-solid.svg",
shadowAnchor: [-3, -1],
shadowSize: [40, 40],
shadowColor: "#664848",
color: "rgb(255, 0, 0)"
});ColorIcon inherits from L.DivIcon, it allows to generate a css filter for create colored icon.
Your base icon image must be black to make the colorization work.
Leaflet.ColorIcon is licensed under the MIT License - http://opensource.org/licenses/mit-license.html.