feat(layers): Add Esri basemap layer

Added support for esri basemap layer - add esri basemap layer type - add examples for esri basemaplayer
tombatossals · Jun 17, 2015 · 267f2a9 · 267f2a9
1 parent 833171d
commit 267f2a9
Show file tree

Hide file tree

Showing 15 changed files with 612 additions and 95 deletions.
diff --git a/dist/angular-leaflet-directive.js b/dist/angular-leaflet-directive.js
@@ -1,5 +1,5 @@
 /*!
-*  angular-leaflet-directive 0.8.4 2015-06-16
+*  angular-leaflet-directive 0.8.4 2015-06-17
 *  angular-leaflet-directive - An AngularJS directive to easily interact with Leaflet maps
 *  git: https://github.com/tombatossals/angular-leaflet-directive
 */
@@ -894,6 +894,18 @@ angular.module("leaflet-directive").factory('leafletHelpers', ["$q", "$log", fun
                 }
             }
         },
+        AGSBaseLayerPlugin: {
+            isLoaded: function() {
+                return L.esri !== undefined && L.esri.basemapLayer !== undefined;
+            },
+            is: function (layer) {
+                if (this.isLoaded()) {
+                    return layer instanceof L.esri.basemapLayer;
+                } else {
+                    return false;
+                }
+            }
+        },
         AGSLayerPlugin: {
             isLoaded: function() {
                 return lvector !== undefined && lvector.AGS !== undefined;
@@ -1340,6 +1352,15 @@ angular.module("leaflet-directive")
                 return L.tileLayer.chinaProvider(type, params.options);
             }
         },
+        agsBase: {
+            mustHaveLayer : true,
+            createLayer: function (params) {
+                if (!Helpers.AGSBaseLayerPlugin.isLoaded()) {
+                    return;
+                }
+                return L.esri.basemapLayer(params.layer, params.options);
+            }
+        },
         ags: {
             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/0000-viewer.html b/examples/0000-viewer.html
@@ -21,6 +21,7 @@
         <link rel="stylesheet" href="../bower_components/Leaflet.awesome-markers/dist/leaflet.awesome-markers.css">
         <link rel="stylesheet" href="../bower_components/Leaflet.ExtraMarkers/src/leaflet.extra-markers.css">
         <link rel="stylesheet" href="../bower_components/Leaflet.fullscreen/dist/leaflet.fullscreen.css" />
+        <link rel="stylesheet" href="../bower_components/leaflet-minimap/dist/Control.MiniMap.min.css" />
 
         <script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
         <script src="../bower_components/leaflet/dist/leaflet.js"></script>
@@ -42,6 +43,7 @@
         <script src="../bower_components/Leaflet.ExtraMarkers/src/leaflet.extra-markers.js"></script>
         <script src="../bower_components/Leaflet.heat/dist/leaflet-heat.js"></script>
         <script src="../bower_components/Leaflet.fullscreen/dist/Leaflet.fullscreen.min.js"></script>
+        <script src="../bower_components/leaflet-minimap/dist/Control.MiniMap.min.js"></script>
 
         <script src="../bower_components/jquery/dist/jquery.min.js"></script>
 

diff --git a/examples/0224-layers-esri-base-layer-example.html b/examples/0224-layers-esri-base-layer-example.html
@@ -0,0 +1,93 @@
+<!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("LayersEsriBaseMapLayerController", [ "$scope", function($scope) {
+            angular.extend($scope, {
+                bogota: {
+	            	lat: 4.649,
+	                lng: -74.086,
+	                zoom: 5
+	            },
+                markers: {
+                    m1: {
+                        lat: 4.649,
+	                	lng: -74.086,
+                    }
+                },
+                layers: {
+                    baselayers: {
+				    	streets: {
+					    	name: "Streets",
+					        type: "agsBase",
+					        layer: "Streets",
+					        visible: false
+				    	},
+				    	topo: {
+					    	name: "World Topographic",
+					        type: "agsBase",
+					        layer: "Topographic",
+					        visible: false
+				    	},
+                        national: {
+                            name: "National Geographic",
+					        type: "agsBase",
+					        layer: "NationalGeographic",
+					        visible: false
+                        },
+                        oceans: {
+                            name: "Oceans",
+					        type: "agsBase",
+					        layer: "Oceans",
+					        visible: false
+                        },
+                        gray: {
+                            name: "Gray",
+					        type: "agsBase",
+					        layer: "Gray",
+					        visible: false
+                        },
+                        darkgray: {
+                            name: "DarkGray",
+					        type: "agsBase",
+					        layer: "DarkGray",
+					        visible: false
+                        },
+                        imagery: {
+                            name: "Imagery",
+					        type: "agsBase",
+					        layer: "Imagery",
+					        visible: false
+                        },
+                        shadedrelief: {
+                            name: "ShadedRelief",
+					        type: "agsBase",
+					        layer: "ShadedRelief",
+					        visible: false
+                        },
+                        terrain: {
+                            name: "Terrain",
+					        type: "agsBase",
+					        layer: "Terrain",
+					        visible: false
+                        }
+                    },
+                },
+            });
+        }]);
+    </script>
+</head>
+<body ng-controller="LayersEsriBaseMapLayerController">
+    <leaflet center="bogota" layers="layers" markers="markers" width="100%" height="480px"></leaflet>
+    <h1>Esri ArcGIS Basemap Layer</h1>
+    <p>Use the Layer Switch Control on the top rigth of the map to select another Esri Basemap Layer.</p>
+</body>
+</html>