Draw lines between the markers in the leaflet

Question

I am trying to insert lines between markers (which are generated from JSON data) in a leaflet. I saw an example, but it does not work with JSON data. I see markers, but no lines are displayed.

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 details:

 { "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 to do this, iterating over either the original GeoJSON or the resulting L.GeoJson layer to create the polyline geometry. Here is one simple function that turns a layer of L.geoJson 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 this at work on some synthetic GeoJSON data:

http://fiddle.jshell.net/nathansnider/36twhxux/

Assuming your GeoJSON data contains only point geometry, you can use it after defining window.geojson in your $.getJSON success function, for example:

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

If your GeoJSON data is more complex, you may need to add some conventions to check the type of geometry, 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 have to build a polyline yourself (the lines between your markers).

To be strict, you should use your data when the list of points is still an array (and assuming the order of the array is the order of the lines you want to get). This means that you must work directly with GeoJSON data.

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); 

---

GeoJSON data will be converted via Leaflet into vectors for polylines, polygons, etc. and markers for point functions. Please refer to the Flyer tutorial and reference .

If you want to specify how the Leaflet should style the vectors , you really have to create an object containing the path parameters (for example, your style variable in the first line), but you should specify it as a style variant of your L.geoJson layer, and not inside the icon.

When you want to specify how Leaflet should style markers , you can really set a specific icon that only applies to point elements. You are better off using the pointToLayer parameter, because the code will really only apply to points, instead of trying to apply it to vectors (which for example, is not the setIcon method).

Finally, when you want to perform some action that applies to both vectors and markers, you use the onEachFeature parameter, for example, link your popup.

So, you get 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 stated in the comments, whenever you turn to other people for help, you would facilitate their task (therefore, you will get faster and faster support) if you take the time to correctly indicate your problem, with a description / screenshots about what is going wrong and publish clean code. A very good practice for client code is to reproduce the problem on jsFiddle , for example.