1

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.

0

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);
  • Thanks for pointing out my mistake, ghybs! I ran across an issue where it would save one location permanently to a variable and then draw a line separately to each marker. After switching to your solution it started to work just fine. Thanks again! – Ilja Shevelyov Jan 12 '18 at 1:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.