CODEWITHSUNDEEP
angularjs
Tenali_raman
Tenali_raman

Reputation: 2192

How to update map marker in angular application

So i have created this small map application HERE, and as you can see it shows your current localtion, now the problem is the marker will not show on the current location, If you 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>

The lat="center.lat" and lon="center.lon" in the beginning is 0 , now if i hardcode the values of lat and lon to my current location , ofcourse the marker will show in my current location, but how do i update the values dynamically ?

I am using angular.js , openLayers3 and openlayers-angular-directive , So to repeat my question, how do i update the marker dynamically ?

Upvotes: 7

Views: 1197

Answers (4)

Mitul
Mitul

Reputation: 3437

good example with code to work with map in angular JS

http://ngmap.github.io/drawings.html

Upvotes: 1

pedromarce
pedromarce

Reputation: 5669

All you need is to add "autodiscover : true" to your center object in your controller.

As it is explained in the documentation of the directive.

Also, you need to put the value bound 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>

Upvotes: 3

raj
raj

Reputation: 694

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
                }
            }
        });

Upvotes: 1

charlietfl
charlietfl

Reputation: 171690

Use $timeout instead of setTimeout. Angular doesn't know you are modifying the scope inside setTimeout so it doesn't update the view.

$timeout uses setTimeout() internally but also calls $apply() to have angular run a digest.

rememeber to also inject it in controller

Upvotes: 2

Related Questions