diff --git a/mapkeys/LICENSE b/mapkeys/LICENSE new file mode 100644 index 0000000..75f2b06 --- /dev/null +++ b/mapkeys/LICENSE @@ -0,0 +1,22 @@ +The MIT License (MIT) + +Copyright (c) 2015, Filip Zavadil +All rights reserved. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/mapkeys/README.md b/mapkeys/README.md new file mode 100644 index 0000000..086a37f --- /dev/null +++ b/mapkeys/README.md @@ -0,0 +1,51 @@ +
+ 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!](http://mapshakers.github.io/projects/leaflet-mapkey-icon/) + +## 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: +```html + + +``` +* Then use in simple way in javascript file: +```javascript +// 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 +| option | Description | Default Value | Possible values | +| --------------- | ---------------------- | ------------- | ---------------------------------------------------- | +| icon | ID of icon | 'mapkey' | e.g. 'bar','school' [Check out mapkeyicons.com for icon names](http://www.mapkeyicons.com) | +| 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](http://www.mapkeyicons.com) | +| boxShadow | Switch on/off icon shadow | true | true/false | + +### License + +**leaflet-mapkey-icon** is free software, and may be redistributed under the MIT-LICENSE. diff --git a/mapkeys/dist/L.Icon.Mapkey.css b/mapkeys/dist/L.Icon.Mapkey.css new file mode 100644 index 0000000..73ea59b --- /dev/null +++ b/mapkeys/dist/L.Icon.Mapkey.css @@ -0,0 +1,9 @@ +@import url("MapkeyIcons.css"); +.leaflet-mki-blank { + text-align: center; +} + +.leaflet-mki { + text-align: center; + box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, .8); +} \ No newline at end of file diff --git a/mapkeys/dist/L.Icon.Mapkey.js b/mapkeys/dist/L.Icon.Mapkey.js new file mode 100644 index 0000000..97bc173 --- /dev/null +++ b/mapkeys/dist/L.Icon.Mapkey.js @@ -0,0 +1,105 @@ +L.Icon.Mapkey = L.DivIcon.extend({ + + options: { + size: 28, + className: '', + icon: 'mapkey', + background: '#1F7499', + color: '#fcfcf9', + hoverScale: 1.4, + borderRadius: null, + additionalCSS: '', + hoverEffect: true, + hoverCSS: '', + htmlCode: null, + boxShadow: true, + }, + initialize: function (options) { + + L.setOptions(this,options); + + + this.options.borderRadius = this.options.borderRadius || this.options.size; + + this.options.iconSize = [this.options.size,this.options.size]; + var iconEl = document.createElement("div"); + var styleAttr = document.createAttribute("style"); + var classAttr = document.createAttribute("class"); + classAttr.value = 'leaflet-mki-'+new Date().getTime()+'-'+Math.round(Math.random()*100000) + var style = []; + style.push("height:"+(this.options.size)+"px"); + style.push("width:"+(this.options.size)+"px"); + style.push("line-height:"+(this.options.size)+"px"); + style.push("color:"+this.options.color); + style.push("font-size:"+(this.options.size-8)+"px"); + style.push("border-radius:"+(this.options.borderRadius)+"px"); + style.push("text-align:center; transition-property:font-size||line-height||background||color;transition-duration: 0.2s;transition-timing-function: linear;"); + + if (this.options.background){ + if (this.options.boxShadow){ + style.push("box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, .8);"); + } + style.push("background-color:"+this.options.background); + } + + + + style.push(this.options.additionalCSS); + styleAttr.value = style.join(';'); + + iconEl.setAttributeNode(styleAttr); + iconEl.setAttributeNode(classAttr); + + + var mki = document.createElement("span"); + var classAttrSpan = document.createAttribute("class"); + classAttrSpan.value = "mki-intext mki-"+this.options.icon + mki.setAttributeNode(classAttrSpan); + + if (this.options.htmlCode){ + var html = document.createElement("span"); + html.innerHTML = this.options.htmlCode; + var classAttrSpan = document.createAttribute("class"); + classAttrSpan.value = "mki-intext"; + html.setAttributeNode(classAttrSpan); + iconEl.appendChild(html); + console.log(iconEl.outerHTML) + } else { + iconEl.appendChild(mki); + } + this.options.html = iconEl.outerHTML; + this.options.className = 'leaflet-mki-blank'; + this.options.popupAnchor = [0,-this.options.size/2]; + + + /** hover and focus effect **/ + if (this.options.hoverEffect){ + + var styleHover = []; + var hoverScale = this.options.hoverScale; + styleHover.push("height:"+this.options.size*hoverScale+"px!important"); + styleHover.push("width:"+this.options.size*hoverScale+"px!important"); + styleHover.push("margin-top:"+-1*(+this.options.size*hoverScale/2-this.options.size/2)+"px!important"); + styleHover.push("margin-left:"+-1*(+this.options.size*hoverScale/2-this.options.size/2)+"px!important"); + styleHover.push("line-height:"+(this.options.size*hoverScale)+"px!important"); + styleHover.push("font-size:"+(this.options.size*hoverScale-6*hoverScale)+"px!important"); + styleHover.push("border-radius:"+(this.options.borderRadius*hoverScale)+"px!important"); + styleHover.push(this.options.hoverCSS); + var css='.'+classAttr.value+':hover,.'+classAttr.value+':focus{'+styleHover.join(";")+'}'; + style=document.createElement('style'); + if (style.styleSheet) + style.styleSheet.cssText=css; + else + style.appendChild(document.createTextNode(css)); + document.getElementsByTagName('head')[0].appendChild(style); + } + L.DivIcon.prototype.initialize.call(this, options); + }, + onAdd : function (map) { + L.DivIcon.prototype.onAdd.call(this, map); + } +}); + +L.icon.mapkey = function (options) { + return new L.Icon.Mapkey(options); +}; \ No newline at end of file diff --git a/mapkeys/dist/MapkeyIcons.css b/mapkeys/dist/MapkeyIcons.css new file mode 100644 index 0000000..19a744e --- /dev/null +++ b/mapkeys/dist/MapkeyIcons.css @@ -0,0 +1,185 @@ +/********************************** +*********************************** + MapkeyIcons - css style + license: CC0 1.0 Universal + author: Filip Zavadil, www.mapshakers.com, 2015 + version: 1.0.0 +*********************************** +***********************************/ + +@font-face { + font-family: 'MapkeyIcons'; + src: url("MapkeyIcons.eot"); /* IE9 */ + src: url("MapkeyIcons.eot?#iefix") format('embedded-opentype'), /* IE6-8 */ + url('MapkeyIcons.woff') format('woff'), + url('MapkeyIcons.ttf') format('truetype'), + url('MapkeyIcons.svg#MapkeyIcons') format('svg'); + font-weight: normal; + font-style: normal; +} + +.mki,.mki-medium,.mki-intext,.mki-short,.mki-tall,.mki-grande,.mki-venti { + font-family: 'MapkeyIcons', sans-serif; + display: inline-block; + font-weight: normal; + text-decoration: none; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + +} +.mki-intext { font-size: 1.2em; } + +.mki-short { font-size: small; } +.mki-tall { font-size: large; } +.mki-grande { font-size: 32px; } +.mki-venti { font-size: 64px; } + + +.mki-mapshakers:before { content: '\e000';} +.mki-mapkey:before { content: '\e001';} +.mki-bar:before { content: '\e003';} +.mki-traffic_signal:before { content: '\e004';} +.mki-playground_alt:before { content: '\e005';} +.mki-dentist:before { content: '\e006';} +.mki-fishing:before { content: '\e007';} +.mki-wind_generator:before { content: '\e008';} +.mki-crucifix:before { content: '\e009';} +.mki-cave_entrance:before { content: '\e00a';} +.mki-castle_defensive:before { content: '\e00b';} +.mki-cinema:before { content: '\e00c';} +.mki-water_tower:before { content: '\e00d';} +.mki-boundary_stone:before { content: '\e00e';} +.mki-zoo:before { content: '\e00f';} +.mki-cinema_alt:before { content: '\e010';} +.mki-court_house:before { content: '\e011';} +.mki-fort:before { content: '\e012';} +.mki-fountain:before { content: '\e013';} +.mki-library:before { content: '\e014';} +.mki-rocks:before { content: '\e015';} +.mki-cemetery:before { content: '\e016';} +.mki-pub:before { content: '\e017';} +.mki-buddhism:before { content: '\e018';} +.mki-triangle:before { content: '\e019';} +.mki-police:before { content: '\e01a';} +.mki-ice_ring:before { content: '\e01b';} +.mki-marina:before { content: '\e01c';} +.mki-playground:before { content: '\e01d';} +.mki-ruins:before { content: '\e01e';} +.mki-internet:before { content: '\e01f';} +.mki-airport:before { content: '\e020';} +.mki-chapel:before { content: '\e021';} +.mki-museum:before { content: '\e022';} +.mki-monument:before { content: '\e023';} +.mki-sport_centre:before { content: '\e024';} +.mki-information:before { content: '\e025';} +.mki-hospital:before { content: '\e026';} +.mki-golf:before { content: '\e027';} +.mki-picnic_site:before { content: '\e028';} +.mki-drag_lift:before { content: '\e029';} +.mki-construction:before { content: '\e02a';} +.mki-islamism:before { content: '\e02b';} +.mki-vineyard:before { content: '\e02c';} +.mki-lighthouse:before { content: '\e02d';} +.mki-tower:before { content: '\e02e';} +.mki-wayside_cross:before { content: '\e02f';} +.mki-theatre:before { content: '\e030';} +.mki-train:before { content: '\e031';} +.mki-viewpoint:before { content: '\e032';} +.mki-tram:before { content: '\e033';} +.mki-tree_cinofer:before { content: '\e034';} +.mki-university:before { content: '\e035';} +.mki-tram_stop:before { content: '\e036';} +.mki-underground:before { content: '\e037';} +.mki-adit:before { content: '\e038';} +.mki-post_office:before { content: '\e039';} +.mki-spring:before { content: '\e03a';} +.mki-stadium:before { content: '\e03b';} +.mki-swimming_pool:before { content: '\e03c';} +.mki-cityhall:before { content: '\e03d';} +.mki-bus:before { content: '\e03e';} +.mki-volcano:before { content: '\e03f';} +.mki-architecture:before { content: '\e040';} +.mki-arrow_up:before { content: '\e041';} +.mki-archaeological:before { content: '\e042';} +.mki-arrow_up_double:before { content: '\e043';} +.mki-building:before { content: '\e044';} +.mki-toilet:before { content: '\e045';} +.mki-watermill:before { content: '\e046';} +.mki-pharmacy:before { content: '\e047';} +.mki-waterpark:before { content: '\e048';} +.mki-viewtower:before { content: '\e049';} +.mki-city:before { content: '\e04a';} +.mki-battlefield:before { content: '\e04b';} +.mki-clean:before { content: '\e04c';} +.mki-judaism:before { content: '\e04d';} +.mki-christianism:before { content: '\e04e';} +.mki-crown:before { content: '\e04f';} +.mki-restaurant:before { content: '\e050';} +.mki-windmill:before { content: '\e051';} +.mki-caravan_site:before { content: '\e052';} +.mki-castle:before { content: '\e053';} +.mki-camp_site:before { content: '\e054';} +.mki-cable_car:before { content: '\e055';} +.mki-bus_stop:before { content: '\e056';} +.mki-bicycle:before { content: '\e057';} +.mki-drop:before { content: '\e058';} +.mki-beach:before { content: '\e059';} +.mki-water_well:before { content: '\e05a';} +.mki-tree_leaf:before { content: '\e05b';} +.mki-bag:before { content: '\e05c';} +.mki-barracks:before { content: '\e05d';} +.mki-laptop:before { content: '\e05e';} +.mki-waterwork:before { content: '\e05f';} +.mki-mountain:before { content: '\e060';} +.mki-home:before { content: '\e061';} +.mki-hostel:before { content: '\e062';} +.mki-hotel:before { content: '\e063';} +.mki-hotel_alt:before { content: '\e064';} +.mki-mall:before { content: '\e065';} +.mki-market_place:before { content: '\e066';} +.mki-cartography:before { content: '\e067';} +.mki-pitch:before { content: '\e068';} +.mki-shelter:before { content: '\e069';} +.mki-saddle:before { content: '\e06a';} +.mki-sinkhole:before { content: '\e06b';} +.mki-supermarket:before { content: '\e06c';} +.mki-telephone:before { content: '\e06d';} +.mki-stupa:before { content: '\e06e';} +.mki-magnifier:before { content: '\e06f';} +.mki-flag:before { content: '\e070';} +.mki-eye:before { content: '\e071';} +.mki-gallery:before { content: '\e072';} +.mki-gear:before { content: '\e073';} +.mki-map:before { content: '\e074';} +.mki-island:before { content: '\e075';} +.mki-marker:before { content: '\e076';} +.mki-nature:before { content: '\e077';} +.mki-square:before { content: '\e078';} +.mki-ticket:before { content: '\e079';} +.mki-star:before { content: '\e07a';} +.mki-town:before { content: '\e07b';} +.mki-village:before { content: '\e07c';} +.mki-unesco:before { content: '\e07d';} +.mki-facebook:before { content: '\e07e';} +.mki-github:before { content: '\e07f';} +.mki-linkedin:before { content: '\e080';} +.mki-skype:before { content: '\e081';} +.mki-data:before { content: '\e082';} +.mki-database:before { content: '\e083';} +.mki-analyse:before { content: '\e084';} +.mki-atm:before { content: '\e085';} +.mki-avatar:before { content: '\e086';} +.mki-burger:before { content: '\e087';} +.mki-cash:before { content: '\e088';} +.mki-contour:before { content: '\e089';} +.mki-download:before { content: '\e08a';} +.mki-upload:before { content: '\e08b';} +.mki-heart:before { content: '\e08c';} +.mki-invisible:before { content: '\e08d';} +.mki-school:before { content: '\e08e';} +.mki-mine:before { content: '\e08f';} +.mki-smartphone:before { content: '\e090';} \ No newline at end of file diff --git a/mapkeys/dist/MapkeyIcons.eot b/mapkeys/dist/MapkeyIcons.eot new file mode 100644 index 0000000..c43bbbc --- /dev/null +++ b/mapkeys/dist/MapkeyIcons.eot Binary files differ diff --git a/mapkeys/dist/MapkeyIcons.svg b/mapkeys/dist/MapkeyIcons.svg new file mode 100644 index 0000000..3d87c27 --- /dev/null +++ b/mapkeys/dist/MapkeyIcons.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/mapkeys/dist/MapkeyIcons.ttf b/mapkeys/dist/MapkeyIcons.ttf new file mode 100644 index 0000000..b4a0519 --- /dev/null +++ b/mapkeys/dist/MapkeyIcons.ttf Binary files differ diff --git a/mapkeys/dist/MapkeyIcons.woff b/mapkeys/dist/MapkeyIcons.woff new file mode 100644 index 0000000..fb3db35 --- /dev/null +++ b/mapkeys/dist/MapkeyIcons.woff Binary files differ diff --git a/mapkeys/package.json b/mapkeys/package.json new file mode 100644 index 0000000..d5d1ff3 --- /dev/null +++ b/mapkeys/package.json @@ -0,0 +1,12 @@ +{ + "name": "leaflet-mapkey-icon", + "version": "0.0.1", + "description": "Extensible MapkeyIcons for leaflet marker.", + "main": "dist/L.Icon.Mapkey.js", + "author": "Filip Zavadil, mapshakers.com", + "license": "MIT", + "dependencies": { + "leaflet": ">=0.7.3" + }, + "keywords": ["marker", "icon","symbol","leaflet"] +} \ No newline at end of file