Merge a lot of PRs from the old repository

README.md

@@ -1,18 +1,27 @@
 # Leaflet.awesome-markers plugin v2.0
 Colorful iconic & retina-proof markers for Leaflet, based on the Glyphicons / Font-Awesome icons
 
-Version 2.0 of Leaflet.awesome-markers is tested with:
-- Bootstrap 3
-- Font Awesome 4.0
-- Ionicons 1.5.2
-- Leaflet 0.5-Latest
+Version 2.0 of Leaflet.awesome-markers is tested and works with the latest available versions:
 
-For bootstrap 2.x & Fontawesome 3.x use Leaflet.awesome-markers v1.0
+* Bootstrap 3 (up to 3.3.7)
+* Font Awesome 4.0 (up to 4.7.0)
+* Ionicons 1.5.2
+* Leaflet 0.5 (up to 1.0.3)
+
+Use version 2.0.x for compatibility with the newer versions of bootstrap, font-awesome and leaflet.
+
+Version 1.0 of Leaflet.awesome-markers is tested and works with:
+
+* Bootstrap 2
+* Font Awesome 3.0
+* Leaflet 0.5
+
+Use version 1.0.x for compatibility with the older versions of bootstrap, font-awesome and leaflet.
 
 ## Screenshots
 ![AwesomeMarkers screenshot](https://raw.github.com/lvoogdt/Leaflet.awesome-markers/master/screenshots/screenshot-soft.png "Screenshot of AwesomeMarkers")
-	
-<a href="http://jsfiddle.net/VPzu4/92/" target="_blank">JSfiddle demo</a> 
+
+<a href="http://jsfiddle.net/VPzu4/975/" target="_blank">JSfiddle demo</a> 
 
 ### Twitter Bootstrap/Font-Awesome icons
 This plugin depends on either Bootstrap or Font-Awesome for the rendering of the icons. See these urls for more information:
@@ -121,6 +130,8 @@ See [JSFIddle](http://jsfiddle.net/markmarijnissen/VPzu4/286/)
   });
 ````
 
+**note: square markers are only available on the latest versions of Leaflet.Awesome-Markers**
+
 ## License
 - Leaflet.AwesomeMarkers and colored markers are licensed under the MIT License - http://opensource.org/licenses/mit-license.html.
 - Font Awesome: http://fortawesome.github.io/Font-Awesome/license/

bower.json

@@ -1,9 +1,12 @@
 {
   "name": "Leaflet.awesome-markers",
   "version": "2.0.4",
-  "homepage": "https://github.com/lvoogdt/Leaflet.awesome-markers",
+  "homepage": "https://github.com/sigma-geosistemas/Leaflet.awesome-markers",
   "authors": [
-    "Lennard Voogdt <[email protected]>"
+    "Lennard Voogdt <[email protected]>",
+    "George Silva <[email protected]>",
+    "Bhaskar V. Karambelkar <[email protected]>",
+    "Andris Nolendorfs (https://github.com/theashyster)"
   ],
   "description": "Colorful iconic & retina-proof markers for Leaflet, based on the Glyphicons / Font-Awesome icons",
   "main": [

dist/leaflet.awesome-markers.css

@@ -108,7 +108,7 @@ Version: 1.0
 }
 
 .awesome-marker-icon-white {
-  background-position: -574px 0;
+  background-position: -576px 0;
 }
 
 .awesome-marker-icon-gray {

dist/leaflet.awesome-markers.js

@@ -1,10 +1,10 @@
 /*
-  Leaflet.AwesomeMarkers, a plugin that adds colorful iconic markers for Leaflet, based on the Font Awesome icons
-  (c) 2012-2013, Lennard Voogdt
+ 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
-*/
+ http://leafletjs.com
+ https://github.com/lvoogdt
+ */
 
 /*global L*/
 
@@ -31,7 +31,9 @@
             extraClasses: '',
             icon: 'home',
             markerColor: 'blue',
-            iconColor: 'white'
+            iconColor: 'white',
+            iconRotate: 0,
+            font: 'monospace'
         },
 
         initialize: function (options) {
@@ -56,9 +58,13 @@
         },
 
         _createInner: function() {
-            var iconClass, iconSpinClass = "", iconColorClass = "", iconColorStyle = "", options = this.options;
+            var iconClass,
+                iconSpinClass = "",
+                iconColorClass = "",
+                iconColorStyle = "",
+                options = this.options;
 
-            if(options.icon.slice(0,options.prefix.length+1) === options.prefix + "-") {
+            if(!options.prefix || (options.icon.slice(0,options.prefix.length+1) === options.prefix + "-")) {
                 iconClass = options.icon;
             } else {
                 iconClass = options.prefix + "-" + options.icon;
@@ -69,14 +75,32 @@
             }
 
             if(options.iconColor) {
-                if(options.iconColor === 'white' || options.iconColor === 'black') {
+                if ((options.iconColor === 'white' || options.iconColor === 'black') &&
+                    options.prefix !== 'fa') {
                     iconColorClass = "icon-" + options.iconColor;
+                } else if (options.prefix === 'fa' && options.iconColor === 'white') {
+                  iconColorClass = "fa-inverse";
                 } else {
-                    iconColorStyle = "style='color: " + options.iconColor + "' ";
+                    iconColorStyle = "color: " + options.iconColor + ";";
                 }
             }
+            if(options.font && options.text) {
+                iconColorStyle += "font-family: " + options.font + ";";
+            }
+
+            if(options.iconRotate && options.iconRotate !== 0) {
+                iconColorStyle += "-webkit-transform: rotate(" + options.iconRotate + "deg);";
+                iconColorStyle += "-moz-transform: rotate(" + options.iconRotate + "deg);";
+                iconColorStyle += "-o-transform: rotate(" + options.iconRotate + "deg);";
+                iconColorStyle += "-ms-transform: rotate(" + options.iconRotate + "deg);";
+                iconColorStyle += "transform: rotate(" + options.iconRotate + "deg);";
+            }
+
+            if (options.text) {
+                return "<i style='" + iconColorStyle + "' class='" + options.extraClasses + " " + (options.prefix || "") + " " + iconSpinClass + " " + iconColorClass + "'>" + options.text + "</i>";
+            }
 
-            return "<i " + iconColorStyle + "class='" + options.extraClasses + " " + options.prefix + " " + iconClass + " " + iconSpinClass + " " + iconColorClass + "'></i>";
+            return "<i style='" + iconColorStyle + "' class='" + options.extraClasses + " " + (options.prefix || "") + " " + iconClass + " " + iconSpinClass + " " + iconColorClass + "'></i>";
         },
 
         _setIconStyles: function (img, name) {
@@ -112,14 +136,11 @@
 
             this._setIconStyles(div, 'shadow');
             return div;
-      }
+        }
     });
