Markers not displayed on Openlayers3 out of Angularjs watch function

Question

I want to display specific markers on a Openlayers-map depending on user interaction. Therefore I use the AngularJS watch function in a directive link function. I observe an Array ('data') which contains json objects. These also contain long. & lat. and are stored in EPSG:4326/WGS 84.

I tried to adapt the fiddle of: OpenLayers 3 - draw multiple lines/paths based on coordinates

In console.log i can see that the coordinates(geometry.getFirstCoordinate()) are correctly generated, but they don't show up on the map. I am not sure, if this doesn't work because of the Angular digest, or if it is a problem with Openlayers. I would also appreciate any hint for debugging OL, to solve the problem.

(function(){
'use strict';
var app = angular.module('app');
app.directive('olMap', function () {
    return {
        restrict: 'E',
        template: '<div  class="map" id="map"> </div>',
        scope: {
            clicked: "=",
            data: "="
        },

        link: function postLink(scope, element, attrs) {
            //Todo: delete layer bei Update vermutlich notwendig; Array Dimensionen farbig unterscheiden in der Karte

            scope.$watch('data',function(nV,oV) {
                // init map
                var map = new ol.Map({
                    target: 'map',
                    layers: [
                        new ol.layer.Tile({
                            source: new ol.source.MapQuest({layer: 'osm'}) // Street mapa -> osm
                        })
                    ],
                    // pos on map
                    view: new ol.View({
                        center: ol.proj.transform([17.813988, 43.342019], 'EPSG:4326', 'EPSG:3857'),
                        zoom: 3
                    })
                });

                var vectorSource = new ol.source.Vector({
                    //create empty vector
                });

                var markers = [];

                function AddMarkers() {
                    //create a bunch of icons and add to source vector
                    var counter = 0;
                    if (scope.data.length > 0) {
                        //Run trough 2D-Array
                        for (var i = 0; i < scope.data.length; i++) {
                            for (var j = 0; j < scope.data[i].length; j++) {
                                var x = scope.data[i][j].latitude;
                                var y = scope.data[i][j].longitude;
                                //x= parseFloat(x);
                                //y= parseFloat(y);
                                var iconFeature = new ol.Feature({
                                    geometry: new ol.geom.Point(ol.proj.transform([x, y], 'EPSG:4326', 'EPSG:3857')),
                                    name: 'Marker ' + counter
                                });
                                console.log("Icon feauture: ", iconFeature);
                                markers[counter] = [x, y];
                                counter++;
                                vectorSource.addFeature(iconFeature);
                            }
                        }
                        console.log("Markers:", markers);
                    }

                    //create the style
                    var iconStyle = new ol.style.Style({
                        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
                            anchor: [0.5, 46],
                            anchorXUnits: 'fraction',
                            anchorYUnits: 'pixels',
                            opacity: 0.75,
                            src: 'http://upload.wikimedia.org/wikipedia/commons/a/ab/Warning_icon.png'
                        }))
                    });

                    //add the feature vector to the layer vector, and apply a style to whole layer
                    var vectorLayer = new ol.layer.Vector({
                        source: vectorSource,
                        style: iconStyle
                    });
                    return vectorLayer;
                }

                var layerMarkers = AddMarkers();

                map.addLayer(layerMarkers);
                console.log("Map: ",map);
            }, true);
        }
    }
});

})();

Please ask if there are any open points. I will give my best to provide them.

Thanks in advance!

duese

Answer 1

The Solution is easy:

Move out everything from $watch except:

var layerMarkers = AddMarkers();
map.addLayer(layerMarkers);

Then the map gets printet, as you wish.