How to manage markers and variables in leaflet

Question

I'm trying out the leafletjs.com library which i think is very nice for mobile application, but i'm in doubt how to approach it.

I'm trying to make a realtime map where markers represents the position of each logged on user. If the user moves, the users marker should move accordingly.

I'm a bit in doubt, how to do this in leaflet. My problem is simply how to make a lot of markers the right way, so i can later pick and move them.

First i need to add each marker to a layergroup, and add that layergroup to the map, right?

But later, how do i programmicaly pick one specific marker and update its position?

Do i need to use any plugins or is leaflet in it self all i need?

Thomas

Answer 1

No, you don't need to add markers to a layergroup, nor do you need any plugins. To add a marker to the map you can simply do:

var marker = L.marker([50.5, 30.5]);
marker.addTo(map);

If you need to move the marker programatically you can use setLatLng:

marker.setLatLng([40.5, 40.5]);

How you decide to map users to markers is really up to you. A simple solution could be to use an object where keys are userId's (or some other user identifier) and values are markers:

var users = {
  11: L.marker([35.5, 15.5]), 
  15: L.marker([40.5, 20.5]), 
  17: L.marker([45.5, 25.5])
}

Have you read the Leaflet documentation?

http://leafletjs.com/reference.html

You can also read this short example on using Leaflet on mobile devices:

http://leafletjs.com/examples/mobile.html

Answer 2

Check out these resources:

• Leaflet on Mobile
• Real-Time Geolocation Service with Node.js
• Google Search: leaflet.js tutorial geolocation