-
Notifications
You must be signed in to change notification settings - Fork 640
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(build): Added a new layers management example (layers-simple-exa…
…mple.html).
- Loading branch information
1 parent
f4f9488
commit 1be141c
Showing
1 changed file
with
69 additions
and
0 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
<!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.4/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", function($scope) { | ||
angular.extend($scope, { | ||
center: { | ||
lat: 25.0391667, | ||
lng: 121.525, | ||
zoom: 6 | ||
}, | ||
markers: { | ||
taipei: { | ||
lat: 25.0391667, | ||
lng: 121.525, | ||
} | ||
}, | ||
layers: { | ||
baselayers: { | ||
osm: { | ||
name: 'OpenStreetMap', | ||
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', | ||
type: 'xyz' | ||
}, | ||
cloudmade2: { | ||
name: 'Cloudmade Tourist', | ||
type: 'xyz', | ||
url: 'http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', | ||
layerParams: { | ||
key: '007b9471b4c74da4a6ec7ff43552b16f', | ||
styleId: 7 | ||
} | ||
} | ||
} | ||
} | ||
}); | ||
}]); | ||
</script> | ||
<style> | ||
html,body { | ||
height: 98%; | ||
} | ||
.angular-leaflet-map { | ||
height: 100%; | ||
} | ||
.left, .right { | ||
float: left; | ||
width: 48%; | ||
height: 100%; | ||
padding-right: 1em; | ||
} | ||
</style> | ||
</head> | ||
<body ng-controller="DemoController"> | ||
<div class="left"> | ||
<leaflet center="center" markers="markers" layers="layers"></leaflet> | ||
</div> | ||
<div class="right"> | ||
<h1>Layers definition</h1> | ||
<p>You can easily define add various layers with a layer selector on the top right defining <strong>layers</strong> like this.</p> | ||
<pre ng-bind="layers | json"></pre> | ||
</div> | ||
</body> | ||
</html> |