leaflet-realtime icon indicating copy to clipboard operation
leaflet-realtime copied to clipboard

Could an example of the push update method be included ?

Open PideaLtd opened this issue 5 years ago • 2 comments

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 ?

PideaLtd avatar Jun 09 '20 11:06 PideaLtd

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.

perliedman avatar Jul 28 '20 21:07 perliedman

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. image

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: '&copy; <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()
}


`

cweemin avatar Nov 19 '20 19:11 cweemin