mapbox / shp-write

create and write to shapefiles in pure javascript
BSD 3-Clause "New" or "Revised" License
290 stars 186 forks source link

Include a very basic, complete example as documentation? #122

Open EricDuminil opened 2 months ago

EricDuminil commented 2 months ago

First: thanks for your excellent work!

I'm a HTML+JS noobie, and it would have helped me a lot to see a complete, minimal example, with just HTML+JS:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shapefile Export</title>
  <!-- Import FileSaver.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
  <!-- Import shp-write.js -->
  <script src="https://unpkg.com/@mapbox/shp-write@latest/shpwrite.js"></script>
</head>

<body>
  <button onclick="exportShapefile()">Export Shapefile</button>

  <script>
    function exportShapefile() {
      // Sample data
      var data = {
        type: 'FeatureCollection',
        features: [{
          type: 'Feature',
          properties: {
            name: 'Some polygon'
          },
          geometry: {
            type: 'Polygon',
            coordinates: [[
              [-64.8, 32.3], [-65.5, 18.3], [-80.3, 25.2], [-64.8, 32.3]]]
          }
        }]
      };

      // Save the zip file
      shpwrite.zip(data, { outputType: "blob" }).then(function (zipBlob) {
        saveAs(zipBlob, "my_shapefile.zip");
      });
    }
  </script>
</body>
</html>

It can be run here: https://jsfiddle.net/pd14t8ew/2/

It's really not very different from the existing doc, but it took me a while to find the correct inputs. If you're interested, I could write a corresponding PR for documentation.

charlieforward9 commented 2 months ago

@EricDuminil Hey there! I encourage you create a PR for this repo by editing the readme. I contributed about a year ago to add typescript support and it was a cool experience to make an open source contribution for the first time.

If you want to add a few more options, that would be awesome for making the demo feel more complete.