Compatible with Leaflet 0.6.0 or newer
Using leaflet-mapkey-icon plugin is very easy and comfortable.
- Download and place files from
dist
folder to the same place in your project. - Link javascript and style file in your HTML document:
<script src="...path-to-files.../L.Icon.Mapkey.js"></script>
<link rel="stylesheet" href="...path-to-files.../MapkeyIcons.css" />
- Then use in simple way in javascript file:
// Creating MapkeyIcon object
var mki = L.icon.mapkey({icon:"school",color:'#725139',background:'#f2c357',size:30}
// Append to marker:
L.marker([50,14.4],{icon:mki}).addTo(map);
option | Description | Default Value | Possible values |
---|---|---|---|
icon | ID of icon | 'mapkey' | e.g. 'bar','school' Check out mapkeyicons.com for icon names |
size | Size of icon in pixels | 26 | any number |
color | Color of the icon | 'white' | any CSS color (e.g. 'red','rgba(20,160,90,0.5)', '#686868', ...) |
background | Color of the background | '#1F7499' | any CSS color or false for no background |
borderRadius | Border radius of background in pixels | '100%' (for circle icon) | any number (for circle size/2, for square 0.001) |
hoverScale | Number to scale icon on hover | 1.4 | any real number (best result in range 1 - 2, use 1 for no effect) |
hoverEffect | Toggle hover effect | true | true/false for switch on/off effect on hover |
additionalCSS | Additional CSS code to style icon | null | CSS code (e.g. "border:4px solid #aa3838;") |
hoverCSS | CSS code to style icon on hover | null | CSS code (e.g. "'background-color:#992b00!important;color:#99defc!important;'") |
htmlCode | Use this instead of icon option | null | e.g. '','' Check out mapkeyicons.com for html code |
boxShadow | Switch on/off icon shadow | true | true/false |
leaflet-mapkey-icon is free software, and may be redistributed under the MIT-LICENSE.