feat(examples): new example of paths with ajax loading of data

tombatossals · tombatossals · commit 99ca74f31094 · 2014-09-02T17:39:19.000+02:00
diff --git a/examples/json/paths.json b/examples/json/paths.json
@@ -0,0 +1,21 @@
+{
+    "p1": {
+        "color": "red",
+        "weight": 8,
+        "latlngs": [
+            { "lat": 51.50, "lng": -0.082 },
+            { "lat": 48.83, "lng": 2.37 },
+            { "lat": 41.91, "lng": 12.48 }
+        ],
+        "message": "<h3>Route from London to Rome</h3><p>Distance: 1862km</p>"
+    },
+    "p2": {
+        "color": "green",
+        "weight": 8,
+        "latlngs": [
+            { "lat": 48.2083537, "lng": 16.3725042 },
+            { "lat": 48.8534, "lng": 2.3485 }
+        ],
+        "label": { "message": "<h3>Route from Vienna to Paris</h3><p>Distance: 1211km</p>"}
+    }
+}
diff --git a/examples/path-ajax-load-example.html b/examples/path-ajax-load-example.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html ng-app="demoapp">
+  <head>
+    <script src="../bower_components/angular/angular.min.js"></script>
+    <script src="../bower_components/leaflet/dist/leaflet.js"></script>
+    <script src="../bower_components/Leaflet.label/dist/leaflet.label.js"></script>
+    <script src="../dist/angular-leaflet-directive.js"></script>
+    <link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
+    <link rel="stylesheet" href="../bower_components/Leaflet.label/dist/leaflet.label.css" />
+    <script>
+        var app = angular.module("demoapp", ["leaflet-directive"]);
+        app.controller("DemoController", [ "$scope", "$http", function($scope, $http) {
+            angular.extend($scope, {
+                london: {
+                    lat: 51.505,
+                    lng: -0.09,
+                    zoom: 4
+                },
+                europeanPaths: {}
+            });
+
+            $scope.loadPaths = function loadPaths() {
+                $http.get('json/paths.json').success(function(data) {
+                    $scope.europeanPaths = data;
+                });
+            };
+
+        }]);
+    </script>
+    <style>
+        .angular-leaflet-map {
+            width: 640px;
+            height: 400px;
+        }
+    </style>
+  </head>
+  <body ng-controller="DemoController">
+    <leaflet center="london" paths="europeanPaths"></leaflet>
+    <p>Click on red route (Popup) or hover over green route (Label) to get more information</p>
+    <button ng-click="loadPaths()">Load Paths data!</button>
+  </body>
+</html>
