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

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.

  • 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". – Eslam Farag Apr 2 '19 at 1:46
  • You are right, it's options. I modified my answer. – TomazicM Apr 2 '19 at 18:49
  • but it still not working, it exports an empty gpx file. – Eslam Farag Apr 3 '19 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 Apr 3 '19 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? – Eslam Farag Apr 3 '19 at 10:53

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.