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.

Answer 2

EDIT:

Nathan's idea is correct in the sense that you will have to build a polyline (the lines between your markers) yourself.

To be rigorous, you have to use your data when the list of points is still an array (and assuming the array order is the order of line connections you want to get). Which means you have to work on your GeoJSON data directly.

For example, you would do:

function connectDots(data) {
    var features = data.features,
        feature,
        c = [],
        i;

    for (i = 0; i < features.length; i += 1) {
        feature = features[i];
        // Make sure this feature is a point.
        if (feature.geometry === "Point") {
            c.push(feature.geometry.coordinates);
        }
    }
    return c;
}

L.polyline(connectDots(data)).addTo(map);

---

The GeoJSON data will be converted by Leaflet into vectors for polylines, polygons, etc., and markers for point features. Please refer to Leaflet tutorial and reference.

When you want to specify how Leaflet should style the vectors, you should indeed make up an object that holds path options (like your style variable on first line), but you should give it as the style option of your L.geoJson layer, not inside an icon.

When you want to specify how Leaflet should style the markers, you can indeed set a specific icon, which will be applicable only to point features. You should better use the pointToLayer option, as the code will be really applied only on points, instead of trying to apply it to vectors (which do not have a method setIcon for example).

Finally, when you want to perform some action which applies to both vectors and markers, you use the onEachFeature option, for example to bind your popup.

So you would end up with something like:

var myIcon = L.icon({
    iconUrl: './images/mymarker.png',
    iconSize: [18, 28]
});

var geojson = L.geoJson(data, {

    style: style, // only applies to vectors.

    // only applies to point features
    pointToLayer: function(feature, latlng) {
        return L.marker(latlng, {icon: myIcon});
    },

    // will be run for each feature (vectors and points)
    onEachFeature: function(feature, layer) {
        layer.bindPopup(feature.properties.date + '<br />' + feature.properties.id);
    }

});

As pointed out in the comments, whenever you seek for help from other people, you would make their task easier (hence you would get better and faster support) if you take the time to properly state your issue, with description / screenshots of what is going wrong and post some clean code. A very good practice for client side code is to reproduce the issue on jsFiddle for example.