-        
+
     L.AwesomeMarkers.icon = function (options) {
         return new L.AwesomeMarkers.Icon(options);
     };
 
 }(this, document));
-
-
-

examples/basic-example.html

@@ -6,26 +6,25 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
-  <link rel="stylesheet" href="../dist/leaflet.awesome-markers.css">
-  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
-  <!--[if lte IE 8]>
-      <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
-  <![endif]-->
+  <link href="https://unpkg.com/[email protected]/css/font-awesome.css" rel="stylesheet"/>
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+  <link rel="stylesheet" href="../dist/leaflet.awesome-markers.css"/>
 </head>
 <body>
   <div id="map" style="width: 800px; height: 600px"></div>
 
-  <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
+  <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
   <script src="../dist/leaflet.awesome-markers.js"></script>
   <script>
     var map = L.map('map').setView([51.932994,4.509373], 14);
 
-    L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', {
-      attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade. Font Awesome by Dave Gandy',
-      key: 'BC9A493B41014CAABB98F0471D759707',
-      detectRetina: true
-    }).addTo(map);
+    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
+    maxZoom: 18,
+    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
+      '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
+      'Imagery © <a href="http://mapbox.com">Mapbox</a>',
+    id: 'mapbox.streets'
+  }).addTo(map);
 
     L.marker([51.941196,4.512291], {icon: L.AwesomeMarkers.icon({icon: 'spinner', prefix: 'fa', markerColor: 'red', spin:true}) }).addTo(map);
     L.marker([51.927913,4.521303], {icon: L.AwesomeMarkers.icon({icon: 'coffee', prefix: 'fa', markerColor: 'red', iconColor: '#f28f82'}) }).addTo(map);
@@ -40,6 +39,9 @@
     L.marker([51.930295,4.530745], {icon: L.AwesomeMarkers.icon({icon: 'phone', prefix: 'fa', markerColor: 'darkpurple'}) }).addTo(map);
     L.marker([51.925055,4.512806], {icon: L.AwesomeMarkers.icon({icon: 'ambulance', prefix: 'fa', markerColor: 'darkgreen'}) }).addTo(map);
     L.marker([51.925902,4.505768], {icon: L.AwesomeMarkers.icon({icon: 'medkit', prefix: 'fa', markerColor: 'darkblue'}) }).addTo(map);
+    L.marker([51.926902,4.502768], {icon: L.AwesomeMarkers.icon({icon: 'home', prefix: 'fa', markerColor: 'white'}) }).addTo(map);
+    L.marker([51.936902,4.512768], {icon: L.AwesomeMarkers.icon({icon: 'home', prefix: 'fa', markerColor: 'white', text: 'LK' }) }).addTo(map);
+    L.marker([51.936902,4.516768], {icon: L.AwesomeMarkers.icon({icon: 'shopping-cart', prefix: 'fa', markerColor: 'white', iconRotate: 45 }) }).addTo(map);
   </script>
 </body>
 </html>

