feat(layers): Add Esri tile map layer

Added support for esri tile map layer - add esri tile map layer type - add examples for esri tile map layer
tombatossals · Jun 18, 2015 · 831d2ae · 831d2ae
1 parent 8e2c2c9
commit 831d2ae
Show file tree

Hide file tree

Showing 10 changed files with 171 additions and 4 deletions.
diff --git a/dist/angular-leaflet-directive.js b/dist/angular-leaflet-directive.js
@@ -930,6 +930,18 @@ angular.module("leaflet-directive").factory('leafletHelpers', ["$q", "$log", fun
                 }
             }
         },
+        AGSTileMapLayerPlugin: {
+            isLoaded: function() {
+                return L.esri !== undefined && L.esri.tiledMapLayer !== undefined;
+            },
+            is: function (layer) {
+                if (this.isLoaded()) {
+                    return layer instanceof L.esri.tiledMapLayer;
+                } else {
+                    return false;
+                }
+            }
+        },
         YandexLayerPlugin: {
             isLoaded: function() {
                 return angular.isDefined(L.Yandex);
@@ -1403,6 +1415,15 @@ angular.module("leaflet-directive")
                 return L.esri.featureLayer(params.url, params.options);
             }
         },
+        agsTile: {
+            mustHaveUrl: true,
+            createLayer: function(params) {
+                if (!Helpers.AGSTileMapLayerPlugin.isLoaded()) {
+                    return;
+                }
+                return L.esri.tiledMapLayer(params.url, params.options);
+            }
+        },
         dynamic: {
             mustHaveUrl: true,
             createLayer: function(params) {

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/0226-layers-esri-tile-map-layer-example.html b/examples/0226-layers-esri-tile-map-layer-example.html
@@ -0,0 +1,46 @@
+<!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>
+        var app = angular.module("demoapp", ["leaflet-directive"]);
+        app.controller("LayersEsriTileMapLayerController", [ "$scope", function($scope) {
+            angular.extend($scope, {
+                center: {
+	            	lat: 30.70,
+	                lng: -81.47,
+	                zoom: 9
+	            },
+                layers: {
+                    baselayers: {
+				    	historic: {
+					    	name: "Historic Topographic Maps",
+					        type: "agsTile",
+					        url: "http://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer",
+					        visible: false
+				    	},
+                        navigation: {
+					    	name: "World Navigation Charts",
+					        type: "agsTile",
+					        url: "http://services.arcgisonline.com/ArcGIS/rest/services/Specialty/World_Navigation_Charts/MapServer",
+					        visible: false
+				    	}
+                    }
+                },
+
+            });
+        }]);
+    </script>
+</head>
+<body ng-controller="LayersEsriTileMapLayerController">
+    <leaflet center="center" layers="layers" width="100%" height="480px"></leaflet>
+    <h1>Esri ArcGIS Tile Map Layer</h1>
+    <p>Use the Layer Switch Control on the top rigth of the map to show another Esri Tile Map Layers.</p>
+</body>
+</html>
diff --git a/examples/js/controllers.js b/examples/js/controllers.js
@@ -1557,6 +1557,31 @@ var app = angular.module('webapp');
                 }
             });
         }]);
+        app.controller("LayersEsriTileMapLayerController", [ "$scope", function($scope) {
+            angular.extend($scope, {
+                center: {
+	            	lat: 30.70,
+	                lng: -81.47,
+	                zoom: 9
+	            },
+                layers: {
+                    baselayers: {
+				    	historic: {
+					    	name: "Historic Topographic Maps",
+					        type: "agsTile",
+					        url: "http://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer",
+					        visible: false
+				    	},
+                        navigation: {
+					    	name: "World Navigation Charts",
+					        type: "agsTile",
+					        url: "http://services.arcgisonline.com/ArcGIS/rest/services/Specialty/World_Navigation_Charts/MapServer",
+					        visible: false
+				    	}
+                    }
+                },
+            });
+        }]);
         app.controller("LayersHeatmapController", ["$scope", "$http", function($scope, $http) {
             var points = [];
             var heatmap = {

diff --git a/examples/js/controllers/LayersEsriTileMapLayerController.js b/examples/js/controllers/LayersEsriTileMapLayerController.js
@@ -0,0 +1,25 @@
+        app.controller("LayersEsriTileMapLayerController", [ "$scope", function($scope) {
+            angular.extend($scope, {
+                center: {
+	            	lat: 30.70,
+	                lng: -81.47,
+	                zoom: 9
+	            },
+                layers: {
+                    baselayers: {
+				    	historic: {
+					    	name: "Historic Topographic Maps",
+					        type: "agsTile",
+					        url: "http://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer",
+					        visible: false
+				    	},
+                        navigation: {
+					    	name: "World Navigation Charts",
+					        type: "agsTile",
+					        url: "http://services.arcgisonline.com/ArcGIS/rest/services/Specialty/World_Navigation_Charts/MapServer",
+					        visible: false
+				    	}
+                    }
+                },
+            });
+        }]);
diff --git a/examples/json/examples.json b/examples/json/examples.json
@@ -393,6 +393,14 @@
             "id": "/layers/esri-feature-layer-example",
             "extUrl": "0225-layers-esri-feature-layer-example.html",
             "title": "Esri ArcGIS Feature Layer"
+        },
+        {
+            "date": "2015-06-18T16:56:48.557Z",
+            "section": "layers",
+            "onlyStandAlone": false,
+            "id": "/layers/esri-tile-map-layer-example",
+            "extUrl": "0226-layers-esri-tile-map-layer-example.html",
+            "title": "Esri ArcGIS Tile Map Layer"
         }
     ],
     "paths": [

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

diff --git a/src/services/leafletLayerHelpers.js b/src/services/leafletLayerHelpers.js
@@ -194,6 +194,15 @@ angular.module("leaflet-directive")
                 return L.esri.featureLayer(params.url, params.options);
             }
         },
+        agsTile: {
+            mustHaveUrl: true,
+            createLayer: function(params) {
+                if (!Helpers.AGSTileMapLayerPlugin.isLoaded()) {
+                    return;
+                }
+                return L.esri.tiledMapLayer(params.url, params.options);
+            }
+        },
         dynamic: {
             mustHaveUrl: true,
             createLayer: function(params) {