├── dist ├── MapkeyIcons.eot ├── MapkeyIcons.ttf ├── MapkeyIcons.woff ├── L.Icon.Mapkey.css ├── L.Icon.Mapkey.js ├── MapkeyIcons.css └── MapkeyIcons.svg ├── package.json ├── LICENSE └── README.md /dist/MapkeyIcons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mapshakers/leaflet-mapkey-icon/HEAD/dist/MapkeyIcons.eot -------------------------------------------------------------------------------- /dist/MapkeyIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mapshakers/leaflet-mapkey-icon/HEAD/dist/MapkeyIcons.ttf -------------------------------------------------------------------------------- /dist/MapkeyIcons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mapshakers/leaflet-mapkey-icon/HEAD/dist/MapkeyIcons.woff -------------------------------------------------------------------------------- /dist/L.Icon.Mapkey.css: -------------------------------------------------------------------------------- 1 | @import url("MapkeyIcons.css"); 2 | .leaflet-mki-blank { 3 | text-align: center; 4 | } 5 | 6 | .leaflet-mki { 7 | text-align: center; 8 | box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, .8); 9 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "leaflet-mapkey-icon", 3 | "version": "0.0.1", 4 | "description": "Extensible MapkeyIcons for leaflet marker.", 5 | "main": "dist/L.Icon.Mapkey.js", 6 | "author": "Filip Zavadil, mapshakers.com", 7 | "license": "MIT", 8 | "dependencies": { 9 | "leaflet": ">=0.7.3" 10 | }, 11 | "keywords": ["marker", "icon","symbol","leaflet"] 12 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015, Filip Zavadil 4 | All rights reserved. 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | mapkeyicons 3 |
4 | 5 |
6 | mapkeyicons for leaflet 7 |
8 | mapkeyicons for leaflet 9 | ===================== 10 | 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) . 11 | 12 | *Compatible with Leaflet 0.6.0 or newer* 13 | 14 | ## Example 15 | [Check out demo and examples!](http://mapshakers.github.io/projects/leaflet-mapkey-icon/) 16 | 17 | ## Getting started 18 | Using leaflet-mapkey-icon plugin is very easy and comfortable. 19 | ### Usage 20 | * Download and place files from ```dist``` folder to the same place in your project. 21 | * Link javascript and style file in your HTML document: 22 | ```html 23 | 24 | 25 | ``` 26 | * Then use in simple way in javascript file: 27 | ```javascript 28 | // Creating MapkeyIcon object 29 | var mki = L.icon.mapkey({icon:"school",color:'#725139',background:'#f2c357',size:30} 30 | // Append to marker: 31 | L.marker([50,14.4],{icon:mki}).addTo(map); 32 | ``` 33 | 34 | ### Options 35 | | option | Description | Default Value | Possible values | 36 | | --------------- | ---------------------- | ------------- | ---------------------------------------------------- | 37 | | icon | ID of icon | 'mapkey' | e.g. 'bar','school' [Check out mapkeyicons.com for icon names](http://www.mapkeyicons.com) | 38 | | size | Size of icon in pixels | 26 | any number | 39 | | color | Color of the icon | 'white' | any CSS color (e.g. 'red','rgba(20,160,90,0.5)', '#686868', ...) | 40 | | background | Color of the background| '#1F7499' | any CSS color or false for no background | 41 | | borderRadius | Border radius of background in pixels | '100%' (for circle icon) | any number (for circle size/2, for square 0.001) | 42 | | hoverScale | Number to scale icon on hover | 1.4 | any real number (best result in range 1 - 2, use 1 for no effect) | 43 | | hoverEffect | Toggle hover effect | true | true/false for switch on/off effect on hover | 44 | | additionalCSS | Additional CSS code to style icon | null | CSS code (e.g. "border:4px solid #aa3838;") | 45 | | hoverCSS | CSS code to style icon on hover | null | CSS code (e.g. "'background-color:#992b00!important;color:#99defc!important;'") | 46 | | htmlCode | Use this instead of icon option | null | e.g. '','' [Check out mapkeyicons.com for html code](http://www.mapkeyicons.com) | 47 | | boxShadow | Switch on/off icon shadow | true | true/false | 48 | 49 | ### License 50 | 51 | **leaflet-mapkey-icon** is free software, and may be redistributed under the MIT-LICENSE. 52 | -------------------------------------------------------------------------------- /dist/L.Icon.Mapkey.js: -------------------------------------------------------------------------------- 1 | L.Icon.Mapkey = L.DivIcon.extend({ 2 | 3 | options: { 4 | size: 28, 5 | className: '', 6 | icon: 'mapkey', 7 | background: '#1F7499', 8 | color: '#fcfcf9', 9 | hoverScale: 1.4, 10 | borderRadius: null, 11 | additionalCSS: '', 12 | hoverEffect: true, 13 | hoverCSS: '', 14 | htmlCode: null, 15 | boxShadow: true, 16 | }, 17 | initialize: function (options) { 18 | 19 | L.setOptions(this,options); 20 | 21 | 22 | this.options.borderRadius = this.options.borderRadius || this.options.size; 23 | 24 | this.options.iconSize = [this.options.size,this.options.size]; 25 | var iconEl = document.createElement("div"); 26 | var styleAttr = document.createAttribute("style"); 27 | var classAttr = document.createAttribute("class"); 28 | classAttr.value = 'leaflet-mki-'+new Date().getTime()+'-'+Math.round(Math.random()*100000) 29 | var style = []; 30 | style.push("height:"+(this.options.size)+"px"); 31 | style.push("width:"+(this.options.size)+"px"); 32 | style.push("line-height:"+(this.options.size)+"px"); 33 | style.push("color:"+this.options.color); 34 | style.push("font-size:"+(this.options.size-8)+"px"); 35 | style.push("border-radius:"+(this.options.borderRadius)+"px"); 36 | style.push("text-align:center; transition-property:font-size||line-height||background||color;transition-duration: 0.2s;transition-timing-function: linear;"); 37 | 38 | if (this.options.background){ 39 | if (this.options.boxShadow){ 40 | style.push("box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, .8);"); 41 | } 42 | style.push("background-color:"+this.options.background); 43 | } 44 | 45 | 46 | 47 | style.push(this.options.additionalCSS); 48 | styleAttr.value = style.join(';'); 49 | 50 | iconEl.setAttributeNode(styleAttr); 51 | iconEl.setAttributeNode(classAttr); 52 | 53 | 54 | var mki = document.createElement("span"); 55 | var classAttrSpan = document.createAttribute("class"); 56 | classAttrSpan.value = "mki-intext mki-"+this.options.icon 57 | mki.setAttributeNode(classAttrSpan); 58 | 59 | if (this.options.htmlCode){ 60 | var html = document.createElement("span"); 61 | html.innerHTML = this.options.htmlCode; 62 | var classAttrSpan = document.createAttribute("class"); 63 | classAttrSpan.value = "mki-intext"; 64 | html.setAttributeNode(classAttrSpan); 65 | iconEl.appendChild(html); 66 | console.log(iconEl.outerHTML) 67 | } else { 68 | iconEl.appendChild(mki); 69 | } 70 | this.options.html = iconEl.outerHTML; 71 | this.options.className = 'leaflet-mki-blank'; 72 | this.options.popupAnchor = [0,-this.options.size/2]; 73 | 74 | 75 | /** hover and focus effect **/ 76 | if (this.options.hoverEffect){ 77 | 78 | var styleHover = []; 79 | var hoverScale = this.options.hoverScale; 80 | styleHover.push("height:"+this.options.size*hoverScale+"px!important"); 81 | styleHover.push("width:"+this.options.size*hoverScale+"px!important"); 82 | styleHover.push("margin-top:"+-1*(+this.options.size*hoverScale/2-this.options.size/2)+"px!important"); 83 | styleHover.push("margin-left:"+-1*(+this.options.size*hoverScale/2-this.options.size/2)+"px!important"); 84 | styleHover.push("line-height:"+(this.options.size*hoverScale)+"px!important"); 85 | styleHover.push("font-size:"+(this.options.size*hoverScale-6*hoverScale)+"px!important"); 86 | styleHover.push("border-radius:"+(this.options.borderRadius*hoverScale)+"px!important"); 87 | styleHover.push(this.options.hoverCSS); 88 | var css='.'+classAttr.value+':hover,.'+classAttr.value+':focus{'+styleHover.join(";")+'}'; 89 | style=document.createElement('style'); 90 | if (style.styleSheet) 91 | style.styleSheet.cssText=css; 92 | else 93 | style.appendChild(document.createTextNode(css)); 94 | document.getElementsByTagName('head')[0].appendChild(style); 95 | } 96 | L.DivIcon.prototype.initialize.call(this, options); 97 | }, 98 | onAdd : function (map) { 99 | L.DivIcon.prototype.onAdd.call(this, map); 100 | } 101 | }); 102 | 103 | L.icon.mapkey = function (options) { 104 | return new L.Icon.Mapkey(options); 105 | }; -------------------------------------------------------------------------------- /dist/MapkeyIcons.css: -------------------------------------------------------------------------------- 1 | /********************************** 2 | *********************************** 3 | MapkeyIcons - css style 4 | license: CC0 1.0 Universal 5 | author: Filip Zavadil, www.mapshakers.com, 2015 6 | version: 1.0.0 7 | *********************************** 8 | ***********************************/ 9 | 10 | @font-face { 11 | font-family: 'MapkeyIcons'; 12 | src: url("MapkeyIcons.eot"); /* IE9 */ 13 | src: url("MapkeyIcons.eot?#iefix") format('embedded-opentype'), /* IE6-8 */ 14 | url('MapkeyIcons.woff') format('woff'), 15 | url('MapkeyIcons.ttf') format('truetype'), 16 | url('MapkeyIcons.svg#MapkeyIcons') format('svg'); 17 | font-weight: normal; 18 | font-style: normal; 19 | } 20 | 21 | .mki,.mki-medium,.mki-intext,.mki-short,.mki-tall,.mki-grande,.mki-venti { 22 | font-family: 'MapkeyIcons', sans-serif; 23 | display: inline-block; 24 | font-weight: normal; 25 | text-decoration: none; 26 | text-rendering: auto; 27 | -webkit-font-smoothing: antialiased; 28 | -webkit-user-select: none; 29 | -moz-user-select: none; 30 | -ms-user-select: none; 31 | user-select: none; 32 | 33 | } 34 | .mki-intext { font-size: 1.2em; } 35 | 36 | .mki-short { font-size: small; } 37 | .mki-tall { font-size: large; } 38 | .mki-grande { font-size: 32px; } 39 | .mki-venti { font-size: 64px; } 40 | 41 | 42 | .mki-mapshakers:before { content: '\e000';} 43 | .mki-mapkey:before { content: '\e001';} 44 | .mki-bar:before { content: '\e003';} 45 | .mki-traffic_signal:before { content: '\e004';} 46 | .mki-playground_alt:before { content: '\e005';} 47 | .mki-dentist:before { content: '\e006';} 48 | .mki-fishing:before { content: '\e007';} 49 | .mki-wind_generator:before { content: '\e008';} 50 | .mki-crucifix:before { content: '\e009';} 51 | .mki-cave_entrance:before { content: '\e00a';} 52 | .mki-castle_defensive:before { content: '\e00b';} 53 | .mki-cinema:before { content: '\e00c';} 54 | .mki-water_tower:before { content: '\e00d';} 55 | .mki-boundary_stone:before { content: '\e00e';} 56 | .mki-zoo:before { content: '\e00f';} 57 | .mki-cinema_alt:before { content: '\e010';} 58 | .mki-court_house:before { content: '\e011';} 59 | .mki-fort:before { content: '\e012';} 60 | .mki-fountain:before { content: '\e013';} 61 | .mki-library:before { content: '\e014';} 62 | .mki-rocks:before { content: '\e015';} 63 | .mki-cemetery:before { content: '\e016';} 64 | .mki-pub:before { content: '\e017';} 65 | .mki-buddhism:before { content: '\e018';} 66 | .mki-triangle:before { content: '\e019';} 67 | .mki-police:before { content: '\e01a';} 68 | .mki-ice_ring:before { content: '\e01b';} 69 | .mki-marina:before { content: '\e01c';} 70 | .mki-playground:before { content: '\e01d';} 71 | .mki-ruins:before { content: '\e01e';} 72 | .mki-internet:before { content: '\e01f';} 73 | .mki-airport:before { content: '\e020';} 74 | .mki-chapel:before { content: '\e021';} 75 | .mki-museum:before { content: '\e022';} 76 | .mki-monument:before { content: '\e023';} 77 | .mki-sport_centre:before { content: '\e024';} 78 | .mki-information:before { content: '\e025';} 79 | .mki-hospital:before { content: '\e026';} 80 | .mki-golf:before { content: '\e027';} 81 | .mki-picnic_site:before { content: '\e028';} 82 | .mki-drag_lift:before { content: '\e029';} 83 | .mki-construction:before { content: '\e02a';} 84 | .mki-islamism:before { content: '\e02b';} 85 | .mki-vineyard:before { content: '\e02c';} 86 | .mki-lighthouse:before { content: '\e02d';} 87 | .mki-tower:before { content: '\e02e';} 88 | .mki-wayside_cross:before { content: '\e02f';} 89 | .mki-theatre:before { content: '\e030';} 90 | .mki-train:before { content: '\e031';} 91 | .mki-viewpoint:before { content: '\e032';} 92 | .mki-tram:before { content: '\e033';} 93 | .mki-tree_cinofer:before { content: '\e034';} 94 | .mki-university:before { content: '\e035';} 95 | .mki-tram_stop:before { content: '\e036';} 96 | .mki-underground:before { content: '\e037';} 97 | .mki-adit:before { content: '\e038';} 98 | .mki-post_office:before { content: '\e039';} 99 | .mki-spring:before { content: '\e03a';} 100 | .mki-stadium:before { content: '\e03b';} 101 | .mki-swimming_pool:before { content: '\e03c';} 102 | .mki-cityhall:before { content: '\e03d';} 103 | .mki-bus:before { content: '\e03e';} 104 | .mki-volcano:before { content: '\e03f';} 105 | .mki-architecture:before { content: '\e040';} 106 | .mki-arrow_up:before { content: '\e041';} 107 | .mki-archaeological:before { content: '\e042';} 108 | .mki-arrow_up_double:before { content: '\e043';} 109 | .mki-building:before { content: '\e044';} 110 | .mki-toilet:before { content: '\e045';} 111 | .mki-watermill:before { content: '\e046';} 112 | .mki-pharmacy:before { content: '\e047';} 113 | .mki-waterpark:before { content: '\e048';} 114 | .mki-viewtower:before { content: '\e049';} 115 | .mki-city:before { content: '\e04a';} 116 | .mki-battlefield:before { content: '\e04b';} 117 | .mki-clean:before { content: '\e04c';} 118 | .mki-judaism:before { content: '\e04d';} 119 | .mki-christianism:before { content: '\e04e';} 120 | .mki-crown:before { content: '\e04f';} 121 | .mki-restaurant:before { content: '\e050';} 122 | .mki-windmill:before { content: '\e051';} 123 | .mki-caravan_site:before { content: '\e052';} 124 | .mki-castle:before { content: '\e053';} 125 | .mki-camp_site:before { content: '\e054';} 126 | .mki-cable_car:before { content: '\e055';} 127 | .mki-bus_stop:before { content: '\e056';} 128 | .mki-bicycle:before { content: '\e057';} 129 | .mki-drop:before { content: '\e058';} 130 | .mki-beach:before { content: '\e059';} 131 | .mki-water_well:before { content: '\e05a';} 132 | .mki-tree_leaf:before { content: '\e05b';} 133 | .mki-bag:before { content: '\e05c';} 134 | .mki-barracks:before { content: '\e05d';} 135 | .mki-laptop:before { content: '\e05e';} 136 | .mki-waterwork:before { content: '\e05f';} 137 | .mki-mountain:before { content: '\e060';} 138 | .mki-home:before { content: '\e061';} 139 | .mki-hostel:before { content: '\e062';} 140 | .mki-hotel:before { content: '\e063';} 141 | .mki-hotel_alt:before { content: '\e064';} 142 | .mki-mall:before { content: '\e065';} 143 | .mki-market_place:before { content: '\e066';} 144 | .mki-cartography:before { content: '\e067';} 145 | .mki-pitch:before { content: '\e068';} 146 | .mki-shelter:before { content: '\e069';} 147 | .mki-saddle:before { content: '\e06a';} 148 | .mki-sinkhole:before { content: '\e06b';} 149 | .mki-supermarket:before { content: '\e06c';} 150 | .mki-telephone:before { content: '\e06d';} 151 | .mki-stupa:before { content: '\e06e';} 152 | .mki-magnifier:before { content: '\e06f';} 153 | .mki-flag:before { content: '\e070';} 154 | .mki-eye:before { content: '\e071';} 155 | .mki-gallery:before { content: '\e072';} 156 | .mki-gear:before { content: '\e073';} 157 | .mki-map:before { content: '\e074';} 158 | .mki-island:before { content: '\e075';} 159 | .mki-marker:before { content: '\e076';} 160 | .mki-nature:before { content: '\e077';} 161 | .mki-square:before { content: '\e078';} 162 | .mki-ticket:before { content: '\e079';} 163 | .mki-star:before { content: '\e07a';} 164 | .mki-town:before { content: '\e07b';} 165 | .mki-village:before { content: '\e07c';} 166 | .mki-unesco:before { content: '\e07d';} 167 | .mki-facebook:before { content: '\e07e';} 168 | .mki-github:before { content: '\e07f';} 169 | .mki-linkedin:before { content: '\e080';} 170 | .mki-skype:before { content: '\e081';} 171 | .mki-data:before { content: '\e082';} 172 | .mki-database:before { content: '\e083';} 173 | .mki-analyse:before { content: '\e084';} 174 | .mki-atm:before { content: '\e085';} 175 | .mki-avatar:before { content: '\e086';} 176 | .mki-burger:before { content: '\e087';} 177 | .mki-cash:before { content: '\e088';} 178 | .mki-contour:before { content: '\e089';} 179 | .mki-download:before { content: '\e08a';} 180 | .mki-upload:before { content: '\e08b';} 181 | .mki-heart:before { content: '\e08c';} 182 | .mki-invisible:before { content: '\e08d';} 183 | .mki-school:before { content: '\e08e';} 184 | .mki-mine:before { content: '\e08f';} 185 | .mki-smartphone:before { content: '\e090';} -------------------------------------------------------------------------------- /dist/MapkeyIcons.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------