leaflet-realtime
leaflet-realtime copied to clipboard
Could an example of the push update method be included ?
I've got valid GeoJSON being created by a PHP script which I can pull into a browser via WebSockets.
However, I cannot see how to configure leaflet-realtime to use it. I've set start:false, have defined the url as ws://127.0.0.1:12345/replay.php and have removed the interval option as suggested in the readme but it's not pulling my feed.
Could you provide a simple example of how to configure leaflet-realtime to pull data from a web socket ?
Sorry, I do not know of a public, open data source that delivers data through web sockets, and also the web socket logic itself is a bit outside the scope of the library.
Some sort of example of push functionality could still be a good idea, though.
I'm using your example trail.js and tail.html for starting my project with a few modification for Websocket (see below). But I'm getting blank layer rendered.

The websocket return this data {"metadata": {"lat": 33.3805687, "lon": -111.9677583, "time": "2020-11-19T19:26:08Z"}}
trail.js:
var map = L.map('map'),
trail = {
type: 'Feature',
properties: {
id: 1
},
geometry: {
type: 'LineString',
coordinates: []
}
},
realtime = L.realtime(function(success, error) {
gps_new_data = realtime["_mygps_data"]
var trailCords = trail.geometry.coordinates;
trailCords.push(gps_new_data.geometry.coordinates);
trailCords.splice(0, Math.max(0, trailCords.length - 5));
success({ type: 'FeatureCollection', features: [gps_new_data, trail]});
}, {
interval: 60000,
start: false,
}).addTo(map);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
realtime.on('update', function() {
map.fitBounds(realtime.getBounds());
});
metadatasocket = new WebSocket("ws://localhost:35331/ws/gps_results")
metadatasocket.onmessage = function(evt) {
received_msg = JSON.parse(evt.data)
lat = received_msg["metadata"]["lat"];
long = received_msg["metadata"]["lon"];
realtime["_mygps_data"] = {"geometry": {"type": "Point", "coordinates": [lat,long]}, "type": "Feature", "properties": {}};
realtime.update()
}
`