feat(layers): Add Esri clustered layer

Added support for esri clustered layer - add esri clustered layer type - add examples for esri clustered layer
tombatossals · Jun 18, 2015 · 103af26 · 103af26
1 parent 6bad236
commit 103af26
Show file tree

Hide file tree

Showing 12 changed files with 214 additions and 8 deletions.
diff --git a/bower.json b/bower.json
@@ -43,7 +43,8 @@
     "Leaflet.fullscreen": "http://github.com/Leaflet/Leaflet.fullscreen/archive/v0.0.4.tar.gz",
     "Leaflet.PolylineDecorator": "bbecquet/Leaflet.PolylineDecorator",
     "ionrangeslider": "~1.9.3",
-    "leaflet-minimap": "~2.2.0"
+    "leaflet-minimap": "~2.2.0",
+    "esri-leaflet-clustered-feature-layer": "~1.0.0-rc.4"
   },
   "overrides": {
     "Leaflet.utfgrid": {

diff --git a/dist/angular-leaflet-directive.js b/dist/angular-leaflet-directive.js
@@ -966,6 +966,19 @@ angular.module("leaflet-directive").factory('leafletHelpers', ["$q", "$log", fun
                 }
             }
         },
+        AGSClusteredLayerPlugin: {
+            isLoaded: function () {
+                $log.debug('Esri', L.esri);
+                return L.esri !== undefined && L.esri.clusteredFeatureLayer !== undefined;
+            },
+            is: function (layer) {
+                if (this.isLoaded()) {
+                    return layer instanceof L.esri.clusteredFeatureLayer;
+                } else {
+                    return false;
+                }
+            }
+        },
         YandexLayerPlugin: {
             isLoaded: function() {
                 return angular.isDefined(L.Yandex);
@@ -1238,6 +1251,7 @@ angular.module("leaflet-directive")
     var isObject = leafletHelpers.isObject;
     var isArray = leafletHelpers.isArray;
     var isDefined = leafletHelpers.isDefined;
+    var errorHeader = leafletHelpers.errorHeader;
     var $it = leafletIterators;
 
     var utfGridCreateLayer = function(params) {
@@ -1454,11 +1468,26 @@ angular.module("leaflet-directive")
                 return L.esri.imageMapLayer(params.url, params.options);
             }
         },
+        agsClustered: {
+            mustHaveUrl: true,
+            createLayer: function(params) {
+                if (!Helpers.AGSClusteredLayerPlugin.isLoaded()) {
+                    $log.error(errorHeader + ' The esri plugins is not loaded.');
+                    return;
+                }
+
+                if(!Helpers.MarkerClusterPlugin.isLoaded()) {
+                    $log.error(errorHeader + ' The markercluster plugin is not loaded.');
+                    return;
+                }
+                return L.esri.clusteredFeatureLayer(params.url, params.options);
+            }
+        },
         markercluster: {
             mustHaveUrl: false,
             createLayer: function(params) {
                 if (!Helpers.MarkerClusterPlugin.isLoaded()) {
-                    $log.error('[AngularJS - Leaflet] The markercluster plugin is not loaded.');
+                    $log.error(errorHeader + ' The markercluster plugin is not loaded.');
                     return;
                 }
                 return new L.MarkerClusterGroup(params.options);

diff --git a/dist/angular-leaflet-directive.min.js b/dist/angular-leaflet-directive.min.js
diff --git a/dist/angular-leaflet-directive_dev_mapped.js b/dist/angular-leaflet-directive_dev_mapped.js
diff --git a/dist/angular-leaflet-directive_dev_mapped.js.map b/dist/angular-leaflet-directive_dev_mapped.js.map
diff --git a/examples/0000-viewer.html b/examples/0000-viewer.html
@@ -37,6 +37,7 @@
         <script src="../bower_components/leaflet.draw/dist/leaflet.draw.js"></script>
         <script src="../bower_components/leaflet-plugins/layer/Marker.Rotate.js"></script>
         <script src="../bower_components/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
+        <script src="../bower_components/esri-leaflet-clustered-feature-layer/dist/esri-leaflet-clustered-feature-layer.js"></script>
         <script src="../bower_components/Leaflet.PolylineDecorator/leaflet.polylineDecorator.min.js"></script>
         <script src="../bower_components/Leaflet.awesome-markers/dist/leaflet.awesome-markers.js"></script>
         <script src="../bower_components/Leaflet.MakiMarkers/Leaflet.MakiMarkers.js"></script>

diff --git a/examples/0228-layers-esri-clustered-layer-example.html b/examples/0228-layers-esri-clustered-layer-example.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html ng-app="demoapp">
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script src="../bower_components/angular/angular.min.js"></script>
+    <script src="../bower_components/leaflet/dist/leaflet.js"></script>
+    <script src="../bower_components/esri-leaflet/dist/esri-leaflet.js"></script>
+    <script src="../dist/angular-leaflet-directive.min.js"></script>
+    <link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
+    <script src="../bower_components/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
+    <link rel="stylesheet" href="../bower_components/leaflet.markercluster/dist/MarkerCluster.css" />
+    <link rel="stylesheet" href="../bower_components/leaflet.markercluster/dist/MarkerCluster.Default.css" />
+    <script src="../bower_components/esri-leaflet-clustered-feature-layer/dist/esri-leaflet-clustered-feature-layer.js"></script>
+    <script>
+        var app = angular.module("demoapp", ["leaflet-directive"]);
+        app.controller("LayersEsriClusteredLayerController", [ "$scope", function($scope) {
+            angular.extend($scope, {
+                porland: {
+	            	lat: 45.526,
+	                lng: -122.667,
+	                zoom: 15
+	            },
+                layers: {
+                    baselayers: {
+				    	streets: {
+					    	name: "Streets",
+					        type: "agsBase",
+					        layer: "Streets",
+					        visible: false
+				    	}
+                    },
+                    overlays: {
+                        simple: {
+                            name: "Simple",
+                            type: "agsClustered",
+                            url: "https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Trimet_Transit_Stops/FeatureServer/0",
+                            visible: true
+                        }
+                    }
+                }
+            });
+        }]);
+    </script>
+</head>
+<body ng-controller="LayersEsriClusteredLayerController">
+    <leaflet center="porland" layers="layers" width="100%" height="480px"></leaflet>
+    <h1>Esri ArcGIS Clustered Layer</h1>
+    <p>
+        Visualize dense services as clusters of points with the
+        <a href="https://github.com/Leaflet/Leaflet.markercluster" target="_blank">L.markercluster</a>
+        plugin.
+    </p>
+</body>
+</html>
diff --git a/examples/js/controllers.js b/examples/js/controllers.js
@@ -1306,6 +1306,33 @@ var app = angular.module('webapp');
                 },
             });
         }]);
