0

I am using Tabletop.js to map locations on a leaflet map. With each row I add the lat lng to a feature group and then to the map. What I would also like to do is use leaflet geodesic to draw a line between all latlng pair (origins) and a single destination (orleans). Instead what I get is a line drawn between the last origin and orleans.

Here is what I have tried...

    var Geodesic = L.geodesic([], {
        weight:3,
        opacity:1,
        steps: 50
    }).addTo(map);

    var fg = L.featureGroup().addTo(map);
    var orleans = new L.LatLng(30.053206, -89.934873);
    var origin;
    Tabletop.init({
        key: code,
        callback: function (sheet, tabletop) {
            for (var i in sheet) {
                var place = sheet[i];
                marker = L.marker([place.lat, place.lon])
                    .addTo(fg)
                    .bindPopup(place.Name)
                origin = new L.LatLng(place.lat, place.lon);
                Geodesic.setLatLngs([[origin, orleans]]);
            }
        },
        simpleSheet: true
    })
0

I've never used Leflet.Geodesic plugin, but from documentation on plugin home page https://github.com/henrythasler/Leaflet.Geodesic it looks like that if you want to draw multiple independant geodesic lines within one Geodesic object you have to do it this way:

var berlin = new L.LatLng(52.5, 13.35);
var losangeles = new L.LatLng(33.82, -118.38);
var capetown = new L.LatLng(-33.91, 18.41);
var sydney = new L.LatLng(-33.91, 151.08);

Geodesic.setLatLngs([[berlin, losangeles], [capetown, sydney]]);
0

Simply instantiate your L.Geodesics inside the for (var i in sheet) loop, like

var fg = L.featureGroup().addTo(map);
var orleans = new L.LatLng(30.053206, -89.934873);
var origin;
Tabletop.init({
    key: code,
    callback: function (sheet, tabletop) {
        for (var i in sheet) {
            var place = sheet[i];
            marker = L.marker([place.lat, place.lon])
                .addTo(fg)
                .bindPopup(place.Name)
            origin = L.latLng(place.lat, place.lon);

            var geodesic = L.geodesic([[origin, orleans]], {
                weight:3,
                opacity:1,
                steps: 50
            }).addTo(fg).addTo(map);

        }
    },
    simpleSheet: true
})
  • This is failing silently? jsfiddle.net/remmi11/dfro5dve/3 – wtgeographer Apr 10 '18 at 22:34
  • Apparently Leaflet.Geodesic needs to be passed an array of arrays of latlngs (i.e. L.geodesic([[origin, orleans]] ,.... See jsfiddle.net/whyqnucf – IvanSanchez Apr 11 '18 at 7:53
  • Thanks! @IvanSanchez This is working perfectly. If you can revise your answer I will mark as correct. – wtgeographer Apr 11 '18 at 16:20
  • Hm, if I may comment, my answer below suggests just this solution, and it was published before Ivan's answer. – TomazicM Apr 12 '18 at 20:08
  • While I'm sure your answer is fundamentally correct @TomazicM, more detail was provided by Ivan to help me implement. – wtgeographer Apr 13 '18 at 15:15

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.