'Leaflet Realtime Redrawing multiple polylines using a start position and a current position
I have been trying to use Leaflet realtime to draw a polyline between a starting latitude and longitude and the current latitude and longitude of each feature from the GeoJSON.
The expected behavior is that I should be able to change the current latitude and longitude for each for entries in the database and it would update the polylines going from the start latitude and longitude to the current position.
I want to draw a line between the StartLatitude and StartLongitude to the latitude and longitude entries for each of the rows (latitude and longitude entries is the Current Position)
I am adding GeoJson to the leaflet map and auto-updating it using leaflet realtime
var map = L.map('map', undefined, options),
realtime = L.realtime(function(success, error) {
fetch('http://localhost/Vand/GetFromDB.php?bruger=1')
.then(function(response) {
return response.json();
})
.then(function(data) {
success({
type: 'FeatureCollection',
features: [data]
});
})
.catch(error);
}, {
interval: 5050,
pointToLayer: function(feature,latlng){
return L.marker(latlng);
},
getFeatureId: function(feature)
{
//console.log(feature.properties.Maskine_ID);
return feature.properties.Maskine_ID;
},
onEachFeature: onEachFeature,
}).addTo(map);
Example response of GetFromDB.php
This is what I am using to initially draw the polylines of the two features

And this is how I am trying to update them
function RedrawPolyLine(feature) {
polylines.forEach(function (item) {
map.removeLayer(item);
polylines = [];
var pointsForJson = [];
pointsForJson.push([feature.properties.StartLongitude, feature.properties.StartLatitude]);
pointsForJson.push(feature.geometry.coordinates);
console.log(lngLatArrayToLatLng(pointsForJson));
var polyline = L.polyline(lngLatArrayToLatLng(pointsForJson)).addTo(map);
polylines.push(polyline);
});
}
realtime.on('update', function(e) {
//console.log(realtime.getBounds());
Object.keys(e.update).forEach(function(id) {
var feature = e.update[id];
this.getLayer(id).bindPopup('<h4>Maskine ID:' +feature.properties.Maskine_ID+'</h4>
<p>Status: '+feature.properties.Status+'</p>');
RedrawPolyLine(feature);
}.bind(this));
});
The actual result when changing the current position (latitude and longitude in DB for Maskine_ID
1)

Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

