-
Notifications
You must be signed in to change notification settings - Fork 637
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(build): Dinamically add and remove the layers control.
- Loading branch information
1 parent
4398c10
commit ac0ce4b
Showing
6 changed files
with
260 additions
and
109 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| <!DOCTYPE html> | ||
| <html ng-app="demoapp"> | ||
| <head> | ||
| <script src="../bower_components/jquery/jquery.min.js"></script> | ||
| <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="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script> | ||
| <link rel="stylesheet" href="../bower_components/leaflet-dist/leaflet.css" /> | ||
| <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"> | ||
| <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css"> | ||
| <script> | ||
| var app = angular.module("demoapp", ["leaflet-directive"]); | ||
| app.controller("DemoController", [ "$scope", function($scope) { | ||
| $scope.definedLayers = { | ||
| cloudmade: { | ||
| name: 'Cloudmade Tourist', | ||
| type: 'xyz', | ||
| url: 'http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', | ||
| layerParams: { | ||
| key: '007b9471b4c74da4a6ec7ff43552b16f', | ||
| styleId: 7 | ||
| } | ||
| }, | ||
| osm: { | ||
| name: 'OpenStreetMap', | ||
| url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', | ||
| type: 'xyz' | ||
| } | ||
| }; | ||
| $scope.definedOverlays = { | ||
| hillshade: { | ||
| name: 'Hillshade Europa', | ||
| type: 'wms', | ||
| url: 'http://129.206.228.72/cached/hillshade', | ||
| visible: true, | ||
| layerOptions: { | ||
| layers: 'europe_wms:hs_srtm_europa', | ||
| format: 'image/png', | ||
| opacity: 0.25, | ||
| attribution: 'Hillshade layer by GIScience http://www.osm-wms.de', | ||
| crs: L.CRS.EPSG900913 | ||
| } | ||
| } | ||
| }; | ||
| angular.extend($scope, { | ||
| bern: { | ||
| lat: 46.916, | ||
| lng: 7.466, | ||
| zoom: 10 | ||
| }, | ||
| layers: { | ||
| baselayers: { | ||
| cloudmade: $scope.definedLayers.cloudmade, | ||
| osm: $scope.definedLayers.osm | ||
| }, | ||
| overlays: { | ||
| hillshade: $scope.definedOverlays.hillshade | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| $scope.toggleLayer = function(layerName) { | ||
| var baselayers = $scope.layers.baselayers; | ||
| if (baselayers.hasOwnProperty(layerName)) { | ||
| delete baselayers[layerName]; | ||
| } else { | ||
| baselayers[layerName] = $scope.definedLayers[layerName]; | ||
| } | ||
| }; | ||
|
|
||
| $scope.toggleOverlay = function(overlayName) { | ||
| var overlays = $scope.layers.overlays; | ||
| if (overlays.hasOwnProperty(overlayName)) { | ||
| delete overlays[overlayName]; | ||
| } else { | ||
| overlays[overlayName] = $scope.definedOverlays[overlayName]; | ||
| } | ||
| }; | ||
|
|
||
| }]); | ||
| </script> | ||
| <style> | ||
| html { | ||
| margin: 20px; | ||
| } | ||
| html,body, .container { | ||
| height: 90%; | ||
| } | ||
| .container { | ||
| display:table; | ||
| width: 100%; | ||
| margin-top: -50px; | ||
| padding: 50px 0 0 0; | ||
| -moz-box-sizing: border-box; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| .row { | ||
| height: 100%; | ||
| display: table-row; | ||
| } | ||
| .col-md-8, .col-md-4 { | ||
| display: table-cell; | ||
| height: 100%; | ||
| float: none; | ||
| } | ||
| .angular-leaflet-map { | ||
| height: 100%; | ||
| border: 1px solid #888; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body ng-controller="DemoController"> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-md-8"> | ||
| <h1>Dynamic addition/removal of layers</h1> | ||
| <div class="btn-group" data-toggle="buttons"> | ||
| <button type="button" class="btn btn-default active" ng-click="toggleLayer('cloudmade')">Cloudmade Tourist Layer</button> | ||
| <button type="button" class="btn btn-default active" ng-click="toggleLayer('osm')">OpenStreetMap Layer</button> | ||
| <button type="button" class="btn btn-default active" ng-click="toggleOverlay('hillshade')">Hillshade Europe Overlay</button> | ||
| </div> | ||
| <p>Layer definition:</p> | ||
| <pre ng-bind="layers.baselayers | json"></pre> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <leaflet center="bern" layers="layers"></leaflet> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
Oops, something went wrong.