examples/random-markers.html

@@ -6,29 +6,25 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
-  <link rel="stylesheet" href="../dist/leaflet.awesome-markers.css">
-  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
-  <!--[if lte IE 8]>
-      <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
-  <![endif]-->
-
-  <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
-
+  <link href="https://unpkg.com/[email protected]/css/font-awesome.css" rel="stylesheet"/>
+  <link rel="stylesheet" href="../dist/leaflet.awesome-markers.css"/>
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
 </head>
 <body>
   <div id="map" style="width: 800px; height: 600px"></div>
 
-  <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
+  <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
   <script src="../dist/leaflet.awesome-markers.js"></script>
   <script>
     var map = L.map('map').setView([51.5, -0.09], 9);
 
-    L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', {
-      attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade. Font Awesome by Dave Gandy',
-      key: 'BC9A493B41014CAABB98F0471D759707',
-      detectRetina: true
-    }).addTo(map);
+    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
+    maxZoom: 18,
+    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
+      '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
+      'Imagery © <a href="http://mapbox.com">Mapbox</a>',
+    id: 'mapbox.streets'
+  }).addTo(map);
 
     var colors = ['red', 'blue', 'green', 'purple', 'orange', 'darkred', 'lightred', 'beige', 'darkblue', 'darkgreen', 'cadetblue', 'darkpurple', 'white', 'pink', 'lightblue', 'lightgreen', 'gray', 'black', 'lightgray'];
 

examples/with-bootstrap.html

@@ -6,31 +6,27 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
-  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
-  <link rel="stylesheet" href="../dist/leaflet.awesome-markers.css">
-
-  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
-  <!--[if lte IE 8]>
-      <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
-  <![endif]-->
-
-  <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
+  <link href="https://unpkg.com/[email protected]/css/font-awesome.css" rel="stylesheet"/>
+  <link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+  <link rel="stylesheet" href="../dist/leaflet.awesome-markers.css"/>
 
 </head>
 <body>
   <div id="map" style="width: 800px; height: 600px"></div>
 
-  <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
+  <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
   <script src="../dist/leaflet.awesome-markers.js"></script>
 
   <script>
     var map = L.map('map').setView([51.932994,4.509373], 14);
-
-    L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', {
-      attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade. Font Awesome by Dave Gandy',
-      key: 'BC9A493B41014CAABB98F0471D759707'
-    }).addTo(map);
+    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
+    maxZoom: 18,
+    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
+      '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
+      'Imagery © <a href="http://mapbox.com">Mapbox</a>',
+    id: 'mapbox.streets'
+  }).addTo(map);
 
     L.marker([51.941196,4.512291], {icon: L.AwesomeMarkers.icon({icon: 'link', prefix: 'glyphicon', markerColor: 'red', spin:true}) }).addTo(map);
     L.marker([51.927913,4.521303], {icon: L.AwesomeMarkers.icon({icon: 'certificate', prefix: 'glyphicon', markerColor: 'red'}) }).addTo(map);
@@ -41,7 +37,7 @@
 
     L.marker([51.930454,4.527054], {icon: L.AwesomeMarkers.icon({icon: 'bookmark', prefix: 'fa', markerColor: 'darkred'}) }).addTo(map);
     L.marker([51.929607,4.527054], {icon: L.AwesomeMarkers.icon({icon: 'picture-o', prefix: 'fa', markerColor: 'darkblue'}) }).addTo(map);
-    L.marker([51.928919,4.528856], {icon: L.AwesomeMarkers.icon({icon: 'move', prefix: 'fa', markerColor: 'cadetblue'}) }).addTo(map);
+    L.marker([51.928919,4.528856], {icon: L.AwesomeMarkers.icon({icon: 'suitcase', prefix: 'fa', markerColor: 'cadetblue'}) }).addTo(map);
     L.marker([51.930295,4.530745], {icon: L.AwesomeMarkers.icon({icon: 'play', prefix: 'fa', markerColor: 'darkpurple'}) }).addTo(map);
     L.marker([51.925055,4.512806], {icon: L.AwesomeMarkers.icon({icon: 'barcode', prefix: 'fa', markerColor: 'darkgreen'}) }).addTo(map);
     L.marker([51.925902,4.505768], {icon: L.AwesomeMarkers.icon({icon: 'inbox', prefix: 'fa', markerColor: 'darkblue'}) }).addTo(map);

package.json

@@ -19,6 +19,11 @@
     "icons"
   ],
   "author": "Lennard Voogdt and Sigma Geosistemas",
+  "contributors": [
+    "George Silva <[email protected]>",
+    "Bhaskar V. Karambelkar <[email protected]>",
+    "Andris Nolendorfs (https://github.com/theashyster)"
+  ],
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/sigma-geosistemas/Leaflet.awesome-markers/issues"