Drawing markers with AngularJS and openlayers

By Eugenia Pérez | 2 May, 2015

As you probably read some days ago I’m developing a website with some mapping features in it. To do so I’m using a great AngularJS directive created by tombatossals and accesible on this link: https://github.com/tombatossals/angular-openlayers-directive

I need now to show a map with some markers representing running races. This is pretty simple using the directive. We just need to add  a <ol-marker> element for each race we want to represent. We can also set an overlay which will show up every time we hover a marker, showing some related information.

The tricky part was the finding the best solution to show this overlay. The directive supports either showing it when clicking on a marker or when hovering it. I personally like the last one more. However I do not want to have the overlay disappearing when I’m not hovering the marker, because it would be very useful to have some HTML including a link in this overlay. To do so I have to extend a bit the directive mentioned to support a new overlay drawing strategy.

This new strategy forces the rendering of a marker’s overlay as soon as the mouse enters it and when the user moves it to another one the all overlay disappears being replaced by the one of the current marker. We can also have all of them removed from the map by clicking on an area free of any marker.

Find bellow a small portion code of how this can be achieved:

<openlayers ol-center="center" custom-layers="true" height="500">
     <ol-layer ol-layer-properties="bing"></ol-layer>
     <ol-marker ng-repeat="marker in markers" ol-marker-properties="marker"></ol-marker>
 </openlayers>

First of all place the map, a base layer and a marker for each object in an array we will populate in the controller with the data coming from the server.

$scope.addMarker = function (value) {
         $scope.markers.push({
                name: value.Id,
                lat: value.Town.Latitude,
                lon: value.Town.Longitude,
                label: {
                     message: value.Name,
                     show: false,
                     keepOneOverlayVisible: true
                }
          });
};

For each event received from a server API a new object is created with all the information required to draw the marker and display and overlay with a message and the rendering strategy explained before.

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather