feat(build): Added a new layers management example (layers-simple-exa…

…mple.html).
tombatossals · Dec 14, 2013 · 1be141c · 1be141c
1 parent f4f9488
commit 1be141c
Showing 1 changed file with 69 additions and 0 deletions.
diff --git a/examples/layers-simple-example.html b/examples/layers-simple-example.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html ng-app="demoapp">
+<head>
+    <script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
+    <script src="../dist/angular-leaflet-directive.js"></script>
+    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
+    <script>
+        var app = angular.module("demoapp", ["leaflet-directive"]);
+        app.controller("DemoController", [ "$scope", function($scope) {
+            angular.extend($scope, {
+                center: {
+                    lat: 25.0391667,
+                    lng: 121.525,
+                    zoom: 6
+                },
+                markers: {
+                    taipei: {
+                        lat: 25.0391667,
+                        lng: 121.525,
+                    }
+                },
+                layers: {
+                    baselayers: {
+                        osm: {
+                            name: 'OpenStreetMap',
+                            url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+                            type: 'xyz'
+                        },
+                        cloudmade2: {
+                            name: 'Cloudmade Tourist',
+                            type: 'xyz',
+                            url: 'http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png',
+                            layerParams: {
+                                key: '007b9471b4c74da4a6ec7ff43552b16f',
+                                styleId: 7
+                            }
+                        }
+                    }
+                }
+            });
+        }]);
+    </script>
+    <style>
+        html,body {
+            height: 98%;
+        }
+        .angular-leaflet-map {
+            height: 100%;
+        }
+        .left, .right {
+            float: left;
+            width: 48%;
+            height: 100%;
+            padding-right: 1em;
+        }
+    </style>
+</head>
+<body ng-controller="DemoController">
+    <div class="left">
+        <leaflet center="center" markers="markers" layers="layers"></leaflet>
+    </div>
+    <div class="right">
+        <h1>Layers definition</h1>
+        <p>You can easily define add various layers with a layer selector on the top right defining <strong>layers</strong> like this.</p>
+        <pre ng-bind="layers | json"></pre>
+    </div>
+</body>
+</html>