Draw lines between markers in leaflet

Question

I'm trying to insert lines between markers (which are generated from JSON data) in leaflet. I saw an example, but it doesn't work with JSON data. I can see the markers, but no lines appear.

var style = {   color: 'red',   fillColor: "#ff7800",   opacity: 1.0,   fillOpacity: 0.8,   weight: 2 };  $.getJSON('./server?id_dispositivo=' + id_device + '', function(data) {   window.geojson = L.geoJson(data, {     onEachFeature: function (feature, layer) {       var Icon = L.icon({         iconUrl: './images/mymarker.png',         iconSize: [18, 28], // size of the icon         style: style,       });       layer.setIcon(Icon);       layer.bindPopup(feature.properties.date + '<br />' + feature.properties.id);     }   }); }); map.addLayer(geojson); 

My JSON data:

{   "type": "FeatureCollection",   "features": [     {       "type": "Feature",       "geometry": {         "type": "Point",         "coordinates": [           -70.219841,           8.6310997         ]       },       "properties": {         "id": 336,         "id_user": 1,         "id_device": 1,         "timestamp": 1446571154,         "date": "12:49PM 03-11-2015",         "Latitude": 8.6310997,         "Longitude": -70.219841,         "speedKPH": 0,         "heading": "",         "Name": "N\/D",         "City": "N\/D",         "estatus": "Stop"       }     }   ] } 

Answer 1

There are many ways you could do this by iterating over either the original GeoJSON or the resulting L.GeoJson layer to produce a polyline geometry. Here is one simple function that will turn a L.geoJson layer of points into an array of coordinates that can be passed to L.polyline:

function connectTheDots(data){     var c = [];     for(i in data._layers) {         var x = data._layers[i]._latlng.lat;         var y = data._layers[i]._latlng.lng;         c.push([x, y]);     }     return c; } 

and here is a fiddle showing it at work on some synthetic GeoJSON data:

http://jsfiddle.net/nathansnider/36twhxux/

Assuming that your GeoJSON data contains only point geometry, you should be able to use it after you define window.geojson within your $.getJSON success function like so:

pathCoords = connectTheDots(window.geojson); var pathLine = L.polyline(pathCoords).addTo(map) 

If your GeoJSON data are more complex, you might need to add some conditionals to check for geometry type, etc., but this should at least give you a general idea of how to proceed.