tombatossals/angular-openlayers-directive

ol-Marker OnClick ng-repeat

Opened this issue · 0 comments

i have dynamic markers shown on the map but cannot add Onclick function it does not work, there is my code
Html
<openlayers ol-center="tunisie" ol-defaults="defaults" height="640px"> <ol-layer ol-layer-properties="layer" ng-repeat="layer in layers|filter:{visible:true}"></ol-layer> <ol-marker ol-marker-properties="mk" ng-repeat="mk in markers"> </ol-marker> </openlayers>
Controller:

var markers = [];
        var promise = $http
            .get('api/station')
            .then(function (response) {
                return response.data;
            });
        promise.then(
            function (res) {
                angular.forEach(res, function (value) {
                        var mark = {
                             name: value.lib,
                            lat: value.localisationGeo.latitude,
                            lon: value.localisationGeo.longtitude,
                            label: {
                                message: value.lib,
                                show: false,
                                showOnMouseOver: true
                            },
                            onClick: function (event, properties) {
                                console.log(event, properties);
                            }
                        };
                        markers.push(mark);
                    }
                );
            },
            function (error) {
                $log.error('failure clients', error);
            });

angular.extend($scope, {
            tunisie: {
                lat: 34.176138,
                lon: 9.557265,
                zoom: 6.6
            },
            defaults: {
                layers: {
                    main: {
                        source: {
                            type: 'OSM',
                            url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
                        }
                    }
                },
                events: {
                    map: [],
                    markers: ['singleclick'],
                    layers: []
                },
                interactions: {
                    mouseWheelZoom: true
                },
                controls: {
                    zoom: false,
                    rotate: false,
                    attribution: false
                }
            },
           markers: markers,
            layers: [...]
        });