var app = angular.module('plunker', ['openlayers-directive']);
app.controller('MainCtrl', function($scope) {
$scope.markers = [];
$scope.addMarker = function(){
$scope.markers.push({
lat: Math.random() * 90 - 40,
lon: Math.random() * 180 - 90,
message: $scope.markers.length +1
});
};
$scope.removeMarker = function(){
$scope.lastRemovedMarker = $scope.markers.pop();
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<link data-require="angular-openlayers-directive@*" data-semver="0.0.5" rel="stylesheet" href="http://rawgit.com/tombatossals/angular-openlayers-directive/77688d97f995094efdde883c1c5ffe6392a8e292/dist/angular-openlayers-directive.css" />
<link data-require="openlayers@3.2.1" data-semver="3.2.1" rel="stylesheet" href="http://openlayers.org/en/v3.2.1/css/ol.css" />
<script data-require="openlayers@3.2.1" data-semver="3.2.1" src="http://openlayers.org/en/v3.2.1/build/ol.js"></script>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.0-rc.1/angular.js" data-semver="1.4.0-rc.1"></script>
<script data-require="angular-sanitize@1.4.0-rc.1" data-semver="1.4.0-rc.1" src="https://code.angularjs.org/1.4.0-rc.1/angular-sanitize.js"></script>
<script data-require="angular-openlayers-directive@*" data-semver="0.0.5" src="http://rawgit.com/tombatossals/angular-openlayers-directive/fe9606b942500cefa7c05234cd7f9b98caf91157/dist/angular-openlayers-directive.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<openlayers width="100%" height="200px">
<ol-marker ng-repeat="marker in markers" lat="marker.lat" lon="marker.lon" message="{{marker.message}}"></ol-marker>
</openlayers>
<button ng-click="addMarker()">Add marker</button>
<button ng-click="removeMarker()">Remove marker</button>
<ul>
<li ng-repeat="marker in markers">{{marker.message}}</li>
</ul>
<span ng-if="lastRemovedMarker">lastRemovedMarker: {{lastRemovedMarker.message}}</span>
</body>
</html>
/* Put your css in here */