Y
Y
Yuri 4012015-11-23 16:00:26
API
Yuri 401, 2015-11-23 16:00:26

How to display markers in openlayers (ol-marker) Angularjs map?

Hello!
I'm trying to display markers on the map as shown in the documentation tombatossals.github.io/angular-openlayers-directiv...
And here's how I do it.
API Service:

'use strict';
angular.module('myMap')
  .factory('SettlementsResource', function($resource){
    return $resource("http://localhost:8000/settlements/", {});
  });

map.js
'use strict';

angular.module('myMap')
.controller('IndexMapCtrl', [ '$scope', '$http', 'SettlementsResource', function($scope, $http, SettlementsResource){
  var markers = SettlementsResource.query();

        angular.extend($scope, {
        	center: {
                lat: 51.505,
                lon: -0.09,
                zoom: 7
  },
        markers: markers
     });
}]);

view.html
<openlayers ol-center="center" ol-markers="markers" height="400px" width="100%">
          <ol-marker ng-repeat="marker in markers" lat="marker.lat" lon="marker.lon"></ol-marker>
      </openlayers>

I get a response in json like this:
[
            {
                name: 'London',
                lat: 51.505,
                lon: -0.09
            },
            {
                name: 'Bath',
                lat: 51.375,
                lon: -2.35
            },
            {
                name: 'Canterbury',
                lat: 51.267,
                lon: 1.083
            }
        ]

As a result, the map is displayed, but there are no objects on the map.
console log(markers); outputs:
[$promise: d, $resolved: false]
0: d
$$hashKey: "object:18"
created_at: "-0001-11-30 00:00:00"
description: "город Мой"
handleInteraction: (evt)handleTapInteraction: ()
id: "1"
lat: "51.267"
layer: ""
lon: "1.083"
name: "Мой город"
removeAllOverlays: (evt)
showAtLeastOneOverlay: (evt)
updated_at: "-0001-11-30 00:00:00"
__proto__: d
1: d
2: d
3: d
4: d
5: d
6: d
7: d
8: d
$promise: d
$resolved: true
length: 9
__proto__: Array[0]

if output like this:
<ul>
<li ng-repeat="marker in markers">{{marker.lat}}, {{marker.lon}}</li>
</ul>

That brings everything out.
What am I doing wrong?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question