Add support for Leaflet plugin 'Leaflet.vector-markers'

- Leaflet.vector-markers is a fork of Leaflet.awesome-markers, but instead of PNGs it uses SVGs as markers. - Add additional example to the already existing marker examples.
tombatossals · Sep 28, 2015 · eb386a1 · eb386a1
1 parent 2ff48c3
commit eb386a1
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 1 deletion.
diff --git a/bower.json b/bower.json
@@ -14,6 +14,7 @@
     "dist/angular-leaflet-directive.js"
   ],
   "dependencies": {
+    "Leaflet.vector-markers": "https://github.com/hiasinho/Leaflet.vector-markers",
     "angular": "1.x",
     "angular-simple-logger": "~0.0.1",
     "leaflet": "0.7.x"
@@ -32,6 +33,7 @@
     "leaflet-tilelayer-geojson": "*",
     "Leaflet.utfgrid": "danzel/Leaflet.utfgrid",
     "Leaflet.awesome-markers": "*",
+    "Leaflet.vector-markers": "hiasinho/Leaflet.vector-markers",
     "webgl-heatmap-leaflet": "*",
     "leaflet-plugins": "*",
     "esri-leaflet": "*",

diff --git a/examples/0503-markers-icons-example.html b/examples/0503-markers-icons-example.html
@@ -6,6 +6,7 @@
     <script src="../bower_components/leaflet/dist/leaflet.js"></script>
     <script src="../bower_components/angular-simple-logger/dist/index.js"></script>
     <script src="../bower_components/Leaflet.awesome-markers/dist/leaflet.awesome-markers.js"></script>
+    <script src="../bower_components/Leaflet.vector-markers/dist/Leaflet.vector-markers.js"></script>
     <script src="../bower_components/Leaflet.MakiMarkers/Leaflet.MakiMarkers.js"></script>
     <script src="../bower_components/Leaflet.ExtraMarkers/src/leaflet.extra-markers.js"></script>
     <script src="../dist/angular-leaflet-directive.min.js"></script>
@@ -14,6 +15,7 @@
     <link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
     <link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css">
     <link rel="stylesheet" href="../bower_components/Leaflet.awesome-markers/dist/leaflet.awesome-markers.css">
+    <link rel="stylesheet" href="../bower_components/Leaflet.vector-markers/dist/Leaflet.vector-markers.css">
     <link rel="stylesheet" href="../bower_components/Leaflet.ExtraMarkers/src/leaflet.extra-markers.css">
 
     <script>
@@ -64,6 +66,11 @@
                     icon: 'tag',
                     markerColor: 'red'
                 },
+                vectorMarkerIcon: {
+                    type: 'vectorMarker',
+                    icon: 'tag',
+                    markerColor: 'red'
+                },
                 makiMarkerIcon: {
                     type: 'makiMarker',
                     icon: 'beer',
@@ -89,7 +96,7 @@
   <body ng-controller="MarkersIconsController">
       <leaflet lf-center="chicago" markers="markers" height="480px" width="100%"></leaflet>
       <h1>Changing the marker icons</h1>
-      <p>You can change the marker icons, using the default Leaflet marker icons functions, or using helper libraries like AwesomeMarkers, MakiMarkers or ExtraMarker.</p>
+      <p>You can change the marker icons, using the default Leaflet marker icons functions, or using helper libraries like AwesomeMarkers, VectorMarkers, MakiMarkers or ExtraMarker.</p>
 
       <h2>Default Icons</h2>
       <button ng-click="markers.m1.icon=defaultIcon">Default</button>
@@ -112,6 +119,22 @@ <h2>AwesomeMarker Icons</h2>
           <button ng-click="markers.m1.icon=awesomeMarkerIcon; markers.m1.icon.icon='certificate'">Certificate</button>
       </p>
 
+      <h2>VectorMarker Icons</h2>
+      <p>
+          <button ng-click="markers.m1.icon=vectorMarkerIcon; markers.m1.icon.markerColor='blue'">Blue</button>
+          <button ng-click="markers.m1.icon=vectorMarkerIcon; markers.m1.icon.markerColor='red'">Red</button>
+          <button ng-click="markers.m1.icon=vectorMarkerIcon; markers.m1.icon.markerColor='green'">Green</button>
+      </p>
+      <p>
+          <button ng-click="markers.m1.icon=vectorMarkerIcon; markers.m1.icon.icon='tag'">Tag</button>
+          <button ng-click="markers.m1.icon=vectorMarkerIcon; markers.m1.icon.icon='usd'">USD</button>
+          <button ng-click="markers.m1.icon=vectorMarkerIcon; markers.m1.icon.icon='heart'">Heart</button>
+          <button ng-click="markers.m1.icon=vectorMarkerIcon; markers.m1.icon.icon='home'">Home</button>
+          <button ng-click="markers.m1.icon=vectorMarkerIcon; markers.m1.icon.icon='cog'">Cog</button>
+          <button ng-click="markers.m1.icon=vectorMarkerIcon; markers.m1.icon.icon='star'">Star</button>
+          <button ng-click="markers.m1.icon=vectorMarkerIcon; markers.m1.icon.icon='certificate'">Certificate</button>
+      </p>
+
       <h2>MakiMarker Icons</h2>
       <p>
           <button ng-click="markers.m1.icon=makiMarkerIcon; markers.m1.icon.color='12a'">Blue</button>

diff --git a/src/services/leafletHelpers.js b/src/services/leafletHelpers.js
@@ -269,6 +269,29 @@ angular.module("leaflet-directive").service('leafletHelpers', function ($q, $log
             }
         },
 
+        VectorMarkersPlugin: {
+            isLoaded: function() {
+                return angular.isDefined(L.VectorMarkers) && angular.isDefined(L.VectorMarkers.Icon);
+            },
+            is: function(icon) {
+                if (this.isLoaded()) {
+                    return icon instanceof L.VectorMarkers.Icon;
+                } else {
+                    return false;
+                }
+            },
+            equal: function (iconA, iconB) {
+                if (!this.isLoaded()) {
+                    return false;
+                }
+                if (this.is(iconA)) {
+                    return angular.equals(iconA, iconB);
+                } else {
+                    return false;
+                }
+            }
+        },
+
         DomMarkersPlugin: {
             isLoaded: function () {
                 if (angular.isDefined(L.DomMarkers) && angular.isDefined(L.DomMarkers.Icon)) {

diff --git a/src/services/leafletLayerHelpers.js b/src/services/leafletLayerHelpers.js
@@ -81,6 +81,16 @@ angular.module("leaflet-directive")
                 });
             }
         },
+        geoJSONVectorMarker: {
+            mustHaveUrl: false,
+            createLayer: function(params) {
+                    return new L.geoJson(params.data, {
+                        pointToLayer: function (feature, latlng) {
+                            return L.marker(latlng, {icon: L.VectorMarkers.icon(params.icon)});
+                    }
+                });
+            }
+        },
         utfGrid: {
             mustHaveUrl: true,
             createLayer: utfGridCreateLayer

diff --git a/src/services/leafletMarkersHelpers.js b/src/services/leafletMarkersHelpers.js
@@ -3,6 +3,7 @@ angular.module("leaflet-directive").service('leafletMarkersHelpers', function ($
         defaultTo = leafletHelpers.defaultTo,
         MarkerClusterPlugin = leafletHelpers.MarkerClusterPlugin,
         AwesomeMarkersPlugin = leafletHelpers.AwesomeMarkersPlugin,
+        VectorMarkersPlugin = leafletHelpers.VectorMarkersPlugin,
         MakiMarkersPlugin = leafletHelpers.MakiMarkersPlugin,
         ExtraMarkersPlugin = leafletHelpers.ExtraMarkersPlugin,
         DomMarkersPlugin = leafletHelpers.DomMarkersPlugin,
@@ -39,6 +40,14 @@ angular.module("leaflet-directive").service('leafletMarkersHelpers', function ($
             return new L.AwesomeMarkers.icon(iconData);
         }
 
+        if (isDefined(iconData) && isDefined(iconData.type) && iconData.type === 'vectorMarker') {
+            if (!VectorMarkersPlugin.isLoaded()) {
+                $log.error(errorHeader + ' The VectorMarkers Plugin is not loaded.');
+            }
+
+            return new L.VectorMarkers.icon(iconData);
+        }
+
         if (isDefined(iconData) && isDefined(iconData.type) && iconData.type === 'makiMarker') {
             if (!MakiMarkersPlugin.isLoaded()) {
                 $log.error(errorHeader + 'The MakiMarkers Plugin is not loaded.');