diff --git a/README.md b/README.md new file mode 100644 index 0000000..019578f --- /dev/null +++ b/README.md @@ -0,0 +1,12 @@ +leaflet-awesome-markers +======================= + +Shim repository for http://github.com/lvoogdt/Leaflet.awesome-markers + +Package Managers +---------------- + +* [npm](http://npmjs.org/package/drmonty-leaflet-awesome-markers): `drmonty-leaflet-awesome-markers` +* [Bower](http://twitter.github.com/bower/): `drmonty-leaflet-awesome-markers` +* [Composer](http://packagist.org/packages/drmonty/leaflet-awesome-markers): `drmonty/leaflet-awesome-markers` +* [Component](http://component.io): `drmonty/leaflet-awesome-markers` \ No newline at end of file diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..471eb38 --- /dev/null +++ b/bower.json @@ -0,0 +1,16 @@ +{ + "name": "drmonty-leaflet-awesome-markers", + "description": "Colorful, iconic & retina-proof markers for Leaflet, based on the Font Awesome/Twitter Bootstrap icons.", + "homepage": "http://github.com/lvoogdt/Leaflet.awesome-markers", + "version": "2.0.2", + "authors": [ + "Lennard Voogdt " + ], + "license": "MIT", + "main": "js/leaflet.awesome-markers.js", + "ignore": [ + "component.json", + "package.json", + "composer.json" + ] +} \ No newline at end of file diff --git a/component.json b/component.json new file mode 100644 index 0000000..60e56fe --- /dev/null +++ b/component.json @@ -0,0 +1,24 @@ +{ + "name": "drmonty-leaflet-awesome-markers", + "repo": "drmonty/leaflet-awesome-markers", + "description": "Colorful, iconic & retina-proof markers for Leaflet, based on the Font Awesome/Twitter Bootstrap icons.", + "version": "2.0.2", + "homepage": "http://github.com/lvoogdt/Leaflet.awesome-markers", + "license": "MIT", + "main": "js/leaflet.awesome-markers.js", + "scripts": [ + "js/leaflet.awesome-markers.js" + ], + "files": [ + "js/leaflet.awesome-markers.js", + "js/leaflet.awesome-markers.min.js", + "css/leaflet.awesome-markers.css", + "css/images/markers-matte.png", + "css/images/markers-matte@2x.png", + "css/images/markers-plain.png", + "css/images/markers-shadow.png", + "css/images/markers-shadow@2x.png", + "css/images/markers-soft.png", + "css/images/markers-soft@2x.png" + ] +} \ No newline at end of file diff --git a/composer.json b/composer.json new file mode 100644 index 0000000..558c2f6 --- /dev/null +++ b/composer.json @@ -0,0 +1,26 @@ +{ + "name": "drmonty/leaflet-awesome-markers", + "description": "Colorful, iconic & retina-proof markers for Leaflet, based on the Font Awesome/Twitter Bootstrap icons.", + "type": "component", + "homepage": "http://github.com/lvoogdt/Leaflet.awesome-markers", + "license": "MIT", + "author": { + "url": "http://github.com/lvoogdt/Leaflet.awesome-markers", + "name": "Lennard Voogdt " + }, + "require": { + "robloach/component-installer": "*" + }, + "extra": { + "component": { + "scripts": [ + "js/leaflet.awesome-markers.js" + ], + "files": [ + "js/leaflet.awesome-markers.min.js", + "css/leaflet.awesome-markers.css", + "css/images/*.png" + ] + } + } +} \ No newline at end of file diff --git a/css/images/markers-matte.png b/css/images/markers-matte.png new file mode 100644 index 0000000..1782586 Binary files /dev/null and b/css/images/markers-matte.png differ diff --git a/css/images/markers-matte@2x.png b/css/images/markers-matte@2x.png new file mode 100644 index 0000000..c981244 Binary files /dev/null and b/css/images/markers-matte@2x.png differ diff --git a/css/images/markers-plain.png b/css/images/markers-plain.png new file mode 100644 index 0000000..763f358 Binary files /dev/null and b/css/images/markers-plain.png differ diff --git a/css/images/markers-shadow.png b/css/images/markers-shadow.png new file mode 100644 index 0000000..33cf955 Binary files /dev/null and b/css/images/markers-shadow.png differ diff --git a/css/images/markers-shadow@2x.png b/css/images/markers-shadow@2x.png new file mode 100644 index 0000000..1116503 Binary files /dev/null and b/css/images/markers-shadow@2x.png differ diff --git a/css/images/markers-soft.png b/css/images/markers-soft.png new file mode 100644 index 0000000..9ee4c34 Binary files /dev/null and b/css/images/markers-soft.png differ diff --git a/css/images/markers-soft@2x.png b/css/images/markers-soft@2x.png new file mode 100644 index 0000000..540ce63 Binary files /dev/null and b/css/images/markers-soft@2x.png differ diff --git a/css/leaflet.awesome-markers.css b/css/leaflet.awesome-markers.css new file mode 100644 index 0000000..588a99c --- /dev/null +++ b/css/leaflet.awesome-markers.css @@ -0,0 +1,124 @@ +/* +Author: L. Voogdt +License: MIT +Version: 1.0 +*/ + +/* Marker setup */ +.awesome-marker { + background: url('images/markers-soft.png') no-repeat 0 0; + width: 35px; + height: 46px; + position:absolute; + left:0; + top:0; + display: block; + text-align: center; +} + +.awesome-marker-shadow { + background: url('images/markers-shadow.png') no-repeat 0 0; + width: 36px; + height: 16px; +} + +/* Retina displays */ +@media (min--moz-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2), +(-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx) { + .awesome-marker { + background-image: url('images/markers-soft@2x.png'); + background-size: 720px 46px; + } + .awesome-marker-shadow { + background-image: url('images/markers-shadow@2x.png'); + background-size: 35px 16px; + } +} + +.awesome-marker i { + color: #333; + margin-top: 10px; + display: inline-block; + font-size: 14px; +} + +.awesome-marker .icon-white { + color: #fff; +} + +/* Colors */ +.awesome-marker-icon-red { + background-position: 0 0; +} + +.awesome-marker-icon-darkred { + background-position: -180px 0; +} + +.awesome-marker-icon-lightred { + background-position: -360px 0; +} + +.awesome-marker-icon-orange { + background-position: -36px 0; +} + +.awesome-marker-icon-beige { + background-position: -396px 0; +} + +.awesome-marker-icon-green { + background-position: -72px 0; +} + +.awesome-marker-icon-darkgreen { + background-position: -252px 0; +} + +.awesome-marker-icon-lightgreen { + background-position: -432px 0; +} + +.awesome-marker-icon-blue { + background-position: -108px 0; +} + +.awesome-marker-icon-darkblue { + background-position: -216px 0; +} + +.awesome-marker-icon-lightblue { + background-position: -468px 0; +} + +.awesome-marker-icon-purple { + background-position: -144px 0; +} + +.awesome-marker-icon-darkpurple { + background-position: -288px 0; +} + +.awesome-marker-icon-pink { + background-position: -504px 0; +} + +.awesome-marker-icon-cadetblue { + background-position: -324px 0; +} + +.awesome-marker-icon-white { + background-position: -574px 0; +} + +.awesome-marker-icon-gray { + background-position: -648px 0; +} + +.awesome-marker-icon-lightgray { + background-position: -612px 0; +} + +.awesome-marker-icon-black { + background-position: -682px 0; +} diff --git a/js/leaflet.awesome-markers.js b/js/leaflet.awesome-markers.js new file mode 100644 index 0000000..7505b6f --- /dev/null +++ b/js/leaflet.awesome-markers.js @@ -0,0 +1,125 @@ +/* + Leaflet.AwesomeMarkers, a plugin that adds colorful iconic markers for Leaflet, based on the Font Awesome icons + (c) 2012-2013, Lennard Voogdt + + http://leafletjs.com + https://github.com/lvoogdt +*/ + +/*global L*/ + +(function (window, document, undefined) { + "use strict"; + /* + * Leaflet.AwesomeMarkers assumes that you have already included the Leaflet library. + */ + + L.AwesomeMarkers = {}; + + L.AwesomeMarkers.version = '2.0.1'; + + L.AwesomeMarkers.Icon = L.Icon.extend({ + options: { + iconSize: [35, 45], + iconAnchor: [17, 42], + popupAnchor: [1, -32], + shadowAnchor: [10, 12], + shadowSize: [36, 16], + className: 'awesome-marker', + prefix: 'glyphicon', + spinClass: 'fa-spin', + extraClasses: '', + icon: 'home', + markerColor: 'blue', + iconColor: 'white' + }, + + initialize: function (options) { + options = L.Util.setOptions(this, options); + }, + + createIcon: function () { + var div = document.createElement('div'), + options = this.options; + + if (options.icon) { + div.innerHTML = this._createInner(); + } + + if (options.bgPos) { + div.style.backgroundPosition = + (-options.bgPos.x) + 'px ' + (-options.bgPos.y) + 'px'; + } + + this._setIconStyles(div, 'icon-' + options.markerColor); + return div; + }, + + _createInner: function() { + var iconClass, iconSpinClass = "", iconColorClass = "", iconColorStyle = "", options = this.options; + + if(options.icon.slice(0,options.prefix.length+1) === options.prefix + "-") { + iconClass = options.icon; + } else { + iconClass = options.prefix + "-" + options.icon; + } + + if(options.spin && typeof options.spinClass === "string") { + iconSpinClass = options.spinClass; + } + + if(options.iconColor) { + if(options.iconColor === 'white' || options.iconColor === 'black') { + iconColorClass = "icon-" + options.iconColor; + } else { + iconColorStyle = "style='color: " + options.iconColor + "' "; + } + } + + return ""; + }, + + _setIconStyles: function (img, name) { + var options = this.options, + size = L.point(options[name === 'shadow' ? 'shadowSize' : 'iconSize']), + anchor; + + if (name === 'shadow') { + anchor = L.point(options.shadowAnchor || options.iconAnchor); + } else { + anchor = L.point(options.iconAnchor); + } + + if (!anchor && size) { + anchor = size.divideBy(2, true); + } + + img.className = 'awesome-marker-' + name + ' ' + options.className; + + if (anchor) { + img.style.marginLeft = (-anchor.x) + 'px'; + img.style.marginTop = (-anchor.y) + 'px'; + } + + if (size) { + img.style.width = size.x + 'px'; + img.style.height = size.y + 'px'; + } + }, + + createShadow: function () { + var div = document.createElement('div'); + + this._setIconStyles(div, 'shadow'); + return div; + } + }); + + L.AwesomeMarkers.icon = function (options) { + return new L.AwesomeMarkers.Icon(options); + }; + +}(this, document)); + + + diff --git a/js/leaflet.awesome-markers.min.js b/js/leaflet.awesome-markers.min.js new file mode 100644 index 0000000..376e57e --- /dev/null +++ b/js/leaflet.awesome-markers.min.js @@ -0,0 +1,7 @@ +/* + Leaflet.AwesomeMarkers, a plugin that adds colorful iconic markers for Leaflet, based on the Font Awesome icons + (c) 2012-2013, Lennard Voogdt + + http://leafletjs.com + https://github.com/lvoogdt +*//*global L*/(function(e,t,n){"use strict";L.AwesomeMarkers={};L.AwesomeMarkers.version="2.0.1";L.AwesomeMarkers.Icon=L.Icon.extend({options:{iconSize:[35,45],iconAnchor:[17,42],popupAnchor:[1,-32],shadowAnchor:[10,12],shadowSize:[36,16],className:"awesome-marker",prefix:"glyphicon",spinClass:"fa-spin",icon:"home",markerColor:"blue",iconColor:"white"},initialize:function(e){e=L.Util.setOptions(this,e)},createIcon:function(){var e=t.createElement("div"),n=this.options;n.icon&&(e.innerHTML=this._createInner());n.bgPos&&(e.style.backgroundPosition=-n.bgPos.x+"px "+ -n.bgPos.y+"px");this._setIconStyles(e,"icon-"+n.markerColor);return e},_createInner:function(){var e,t="",n="",r="",i=this.options;i.icon.slice(0,i.prefix.length+1)===i.prefix+"-"?e=i.icon:e=i.prefix+"-"+i.icon;i.spin&&typeof i.spinClass=="string"&&(t=i.spinClass);i.iconColor&&(i.iconColor==="white"||i.iconColor==="black"?n="icon-"+i.iconColor:r="style='color: "+i.iconColor+"' ");return""},_setIconStyles:function(e,t){var n=this.options,r=L.point(n[t==="shadow"?"shadowSize":"iconSize"]),i;t==="shadow"?i=L.point(n.shadowAnchor||n.iconAnchor):i=L.point(n.iconAnchor);!i&&r&&(i=r.divideBy(2,!0));e.className="awesome-marker-"+t+" "+n.className;if(i){e.style.marginLeft=-i.x+"px";e.style.marginTop=-i.y+"px"}if(r){e.style.width=r.x+"px";e.style.height=r.y+"px"}},createShadow:function(){var e=t.createElement("div");this._setIconStyles(e,"shadow");return e}});L.AwesomeMarkers.icon=function(e){return new L.AwesomeMarkers.Icon(e)}})(this,document); diff --git a/package.json b/package.json new file mode 100644 index 0000000..f720b87 --- /dev/null +++ b/package.json @@ -0,0 +1,18 @@ +{ + "name": "drmonty-leaflet-awesome-markers", + "description": "Colorful, iconic & retina-proof markers for Leaflet, based on the Font Awesome/Twitter Bootstrap icons.", + "homepage": "http://github.com/lvoogdt/Leaflet.awesome-markers", + "version": "2.0.2", + "author": "Lennard Voogdt ", + "main": "js/leaflet.awesome-markers.js", + "repository": { + "type": "git", + "url": "https://github.com/drmonty/leaflet-awesome-markers.git" + }, + "licenses": [ + { + "type": "MIT", + "url": "http://github.com/lvoogdt/Leaflet.awesome-markers/blob/2.0/develop/LICENSE" + } + ] +} \ No newline at end of file