fairly new to leaflet and such and have been experimenting with a little project. Essentially I have a csv file with latlng information and a function in the code that reads it and places markers accordingly. My question is: How do I retrieve individual marker coordinates, convert them to latlng and apply a polyline in the order of marker appearance? I've attempted using coordToLatLng(despite there being minimal documentation on its use) with negative results. Below is my current code I'm working on:
<script>
var map = L.mapbox.map('map', 'faraday2.hb90naie', {
detectRetina: true,
zoomControl: true,
//take away the zoom controls on the top left
infoControl: false,
maxZoom: 15
});
map.setView([-34.0153, 93.1673], 4);
function eachLayer(layer) {
var feature = layer.toGeoJSON();
//if (feature.properties && feature.properties.data.title) {
//layer.bindPopup("Name - " + feature.properties.title);
//}
}
var moderateIcon = L.icon({
iconUrl : './img/moderate.png',
iconSize : [25, 25]
})
var highIcon = L.icon({
iconUrl : './img/high.png',
iconSize : [25, 25],
})
var extremeIcon = L.icon({
iconUrl : './img/extreme.png',
iconSize : [25, 25]
})
var points = omnivore.csv('./data/data.csv')
.on('ready', function() {
map.fitBounds(points.getBounds());
points.eachLayer(function(layer){
if(layer.feature.properties.priority == 'high'){
layer.setIcon(highIcon);
}
else if(layer.feature.properties.priority == 'extreme'){
layer.setIcon(extremeIcon);
}
else if(layer.feature.properties.priority == 'moderate'){
layer.setIcon(moderateIcon);
}
layer.bindPopup(layer.feature.geometry.coordinates);
coords = [];
coords.push(layer.feature.geometry.coordinates);
//coordinates = coordToLatLng(coords);
//window.alert(coords);
/*var poly = L.polyline([], {color: 'red',
weight : 5,
smoothFactor : 1})
for(var i = 0; i < coords.length; i++){
poly.addLatLng(this.coords[i]);
}*/
var latlngs = Array();
marker1 = L.marker([layer.feature.geometry.coordinates[1], layer.feature.geometry.coordinates[0]]);
marker2 = L.marker([-30.4676, 115.7739]);
latlngs.push(marker1.getLatLng());
latlngs.push(marker2.getLatLng());
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
});
var markers = L.markerClusterGroup({
showCoverageOnHover: false,
maxClusterRadius: 25
});
markers.addLayer(points);
//window.alert(markers.length);
map.addLayer(markers);
points.eachLayer(eachLayer);
}).addTo(map);
</script>
EDIT: Sorry I didn't realise I didn't complete my question. How would I also iterate through every coordinate I have and create a new variable accordingly for a marker so that polyline would work?
EDIT 2: I can add a second variable for marker and give it hard coded location information and it will then render a line on the map, however it turns into a tree of lines rather than a line going from marker to the next to result in one long line.