feat(examples): Added new example of loading custom controls

tombatossals · Aug 26, 2015 · 979a733 · 979a733
1 parent a1843f2
commit 979a733
Showing 1 changed file with 42 additions and 0 deletions.
diff --git a/examples/0406-controls-custom-example.html b/examples/0406-controls-custom-example.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html ng-app="demoapp">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="../bower_components/angular/angular.min.js"></script>
+    <script src="../bower_components/leaflet/dist/leaflet.js"></script>
+    <script src="../bower_components/Leaflet.fullscreen/dist/Leaflet.fullscreen.min.js"></script>
+    <script src="../dist/angular-leaflet-directive.min.js"></script>
+    <link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
+    <link rel="stylesheet" href="../bower_components/Leaflet.fullscreen/dist/leaflet.fullscreen.css" />
+
+    <script>
+        var app = angular.module("demoapp", ["leaflet-directive"]);
+        app.controller("ControlsFullscreenController", [ "$scope", function($scope) {
+            angular.extend($scope, {
+                london: {
+                    lat: 37.8,
+                    lng: -96,
+                    zoom: 5
+                },
+                tiles: {
+                    name: 'Mapbox Comic',
+                    url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
+                    type: 'xyz',
+                    options: {
+                        apikey: 'pk.eyJ1IjoiYnVmYW51dm9scyIsImEiOiJLSURpX0pnIn0.2_9NrLz1U9bpwMQBhVk97Q',
+                        mapid: 'bufanuvols.lpa06kfg'
+                    }
+                },
+                controls: {
+                    custom: new L.Control.Fullscreen()
+                }
+           });
+       }]);
+    </script>
+  </head>
+  <body ng-controller="ControlsFullscreenController">
+    <leaflet center="london" controls="controls" tiles="tiles" width="100%" height="480px"></leaflet>
+    <h1>Fullscreen control example</h1>
+    <p>Fullscreen control with the <a href="https://github.com/Leaflet/Leaflet.fullscreen">Leaflet fullscreen</a> plugin.</p>
+  </body>
+</html>