Realtime Trail example with multiple marker using JSON like earthquakes example

[satishverma2020]

Hi Per Liedman First afoul thank you for share this realtime library.

we are using realtime trail.js in our fleet module but we unable to add multiple object using JSON file as per below example.

https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson

[perliedman]

Hi @satishverma2020, have you ensured your objects have unique identifiers, and have you properly set the getFeatureId option for leaflet-realtime?

[satishverma2020]

Hi @perliedman , thanks for your response, we are a beginner in java/jquery, we just using java for leaflet-realtime only so please help me.

Here is my code,

function createRealtimeLayer(url, container) {
    return L.realtime(url, {
        interval: 3 * 1000,
        getFeatureId: function(f) {
            return f.properties.url;
        },    
        cache: true,
        container: container,
        onEachFeature(f, l) {
            l.bindPopup(function() {
                return '<h3>' + f.properties.place ;
            });
        }
    });
}

var map = L.map('map'),
    clusterGroup = L.markerClusterGroup().addTo(map),
    subgroup1 = L.featureGroup.subGroup(clusterGroup),
    realtime1 = createRealtimeLayer('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson', subgroup1); 

 var trailCoords = realtime1.geometry.coordinates;
            trailCoords.push(realtime1.geometry.coordinates);
            trailCoords.splice(0, Math.max(0, trailCoords.length - 5));
            success({
                type: 'FeatureCollection',
                features: [realtime1, createRealtimeLayer]
       }) .addTo(map);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: ' '
}).addTo(map);

realtime1.once('update', function() {
    map.fitBounds(realtime1.getBounds(), {maxZoom: 3});
});

// simply we want trail line in all maker.

[perliedman]

Hi, sorry to say I do not have the time to dig into code like that, but at least the code from where you define trailCoords and the following lines look a bit strange to me. Like most things in JavaScript, Leaflet Realtime works asynchronously, so the geometry will not exist just because the layer has been created. Also, a Leaflet Realtime layer does not have any geometry property.

I suggest familiarizing yourself with listeners and other asynchronous JavaScript techniques, and looking in detail at the Earthquake example to make sure you really get what it is doing.