+        app.controller("LayersEsriClusteredLayerController", [ "$scope", function($scope) {
+            angular.extend($scope, {
+                porland: {
+	            	lat: 45.526,
+	                lng: -122.667,
+	                zoom: 15
+	            },
+                layers: {
+                    baselayers: {
+				    	streets: {
+					    	name: "Streets",
+					        type: "agsBase",
+					        layer: "Streets",
+					        visible: false
+				    	}
+                    },
+                    overlays: {
+                        simple: {
+                            name: "Simple",
+                            type: "agsClustered",
+                            url: "https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Trimet_Transit_Stops/FeatureServer/0",
+                            visible: true
+                        }
+                    }
+                }
+            });
+        }]);
         app.controller("LayersEsriDynamicLayerController", [ "$scope", function($scope) {
             angular.extend($scope, {
                 bogota: {

diff --git a/examples/js/controllers/LayersEsriClusteredLayerController.js b/examples/js/controllers/LayersEsriClusteredLayerController.js
@@ -0,0 +1,27 @@
+        app.controller("LayersEsriClusteredLayerController", [ "$scope", function($scope) {
+            angular.extend($scope, {
+                porland: {
+	            	lat: 45.526,
+	                lng: -122.667,
+	                zoom: 15
+	            },
+                layers: {
+                    baselayers: {
+				    	streets: {
+					    	name: "Streets",
+					        type: "agsBase",
+					        layer: "Streets",
+					        visible: false
+				    	}
+                    },
+                    overlays: {
+                        simple: {
+                            name: "Simple",
+                            type: "agsClustered",
+                            url: "https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Trimet_Transit_Stops/FeatureServer/0",
+                            visible: true
+                        }
+                    }
+                }
+            });
+        }]);
diff --git a/examples/json/examples.json b/examples/json/examples.json
@@ -409,6 +409,14 @@
             "id": "/layers/esri-image-layer-example",
             "extUrl": "0227-layers-esri-image-layer-example.html",
             "title": "Esri ArcGIS Image Layer"
+        },
+        {
+            "date": "2015-06-18T20:41:21.801Z",
+            "section": "layers",
+            "onlyStandAlone": false,
+            "id": "/layers/esri-clustered-layer-example",
+            "extUrl": "0228-layers-esri-clustered-layer-example.html",
+            "title": "Esri ArcGIS Clustered Layer"
         }
     ],
     "paths": [

diff --git a/src/services/leafletHelpers.js b/src/services/leafletHelpers.js
@@ -453,6 +453,19 @@ angular.module("leaflet-directive").factory('leafletHelpers', function ($q, $log
                 }
             }
         },
+        AGSClusteredLayerPlugin: {
+            isLoaded: function () {
+                $log.debug('Esri', L.esri);
+                return L.esri !== undefined && L.esri.clusteredFeatureLayer !== undefined;
+            },
+            is: function (layer) {
+                if (this.isLoaded()) {
+                    return layer instanceof L.esri.clusteredFeatureLayer;
+                } else {
+                    return false;
+                }
+            }
+        },
         YandexLayerPlugin: {
             isLoaded: function() {
                 return angular.isDefined(L.Yandex);

diff --git a/src/services/leafletLayerHelpers.js b/src/services/leafletLayerHelpers.js
@@ -5,6 +5,7 @@ angular.module("leaflet-directive")
     var isObject = leafletHelpers.isObject;
     var isArray = leafletHelpers.isArray;
     var isDefined = leafletHelpers.isDefined;
+    var errorHeader = leafletHelpers.errorHeader;
     var $it = leafletIterators;
 
     var utfGridCreateLayer = function(params) {
@@ -221,11 +222,26 @@ angular.module("leaflet-directive")
                 return L.esri.imageMapLayer(params.url, params.options);
             }
         },
+        agsClustered: {
+            mustHaveUrl: true,
+            createLayer: function(params) {
+                if (!Helpers.AGSClusteredLayerPlugin.isLoaded()) {
+                    $log.error(errorHeader + ' The esri plugins is not loaded.');
+                    return;
+                }
+
+                if(!Helpers.MarkerClusterPlugin.isLoaded()) {
+                    $log.error(errorHeader + ' The markercluster plugin is not loaded.');
+                    return;
+                }
+                return L.esri.clusteredFeatureLayer(params.url, params.options);
+            }
+        },
         markercluster: {
             mustHaveUrl: false,
             createLayer: function(params) {
                 if (!Helpers.MarkerClusterPlugin.isLoaded()) {
-                    $log.error('[AngularJS - Leaflet] The markercluster plugin is not loaded.');
+                    $log.error(errorHeader + ' The markercluster plugin is not loaded.');
                     return;
                 }
                 return new L.MarkerClusterGroup(params.options);