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"
}
}
]
}
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.