Using shp-write to export as shapefile

10162
11
05-22-2015 05:04 AM
deleted-user-Pi5x1UjkS2PY
New Contributor II

I'm using the advanced draw tools (modified to fit my needs) that Tim Witt has created (Javascript API - Advanced Draw widget )

What I would like to be able to do is allow a user to save his/her changes to a file so that when they can come back in a latter session they can load any markups that they did before.

I found a way to load the files back in if I can zip them all into one file using this (Add shapefile | ArcGIS API for JavaScript ).

However, I've been desperately trying to find a way to create a zip file so that I can save a users drawings.  I ran into this code and downloaded it as it sounds like it will do exactly what I want.  I can't get it to work though.

mapbox/shp-write · GitHub

I want to use this in a function for a save button.

I added this at the top:

<script src='shp-write-master/bundle.js'></script>

I then tried adding in the require statement in the function as you see below but then also at the top where I require everything else as well but my code does not get past my second alert box.  Has anyone used this before and have a simple example of how they called it or know what I am doing wrong here?

function fnSave() {
alert("Still a work in progress");
  var shpwrite = require('shp-write');
alert("Made it middle");
  // (optional) set names for feature types and zipped folder
  var options = {
   folder: 'myshapes',
   //folder: 'L:\Javascript_Mobile\CAD2GIS\myshapes',
   types: {
    point: 'mypoints',
    polygon: 'mypolygons',
    line: 'mylines'
   }
  }
alert("Made it middle"); 
  // a GeoJSON bridge for features
  shpwrite.download({
   type: 'FeatureCollection',
   features: [
    {
     type: 'Feature',
     geometry: {
      type: 'Point',
      coordinates: [0, 0]
     },
     properties: {
      name: 'Foo'
     }
    },
    {
     type: 'Feature',
     geometry: {
      type: 'Point',
      coordinates: [0, 10]
     },
     properties: {
      name: 'Bar'
     }
    }
   ]
  }, options);

  alert("Made it end"); 
};

11 Replies
TimWitt2
MVP Alum

Hey Michael,

If you get it to work please let me know, that would be a great addition to my tool.

Thanks,

Tim

deleted-user-Pi5x1UjkS2PY
New Contributor II

I definitely will.  Are you going to the conference in July? 

0 Kudos
TimWitt2
MVP Alum

I wish I could, but I am located in Florida

0 Kudos
ChrisSmith7
Frequent Contributor

Apologies if this isn't helpful, but I have a runnable app that may get closer to getting in the right direction:

http://runnable.com/VV9H5mX0cJ8jPR39/shp_zip_test-for-node-js

I can get it to a point where ~line 5642 in shpwrite.js logs some content to the app. The commented line above it "location.href = 'data:application/zip;base64,' + content;" is original from github, but it's throwing an error in runnable.

Hope this helps! This is a feature we are looking for as well...

0 Kudos
ChrisSmith7
Frequent Contributor

Just realized "location" is a window function, so it'll error in the VM. The content looks to change when I update the points, so that's probably the file we're looking for (the encoded string written to the console is the shp zip).

0 Kudos
ChrisSmith7
Frequent Contributor

Perfect! This looks like it's working - when I take the output in the console from my runnable app, which is:

UEsDBAoAAAAAACOLtkYAAAAAAAAAAAAAAAAHAAAAbGF5ZXJzL1BLAwQKAAAAAAAji7ZGcWT+b5wAAACcAAAAEAAAAGxheWVycy9QT0lOVC5zaHAAACcKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABO6AMAAAEAAAAAAAAAAAAAAAAAAAAAAA

AAAAAAAAAAAAAAAAAAAAAkQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAoBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAKAQAAAAAAAAAAAAAAAAAAAAAAJEBQSwMECgAAAAAAI4u2Rj3sCVV0AAAAdAAAABAAAABsYXllcnMvUE9JTlQuc2h4AAAn

CgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOugDAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADIAAAAKAAAAQAAAAApQSwMECgAAAAAAI4u2RkyD+u8/AgAAPwIAABAAAABsYXllcnMvUE9JTl

QuZGJmA3MEFgIAAABBAP8AAAAAAAAAAAAAAAAAAAAAAAAAAABuYW1lAAAAAAAAAEMAAAAA/gAAAAAAAAAAAAAAAAAAAAAgRm9vICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg

ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIC

AgICAgICAgICAgICAgICAgQmFyICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg

ICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIBpQSwMECgAAAAAAI4u2RuPBUWqPAAAAjwAAABAAAABsYXllcnMvUE

9JTlQucHJqR0VPR0NTWyJHQ1NfV0dTXzE5ODQiLERBVFVNWyJEX1dHU18xOTg0IixTUEhFUk9JRFsiV0dTXzE5ODQiLDYzNzgxMzcsMjk4LjI1NzIyMzU2M11dLFBSSU1FTVsiR3JlZW53aWNoIiwwXSxVTklUWyJEZWdyZWUiLDAuMDE3NDUzMjkyNTE5OTQzMjk1XV1QSwEC

FAAKAAAAAAAji7ZGAAAAAAAAAAAAAAAABwAAAAAAAAAAABAAAAAAAAAAbGF5ZXJzL1BLAQIUAAoAAAAAACOLtkZxZP5vnAAAAJwAAAAQAAAAAAAAAAAAAAAAACUAAABsYXllcnMvUE9JTlQuc2hwUEsBAhQACgAAAAAAI4u2Rj3sCVV0AAAAdAAAABAAAAAAAAAAAAAAAAAA7w

AAAGxheWVycy9QT0lOVC5zaHhQSwECFAAKAAAAAAAji7ZGTIP67z8CAAA/AgAAEAAAAAAAAAAAAAAAAACRAQAAbGF5ZXJzL1BPSU5ULmRiZlBLAQIUAAoAAAAAACOLtkbjwVFqjwAAAI8AAAAQAAAAAAAAAAAAAAAAAP4DAABsYXllcnMvUE9JTlQucHJqUEsFBgAAAAAFAAUA

LQEAALsEAAAAAA==

Then decode it here:

Base 64 Decoder

I get a .bin file. When renamed to .zip, we get a shapefile:

Just remember to go through shpwrite.js and fix all of the require module paths to reflect your app, and you'll need node.js?

0 Kudos
deleted-user-Pi5x1UjkS2PY
New Contributor II

​I wish I could follow you here as it sounds like you made this work. Can you walk me step by step what needs to happen if I wanted to use this code in something like this example below using a save button?

Advanced Draw

0 Kudos
ChrisSmith7
Frequent Contributor

I'm going to need to look into it some more to see about getting it to work in my own app. It took some trial and error to just to get it working in the node.js VM.

0 Kudos
deleted-user-Pi5x1UjkS2PY
New Contributor II

i understand. Your just doing this a way I'm not familiar with.

0 Kudos