Skip to content

Commit

Permalink
feat(examples): Added a new overlays-simple-example.html
Browse files Browse the repository at this point in the history
  • Loading branch information
tombatossals committed Dec 29, 2013
1 parent 493174b commit 55a24a2
Showing 1 changed file with 66 additions and 0 deletions.
66 changes: 66 additions & 0 deletions examples/overlays-simple-example.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!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: 39,
lng: -100,
zoom: 4
},
layers: {
baselayers: {
xyz: {
name: 'OpenStreetMap (XYZ)',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
type: 'xyz'
}
},
overlays: {
wms: {
name: 'EEUU States (WMS)',
type: 'wms',
url: 'http://suite.opengeo.org/geoserver/usa/wms',
layerParams: {
layers: 'usa:states',
format: 'image/png',
transparent: true
}
}
}
}
});
}]);
</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" layers="layers"></leaflet>
</div>
<div class="right">
<h1>Baselayer with overlay definition</h1>
<p>You can add overlays to a baselayer, which will show a layer selector on the top right corner, defining <strong>layers</strong> like this.</p>
<pre ng-bind="layers | json"></pre>
</div>
</body>
</html>

0 comments on commit 55a24a2

Please sign in to comment.