tombatossals/angular-openlayers-directive

Adding markers with style does not work

Closed this issue · 2 comments

Hello,

Trying to add markers which are fetched from API like this:

HTML

<div ng-controller="mapController as map">
<openlayers width="100%" height="100%" lat="map.center.lat" lon="map.center.lon" zoom="16">
<ol-marker ng-repeat="marker in map.markers" lat="marker.lat" lon="marker.lon" name="marker.descr"></ol-marker></openlayers>
</div>

JavaScript

mapService.fetchFromREST().then(function(markers){
                var icon;
                angular.forEach(markers, function(value, key) {
                     icon = new ol.style.Style({
                            image: new ol.style.Circle({
                                radius: 5,
                                stroke: new ol.style.Stroke({
                                    color: '#000'
                                }),
                                fill: new ol.style.Fill({
                                    color: value.color
                                })
                            })
                        });
                    markers[key].style = icon;
                });
                map.markers= markers;
                console.log(map.ramps);
            });

console.log(map.markers) is fine but the markers are not showing up on the map.
Can anyone help?

hello,can you tell me have you resolve this problem,and how

Hi, yes I found how to make it work properly. Below is the body of the function that creates the styles of each marker and appends it to the response array.

this.fetchFromREST = function(){
        return $q(function(resolve, reject) {
            $http.get("http://serverApiUrl/",{},{},function(response){
                var resp = JSON.parse(response.data);
                angular.forEach(resp, function(value, key) {
                    resp[key].style = new ol.style.Style({
                        image: new ol.style.Circle({
                            radius: 5,
                            stroke: new ol.style.Stroke({
                                color: '#000'
                            }),
                            fill: new ol.style.Fill({
                                color: value.color
                            })
                        })
                    });
                });
                resolve(resp);
            },function(error){console.log(error);reject(error);});
        });
    };