4

I'm building a mobile application with PhoneGap for data collection. I'm able to place map-markers and edit their feature contents. All markers are stored in a L.layerGroup() called markerGroup;

The next step was to create button that saves and stringifies them to GeoJSON. I'm using the easy.button.plugin.

var exportButton = L.easyButton('fa fa-globe', function(){
  //markerDrag.toGeoJSON()
  var data = markerGroup.toGeoJSON();

  // Stringify the GeoJSON
  var convertedData = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data));
  //console.log(JSON.stringify(Standorte.toGeoJSON(), null, 2));
  console.log(JSON.stringify(data, null, 2));

  // Create download but how?

}).addTo(map);

This works so far. If I would work on a computer, I could copy and paste the console log and create my own GeoJSON, but that's not possible in an application. So I'm looking forward for a way to download or export the collected data to a .js.

  • 2
    See stackoverflow.com/questions/13405129/… – ghybs Apr 26 '17 at 5:56
  • @ghybs this doesnt help. This methods are working in regular browsers like forefox or chrome. When using this in my andoird-browser-application nothing happens – howard.D Apr 28 '17 at 10:34
4

You can use the saveAs polyfill developed by Eli Gry. It should work on Chrome for Android browser.

Check the following example:

<!DOCTYPE html>
<html>

<head>
  <title>Leaflet GeoJSON Example</title>
  <meta charset="utf-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />
</head>

<body>
  <div id="map" style="width: 600px; height: 400px"></div>

  <script src="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>
  <script src="./FileSaver.min.js" /></script>

  <script>
    var freeBus = {
      "type": "FeatureCollection",
      "features": [{
          "type": "Feature",
          "geometry": {
            "type": "LineString",
            "coordinates": [
              [-105.00341892242432, 39.75383843460583],
              [-105.0008225440979, 39.751891803969535]
            ]
          },
          "properties": {
            "popupContent": "This is free bus that will take you across downtown.",
          },
          "id": 1
        },
        {
          "type": "Feature",
          "geometry": {
            "type": "LineString",
            "coordinates": [
              [-105.0008225440979, 39.751891803969535],
              [-104.99820470809937, 39.74979664004068]
            ]
          },
          "properties": {
            "popupContent": "This is free bus that will take you across downtown.",
          },
          "id": 2
        },
        {
          "type": "Feature",
          "geometry": {
            "type": "LineString",
            "coordinates": [
              [-104.99820470809937, 39.74979664004068],
              [-104.98689651489258, 39.741052354709055]
            ]
          },
          "properties": {
            "popupContent": "This is free bus that will take you across downtown.",
          },
          "id": 3
        }
      ]
    };
  </script>
  <script>
    function saveToFile(content, filename) {
      var file = filename + '.geojson';
      saveAs(new File([JSON.stringify(content)], file, {
        type: "text/plain;charset=utf-8"
      }), file);
    }

    var map = L.map('map').setView([39.74739, -105], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
    }).addTo(map);

    var layer = L.geoJson(freeBus).addTo(map);

    saveToFile(layer.toGeoJSON(), 'test');
  </script>
</body>

</html>
  • Not working on in-app android browser – howard.D Apr 29 '17 at 14:08

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.