New dimension of markers for Leaflet. Based on MapkeyIcons
CSS JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
dist transitions Sep 7, 2015
LICENSE initial commit Sep 4, 2015 Update Sep 9, 2015
package.json initial commit Sep 4, 2015

mapkeyicons for leaflet
mapkeyicons for leaflet ===================== New dimension of markers for [Leaflet]( It uses []( also on github [mapshakers/mapkeyicons]( .

Compatible with Leaflet 0.6.0 or newer


Check out demo and examples!

Getting started

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:


option Description Default Value Possible values
icon ID of icon 'mapkey' e.g. 'bar','school' Check out 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. '&#57347;','&#xe003;' Check out 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.