Fetch lat lon from eachLayer that uses coordinates

Question

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.

Answer 1

Welcome to GIS SE!

You are creating a new latlngs array and corresponding polyline for each of your points, instead of accumulating the lat/lng pair of each point in a common latlngs array, then building a single polyline after you finish looping through your points:

var latlngs = [];

points.eachLayer(function (layer) {
  latlngs.push(layer.getLatLng());
});

L.polyline(latlngs).addTo(map);