0

I have created an option in my Leaflet.js web map that exports clicked lines as GPX, but it is just exports only the last clicked line. I need to export all clicked/highlighted/selected lines in one GPX file.

Here is my code:

$.getJSON('data/routes/Download/Nwn.geojson', function (collection) {
    Nwn = L.geoJson(collection, {
      'style': function () {
        return {
          'color': '#FFFF00',
          'weight': 3,
          'opacity': 0
        }
      }, onEachFeature: function(feature, layer) {
        layer.on('click', function() {
            document.getElementById('exportHiking').onclick = function() {
                var toJson = layer.toGeoJSON();
                var dGpx = togpx(toJson);
                document.getElementById('exportHiking').setAttribute('href', 'data:text/json;charset=utf-8,' + dGpx);
                document.getElementById('exportHiking').setAttribute('download','route.gpx');
            };
        })
        var timesClicked = 0;
        layer.on('click', function() {
          Nwn.resetStyle(layer);
          layer.setStyle({color: '#FFFF00', opacity: 1});
          timesClicked++;
          if(timesClicked>1) {
            Nwn.resetStyle(layer);
            timesClicked = 0;
          }
        });
        //   Nwn.resetStyle(layer);
      },
      distanceMarkers: { showAll: 11, offset: 1000000, cssClass: 'some-other-class', iconSize: [16, 16] }
    }).addTo(NwnGroupe);
    map.addLayer(NwnGroupe);
});

How it could be done?

1 Answer 1

1

Loop through layers in NwnGroupe layer group, check (by the color) which are selected ones, add them to JSON object and then convert to GPX:

document.getElementById('exportHiking').onclick = function() {
    var toJson = L.geoJSON();
    NwnGroupe.eachLayer(function(layer) {
      if (layer.options.color == '#FFFF00') {
        toJson.addData(layer.toGeoJSON());
      }
    });
    var dGpx = togpx(toJson);
    document.getElementById('exportHiking').setAttribute('href', 'data:text/json;charset=utf-8,' + dGpx);
    document.getElementById('exportHiking').setAttribute('download','route.gpx');
};

I haven't tested it but it should work.

9
  • I have tested it, but it can't read property of color. So i have replaced "option" with "options", but it exports an empty GPX. I am not sure it should be "option" or "options". Commented Apr 2, 2019 at 1:46
  • You are right, it's options. I modified my answer.
    – TomazicM
    Commented Apr 2, 2019 at 18:49
  • but it still not working, it exports an empty gpx file. Commented Apr 3, 2019 at 7:23
  • Then debug execution in browser (F12). Set breakpoint at if (layer.options.color == '#FFFF00') statement and see what's actually happening there.
    – TomazicM
    Commented Apr 3, 2019 at 7:52
  • It shows this statement in the console (warning: unsupported geometry type: undefined), and exports an empty gpx file. Is this an issue about getting selected lines as GeoJSON? or about converting it into GPX? Commented Apr 3, 2019 at 10:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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