Skip to content

shevekk/Leaflet.ColorIcon

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Leaflet.ColorIcon

Leaflet plugin for create colored icons with optional shadow.

Screenshots

Exemple without shadow :

ColorIcon screenshot

Exemple with shadow :

ColorIcon shadow screenshot

Demo

Using the plugin

<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.

License

Leaflet.ColorIcon is licensed under the MIT License - http://opensource.org/licenses/mit-license.html.

About

Leaflet plugin for create colored icons

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published