CODEWITHSUNDEEP
javascriptjsonleaflet
Sunny
Sunny

Reputation: 189

Need help on adding popup leaflet

This is my json response from URL:

 {
        "geometry": {
            "type": "Point",
            "coordinates": [
                -1.480921,
                52.979698
            ],
            "Timestamp": "2017-07-09T09:21:30",
            "GatewayID": 193,
            "Speed": 94.9,
            "Heading": 157
        },
        "type": "Feature",
        "properties": {}
    }

This is my js file:

var map = L.map('map', {
  'center': [0, 0],
  'zoom': 0,
  'layers': [
    L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
      'attribution': 'Map data © OpenStreetMap contributors'
    })
  ]
});

var geojsonMarkerOptions = {
    radius: 18,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};

var realtime = L.realtime({
    url: 'http://127.0.0.1:8000/mongo/getgpsdata/',
    crossOrigin: true,
    type: 'json'
}, {
    interval: 3 * 1000,
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng)
    }

}).addTo(map);

realtime.on('layeradd', function(e) {
    var coordPart = function(v, dirs) {
            return dirs.charAt(v >= 0 ? 0 : 1) +
                (Math.round(Math.abs(v) * 100) / 100).toString();
        },
        popupContent = function(fId) {
            var feature = e.features[fId],
                c1 = feature.geometry.Speed
                c2=feature.geometry.Timestamp
                c = feature.geometry.coordinates;
            return '<b>coord: </b>' +c + '<br><b>Speed:</b> '+c1 + '<br><b>Time: </b>' + c2;
        },
        bindFeaturePopup = function(fId) {
            realtime.getLayer(fId).bindPopup(popupContent(fId));
        },
        updateFeaturePopup = function(fId) {
            realtime.getLayer(fId).getPopup().setContent(popupContent(fId));
        };

    map.fitBounds(realtime.getBounds(), {maxZoom: 30});

    Object.keys(e.enter).forEach(bindFeaturePopup);
    Object.keys(e.update).forEach(updateFeaturePopup);
});

It works perfectly fine but it wont show the popups, but if i give 'update' in place of 'layeradd' then it gives me the popups but the historical data is lost as it gets updated every time.

Any help would be great, Thanks!

Upvotes: 0

Views: 146

Answers (1)

Sunny
Sunny

Reputation: 189

Add bindPopup while returning the Marker, this worked for me.

return L.circleMarker(latlng).bindPopup("your content")

Upvotes: 2

Related Questions