Skip to content

Instantly share code, notes, and snippets.

@elemoine

elemoine/index.html

Last active December 17, 2015 06:19
Show Gist options
  • Save elemoine/5564707 to your computer and use it in GitHub Desktop.
Save elemoine/5564707 to your computer and use it in GitHub Desktop.
Download ZIP
Example of an Angular directive for ol3.
Raw
index.html
<!DOCTYPE html>
<html ng-app='app'>
<head>
<meta charset=utf-8">
<link rel="stylesheet" href="http://ol3js.org/ol3/master/build/ol.css" type="text/css">
<style>
.map {
width: 600px;
height: 400px;
}
</style>
<script src="http://ol3js.org/ol3/master/build/ol.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<script>
// ol3 map directive
var olModule = angular.module('ol', []);
olModule.directive('olMap', ['$parse', function($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var map = $parse(attrs.olMap)(scope);
map.setTarget(element[0]);
}
};
}]);
// Angular app
var app = angular.module('app', ['ol']);
app.controller('Controller', ['$scope', function($scope) {
var view = new ol.View2D({
center: [0, 0],
zoom: 5
});
var map1 = new ol.Map({
layers: [
new ol.layer.TileLayer({
source: new ol.source.OSM()
})
],
view: view
});
var map2 = new ol.Map({
layers: [
new ol.layer.TileLayer({
source: new ol.source.Stamen({
layer: 'watercolor'
})
})
]
});
map2.bindTo('view', map1);
$scope.map1 = map1;
$scope.map2 = map2;
}]);
</script>
</head>
<body ng-controller='Controller'>
<div class="map" ol-map='map1'></div>
<div class="map" ol-map='map2'></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment