angular marker change icon
http://angularjs.org/
HTML
<script src="http://tombatossals.github.io/angular-openlayers-directive/bower_components/openlayers3/build/ol.js"></script>
<script src="http://tombatossals.github.io/angular-openlayers-directive/bower_components/angular/angular.min.js"></script>
<link rel="stylesheet" href="http://tombatossals.github.io/angular-openlayers-directive/bower_components/openlayers3/build/ol.css">
<script src="http://tombatossals.github.io/angular-openlayers-directive/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="https://rawgit.com/tombatossals/angular-openlayers-directive/latest/dist/angular-openlayers-directive.min.js"></script>
<body ng-controller="DemoController">
<openlayers ol-center="center" ol-defaulte='defaults' lat="51.505" lon="-0.09" width="100%" height="400px">
<ol-marker ol-marker-properties="marker" ng-click="marker.handleClick($event)" ng-repeat="marker in markGB"></ol-marker>
</openlayers>
</body>
JavaScript
var app = angular.module('demoapp',['openlayers-directive']);
app.controller('DemoController', [ '$scope', '$timeout', function($scope, $timeout) {
var customStyle = {
image: {
icon: {
anchor: [0.5, 1],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
opacity: 0.90,
src: 'http://openlayers.org/en/v3.14.2/examples/data/icon.png'
}
}
};
var markGB = [
{
name: 'Bath',
lat: 51.375,
lon: -2.35
},
{
name: 'London',
lat: 51.505,
lon: -0.09,
label:{
message: '<div></div>'
},
handleClick: function(){
markGB[1]['style'] = {
image: {
icon: {
anchor: [0.5, 1],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
opacity: 0.90,
src: 'http://openlayers.org/en/v3.14.2/examples/data/icon.png'
}
}
};
var marker = markGB.splice(1,1);
$timeout(function(){
markGB.push(marker[0]);
})
}
}];
angular.extend($scope, {
center: {
lat: 51.505,
lon: -0.09,
zoom: 5
},
markGB: markGB,
defaults: {
events: {
map: ['singleclick', 'pointermove', 'dblclick']
}
}
});
}]);