How to update map marker in angular app

Question

So, I created this small map application HERE , and as you can see, it shows your current localization, now the problem is that the marker will not be displayed at the current location. If you are CTRL+U , you will see that the code for the marker is:

 <openlayers ol-center="center" height="400px"> <ol-marker lat="center.lat" lon="center.lon" message="Your current location." ng-model="center" > </ol-marker> </openlayers> 

lat="center.lat" and lon="center.lon" at the beginning is 0 , now if I rigidly set the lat and lon values ​​for my current location, of course, the marker will be displayed at my current location, but how to update the values ​​dynamically ?

I use angular.js , openLayers3 and openlayers- angular-directive , so for repeat my question, how can I update the marker dynamically?

Answer 1

All you need to do is add “autodiscover: true” to your center object of your controller.

As explained in the documentation of this directive.

In addition, you need to put the value in the marker:

 <openlayers ol-center="center" height="400px"> <ol-marker lat="{{center.lat}}" lon="{{center.lon}}" message="Your current location." ng-model="center" > </ol-marker> 

Answer 2

Use $timeout instead of setTimeout . Angular does not know that you are changing the scope inside setTimeout so that it does not update the view.

$timeout uses setTimeout() internally, but also calls $apply() so that Angular triggers a digest.

rememeber to also enter it into the controller

Answer 3

you can try

 <ol-marker ol-marker-properties="center" ></ol-marker> angular.extend($scope, { center: { lat: 0, lon: 0, autodiscover: true label: { message: 'Your current location.', show: true, showOnMouseOver: true } } }); 

Answer 4

good example with code for working with a map in angular JS

http://ngmap.imtqy.com/drawings.html