CODEWITHSUNDEEP
javascriptleaflet
Alia Jain
Alia Jain

Reputation: 19

How do I make line string in leaflet-realtime with marker on every point?

I want something like below image: enter image description here Don't know where to define linestring. It would be great if anyone can guide me. Moreover I want to change the color of linestring. Here is my code:-

function createRealtimeLayer(url, container) {
    return L.realtime(url, {
        interval: 5 * 1000,
        getFeatureId: function(f) {
            return f.properties.id;
        },
        cache: true,
        container: container,
        onEachFeature(f, l) {
            date = f.properties.date;
            l.bindPopup(date);
            l.on("mouseover", function () {
                l.openPopup();
            });
            l.on("mouseout", function () {
                l.closePopup();
            });
        }
    });
}
    realtime1 = createRealtimeLayer('getPosition').addTo(map),
    realtime2 = createRealtimeLayer('getUserPositionHistory').addTo(map);

L.control.layers(null, {
    'Current': realtime1,
    'History': realtime2
}).addTo(map);

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

Upvotes: 1

Views: 1632

Answers (1)

Falke Design
Falke Design

Reputation: 11348

To set the markers on every point add this to your onEachFeature:

if(layer instanceof L.Path){      
      l.getLatLngs().forEach(function(latlng){
        L.marker(latlng).addTo(map);
      })
    }

if you want to colorize your line, you have to split up your line like that, but then append not the geojson layer to the map:

if(layer instanceof L.Path){
      var lastlatlng = null;
      layer.getLatLngs().forEach(function(latlng, i){
        if(lastlatlng !== null){
             L.polyline([lastlatlng,latlng],{color: getColor(i)}).addTo(map);
        }
        lastlatlng = latlng;
      })
    }

UPDATE

The Asker wants to create a Line by points from the geojson.

You can add latlngs from the points to a polyline with poly.addLatLng(latlng)

var oldcolor = null;
var polys = [];

function onEachFeature(feature, layer) {
    if(feature.properties.color && oldcolor != feature.properties.color){
        oldcolor = feature.properties.color;

      var lastlatlng = [];

      //This block gets the last latlng from the line before. so you have one line.
      // If you  want to seperate the lines by color, deleted this block
      if( polys.length > 0){
        var lastpoly = polys[polys.length-1];
        if(lastpoly.getLatLngs() && lastpoly.getLatLngs().length > 0){
          var lastlatlngs = lastpoly.getLatLngs();
          lastlatlng = lastlatlngs[0][lastlatlngs[0].length-1];
        }
      }
      //End of block

      polys.push(L.polyline([lastlatlng],{color: oldcolor}).addTo(mymap));
    }

    var poly = polys[polys.length-1]; //get last line
    poly.addLatLng(layer.getLatLng());
}

https://jsfiddle.net/falkedesign/pksy6o8v/

Upvotes: 1

Related Questions