mapkeyicons for leaflet

September 9, 2015 ยท View on GitHub

mapkeyicons
mapkeyicons for leaflet
mapkeyicons for leaflet ===================== New dimension of markers for [Leaflet](http://leafletjs.com). It uses [mapkeyicons.com](http://mapkeyicons.com) also on github [mapshakers/mapkeyicons](https://github.com/mapshakers/mapkeyicons) .

Compatible with Leaflet 0.6.0 or newer

Example

Check out demo and examples!

Getting started

Using leaflet-mapkey-icon plugin is very easy and comfortable.

Usage

  • 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);

Options

optionDescriptionDefault ValuePossible values
iconID of icon'mapkey'e.g. 'bar','school' Check out mapkeyicons.com for icon names
sizeSize of icon in pixels26any number
colorColor of the icon'white'any CSS color (e.g. 'red','rgba(20,160,90,0.5)', '#686868', ...)
backgroundColor of the background'#1F7499'any CSS color or false for no background
borderRadiusBorder radius of background in pixels'100%' (for circle icon)any number (for circle size/2, for square 0.001)
hoverScaleNumber to scale icon on hover1.4any real number (best result in range 1 - 2, use 1 for no effect)
hoverEffectToggle hover effecttruetrue/false for switch on/off effect on hover
additionalCSSAdditional CSS code to style iconnullCSS code (e.g. "border:4px solid #aa3838;")
hoverCSSCSS code to style icon on hovernullCSS code (e.g. "'background-color:#992b00!important;color:#99defc!important;'")
htmlCodeUse this instead of icon optionnulle.g. '&#57347;','&#xe003;' Check out mapkeyicons.com for html code
boxShadowSwitch on/off icon shadowtruetrue/false

License

leaflet-mapkey-icon is free software, and may be redistributed under the MIT-LICENSE.