feat(examples): New examples of markers attribute.

tombatossals · Jan 10, 2014 · 753e509 · 753e509
1 parent d2320b5
commit 753e509
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 44 deletions.
diff --git a/examples/img/leaf-orange.png b/examples/img/leaf-orange.png
diff --git a/examples/markers-icon-example.html b/examples/markers-icon-example.html
@@ -3,79 +3,85 @@
   <head>
     <script src="../bower_components/angular/angular.min.js"></script>
     <script src="../bower_components/leaflet-dist/leaflet.js"></script>
-    <script src="../dist/angular-leaflet-directive.min.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/bootstrap/dist/css/bootstrap.min.css">
     <script>
         angular.module("demoapp", ["leaflet-directive"]);
         function DemoController($scope) {
             var local_icons = {
-                leaf_icon: L.icon({
+                defaultIcon: {},
+                leafIcon: {
                     iconUrl: 'img/leaf-green.png',
                     shadowUrl: 'img/leaf-shadow.png',
-
                     iconSize:     [38, 95], // size of the icon
                     shadowSize:   [50, 64], // size of the shadow
                     iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
                     shadowAnchor: [4, 62],  // the same for the shadow
                     popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
-                }),
-                default_icon: L.icon({
-                    iconUrl: 'http://cdn.leafletjs.com/leaflet-0.6.4/images/marker-icon.png',
-                    shadowUrl: 'http://cdn.leafletjs.com/leaflet-0.6.4/images/marker-shadow.png',
-
-                    iconSize: [25, 41],
-                    iconAnchor: [12, 40],
-                    popupAnchor: [0, -40],
-
-                    shadowSize: [41, 41],
-                    shadowAnchor: [12, 40]
-                }),
-                div_icon: L.divIcon({
-                	iconSize: [200, 0],
-                	html: 'Using <strong>Bold text as an icon</strong>:',
-                	popupAnchor:  [0, 0]
-                }),
-                object_icon: {
-                    iconUrl: 'http://leafletjs.com/docs/images/leaf-orange.png',
-                	shadowUrl: 'http://leafletjs.com/docs/images/leaf-shadow.png',
+                },
+                orangeLeafIcon: {
+                    iconUrl: 'img/leaf-orange.png',
+                	shadowUrl: 'img/leaf-shadow.png',
                 	iconSize:     [38, 95],
                     shadowSize:   [50, 64],
                     iconAnchor:   [22, 94],
-                    shadowAnchor: [4, 62]
+                    shadowAnchor: [4, 62],
+                    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
                 },
+                divIcon: {
+                    type: 'div',
+                	iconSize: [200, 0],
+                	popupAnchor:  [0, 0],
+                    html: 'Using <strong>Bold text as an icon</strong>:'
+                }
             }
 
             angular.extend($scope, {
-                icons: local_icons
-            });
-
-            angular.extend($scope, {
-                london: {
-                    lat: 51.505,
-                    lng: -0.09,
+                chicago: {
+                    lat: 41.85,
+                    lng: -87.65,
                     zoom: 8
                 },
                 markers: {
                     m1: {
-                        lat: 51.505,
-                        lng: -0.09,
-                        message: "I'm a static marker",
-                        focus:true,
-                        icon: local_icons.default_icon,
+                        lat: 41.85,
+                        lng: -87.65,
+                        message: "I'm a static marker with defaultIcon",
+                        focus: false,
+                        icon: local_icons.defaultIcon,
                     },
                 }
             });
 
+            $scope.changeIcon = function(iconType) {
+                $scope.markers.m1.icon = local_icons[iconType];
+                $scope.markers.m1.message = "I'm a static marker with " + iconType;
+            };
+
         };
     </script>
   </head>
-  <body ng-controller="DemoController">
-      <leaflet center="london" markers="markers" height="480px" width="640px">
-      </leaflet>
+  <body>
+    <div class="container">
+      <div ng-controller="DemoController">
 
-      <p>change your icon here:</p>
-      <select ng-model="markers.m1.icon" ng-options="key for (key, val) in icons">
-      </select>
+        <div class="row">
+          <h2>Changing the marker icons</h2>
+        </div>
 
+        <div class="row">
+          <div class="btn-group">
+            <button type="button" ng-click="changeIcon('defaultIcon')" class="btn btn-default">default</button>
+            <button type="button" ng-click="changeIcon('leafIcon')" class="btn btn-default">green leaf</button>
+            <button type="button" ng-click="changeIcon('orangeLeafIcon')" class="btn btn-default">orange leaf</button>
+            <button type="button" ng-click="changeIcon('divIcon')" class="btn btn-default">div</button>
+          </div>
+        </div>
+        <br />
+        <div class="row">
+          <leaflet center="chicago" markers="markers" height="480px" width="640px"></leaflet>
+        </div>
+    </div>
   </body>
 </html>
diff --git a/examples/markers-simple-example.html b/examples/markers-simple-example.html
@@ -29,7 +29,9 @@
     </script>
   </head>
   <body ng-controller="DemoController">
-      <leaflet center="london" markers="markers" height="480px" width="640px">
-      </leaflet>
+    <p>
+      Marker (lat/lng): <input type="number" ng-model="markers.mainMarker.lat" /> <input type="number" ng-model="markers.mainMarker.lng" />
+    </p>
+    <leaflet center="london" markers="markers" height="480px" width="640px"></leaflet>
   </body>
 </html>