feat(examples): Added a new example: layers-imageoverlay-example.html

tombatossals · Dec 29, 2013 · ebfd4b6 · ebfd4b6
1 parent 6134220
commit ebfd4b6
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 0 deletions.
diff --git a/examples/img/andes.jpg b/examples/img/andes.jpg
diff --git a/examples/layers-imageoverlay-example.html b/examples/layers-imageoverlay-example.html
@@ -0,0 +1,46 @@
+<!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.6/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", "$log", "leafletData", "leafletBoundsHelpers", function($scope, $log, leafletData, leafletBoundsHelpers) {
+            var maxBounds = leafletBoundsHelpers.createBoundsFromArray([[-540, -960], [540, 960]]);
+            angular.extend($scope, {
+                defaults: {
+                  scrollWheelZoom: false,
+                  crs: 'Simple',
+                  maxZoom: 2
+                },
+                center: {
+                    lat: 0,
+                    lng: 0,
+                    zoom: 0
+                },
+                maxBounds: maxBounds,
+                layers: {
+                    baselayers: {
+                        sanfrancisco: {
+                            name: 'Andes',
+                            type: 'imageOverlay',
+                            url: 'img/andes.jpg',
+                            bounds: [[-540, -960], [540, 960]],
+                            layerParams: {
+                              noWrap: true,
+                              attribution: 'Creative Commons image found <a href="http://www.flickr.com/photos/c32/8025422440/">here</a>'
+                            }
+                        }
+                    },
+                }
+            });
+       }]);
+    </script>
+  </head>
+  <body ng-controller="DemoController">
+    <h1>Layer with image overlay and maxBounds</h1>
+    <leaflet center="center" defaults="defaults" layers="layers" maxBounds="maxBounds" height="480px" width="854px"></leaflet>
+  </body>
+</html>