splim92 splim92 - 2 months ago 23
Javascript Question

How to update multiple marker location simultaneously using JSON data? Leaflet JS

I'm using Leaflet JS to build an interactive map viewer that can track movement of multiple devices. And I'm using JSON data to set Latitude and Longitude for every marker.

The JSON data looks like this:


The data contains position information from 3 devices.

I already successfully set the markers based on latitude and longitude of the devices with a
loop. But I can't manage to update the movement of marker with
and with a
loop. I don't want to use the clear layer function to add a new marker every time I get a location update, because I need to save the movement history of each device for later. What should I do to make it work? Any suggestion will be appreciated.

Here is my code.
is meant to run the code continously. And I tried to use array variables as the marker variable, and to tag every marker (since using windows[variable_name] is bad practice).



function doSomething(data){
jsonBmsData = JSON.parse(data);


$.get('get_jsondata.php', doSomething);

if(z == 1){

for(var i=0; i<jsonBmsData.BMS.length; ++i){

marker[i][0] = jsonBmsData.BMS[i].id;
marker[i][1] = jsonBmsData.BMS[i].type;
marker[i][2] = jsonBmsData.BMS[i].lat;
marker[i][3] = jsonBmsData.BMS[i].long;

markerMove[i] = L.marker([marker[i][2],marker[i][3]])
.bindPopup('ID Prajurit = ' + marker[i][0] + '<br>Tipe = ' + marker[i][1]
+ '<br>Lat = ' + [marker[i][2] + '<br>Long = ' + marker[i][3])


} else if(z > 1){

for(var j=0; j<jsonBmsData.BMS.length; ++j){

marker[j][0] = jsonBmsData.BMS[j].id;
marker[j][1] = jsonBmsData.BMS[j].type;
marker[j][2] = jsonBmsData.BMS[j].lat;
marker[j][3] = jsonBmsData.BMS[j].long;

var newLatLng = new L.latLng(marker[j][2],marker[j][3]);

markerMove[j]._popup.setContent('ID Prajurit = ' + marker[j][0] + '<br>Tipe = ' + marker[j][1]
+ '<br>Lat = ' + [marker[j][2] + '<br>Long = ' + marker[j][3]);




iH8 iH8

You could use an object to store markers with their id as propertyname and the marker as the property value. It will makes things a lot easier. To store the previous positions you can add a array to each marker to store them. Here in code with comments to explain:

// The object to store markers
var markers = {};

// Function for setting/updating markers
function setMarkers(data) {

  // Loop over the BMS array and handle each object
  data.BMS.forEach(function (obj) {

    // Check if there is already a marker with that id in the markers object
    if (!markers.hasOwnProperty(obj.id)) {
      // No marker with that id found in the markers object

      // Create it, and add it to the map, store into markers object
      markers[obj.id] = new L.Marker([obj.lat, obj.long]).addTo(map);

      // Add array to the marker instance to store the previous latlngs
      markers[obj.id].previousLatLngs = [];

    } else {
      // There is already a marker with that id in the markers object

      // Store the previous latlng

      // Set new latlng on marker
      markers[obj.id].setLatLng([obj.lat, obj.long]);

And here's a working example on Plunker; http://plnkr.co/edit/HrrnXh?p=preview

There is a very cool plugin for Leaflet, called Realtime. It does exacty what you want and more but it expects a GeoJSON collection as data, so it won't work with your dataset. If you are able to convert your data to a GeoJSON collection, it's really worth to take a look at:

GeoJSON: http://geojson.org/

Demo: http://www.liedman.net/leaflet-realtime/

Repo: https://github.com/perliedman/leaflet-realtime