CODEWITHSUNDEEP
javascriptleaflet
Gavin
Gavin

Reputation: 53

Adding polylines using leaflet with array information included

I'm very much a beginner with both Javascript and Leaflet so apologies if this is an easy fix, or I get some terminology incorrect...

I'm looking to draw polylines using leaflet from a csv (which I've brought in and parsed using Papaparse). Whilst I can draw very basic versions of these, I am unable to pass over any of the attributes from the csv (for example each link includes attributes relating to traffic flow which I would ideally like to symbolise.

My array is as follows: enter image description here

Within which I have objects which look as follows (where display_links is the array with all my information) image: enter image description here

function showlinks(display_links) {

    display_links.forEach(function (item, index) {
        Origin = new L.LatLng(item.Lat1, item.Lng1);
        Dest = new L.LatLng(item.Lat2, item.Lng2);
        polylinePoints = [Origin, Dest]
        pLatLngs.push(polylinePoints)
    });

    var polylineOptions = {
    color: 'black',
    weight: 2,
    opacity: 0.9
    };

    polyline = new L.Polyline(pLatLngs, polylineOptions);
    map.addLayer(polyline);
};

There is probably a more efficient way of doing this entire task (and my inexperience with arrays and objects wont be helping), but I basically created a new array of only lat long values which could be read by leaflet. However, when I tried to have a larger more detailed array with both lat, long, ID and Total_Flow the code wouldn't run.

Any help on this would be greatly appreciated, I've been going round in circles for days now and just getting nowhere...

Upvotes: 0

Views: 2060

Answers (1)

IvanSanchez
IvanSanchez

Reputation: 19069

It feels like you are doing either premature optimization (by trying to draw everything in just one polyline) or naïve thinking about your data structure (assuming that the segments are always correlative). You will run into problems as soon as two segments are not correlative, or as soon as two correlative segments have different attributes e.g. different Traffic_Flow.

So the canonical approach for a minimally viable program would be to draw one L.Polyline per pair of points:

display_links.forEach(function (item, index) {
    var origin = new L.LatLng(item.Lat1, item.Lng1);
    var dest = new L.LatLng(item.Lat2, item.Lng2);

    L.polyline([origin, dest]).addTo(map);
});

While optionally using some other attribute from each row to control the styling of the L.Polyline via its options, e.g.:

display_links.forEach(function (item, index) {
    var origin = new L.LatLng(item.Lat1, item.Lng1);
    var dest = new L.LatLng(item.Lat2, item.Lng2);

    var color:
    if (item.TotalFlow > 100) {
       color = 'red';
    } else {
       color = 'green';
    }

    L.polyline([origin, dest], { color: color }).addTo(map);
});

Or a shorter form like 

L.polyline([origin, dest], { color: item.TotalFlow > 100 ? 'red' : 'green' }).addTo(map);

I would encourage you to not aim for an efficient processing of the data. On one hand, you are dealing with only 18 segments - on the other, it would involve having the data in graph form, and then perform an edge contraction on nodes that only have two segments which share all their attributes. Instead, ask for the original data in a format more suited to the task, e.g. GeoJSON.

Upvotes: 1

Related Questions