save as geojson, #170

gulpfile.js

@@ -33,6 +33,8 @@ gulp.task('mapbox_assets', function() {
 
 var vendorJS = [
   './node_modules/jquery/dist/jquery.js',
+  './node_modules/browser-filesaver/FileSaver.js',
+  './node_modules/shp-write/shpwrite.js',
   './node_modules/turf/turf.js',
   './node_modules/mapbox.js/dist/mapbox.js' // requires to be built
 ];

package.json

@@ -15,12 +15,12 @@
     "test": "gulp test"
   },
   "dependencies": {
-    "browser-filesaver": "^1.0.0",
+    "browser-filesaver": "^1.1.0",
     "font-awesome": "^4.4.0",
     "geoglyphs": "0.0.10",
     "jquery": "^2.1.4",
     "mapbox.js": "^2.1.9",
-    "shp-write": "^0.2.1",
+    "shp-write": "^0.2.4",
     "turf": "^2.0.2"
   },
   "devDependencies": {

src/js/ops.dropchop.js

@@ -11,20 +11,32 @@ var dropchop = (function(dc) {
     dc.$elem.append(geoContainer);
 
     // create geo buttons & forms
-    for (var op in dc.ops.geo) {
-      var btn = $('<button>').addClass('operation operation-geo operation-inactive')
-        .text(op)
+    for (var geoOp in dc.ops.geo) {
+      var geoBtn = $('<button>').addClass('operation operation-geo operation-inactive')
+        .text(geoOp)
         .prop('disabled', true)
-        .attr('data-operation', op);
-      btn.on('click', _geoBtnClick);
+        .attr('data-operation', geoOp);
+      geoBtn.on('click', _geoBtnClick);
 
-      geoContainer.append(btn);
+      geoContainer.append(geoBtn);
     }
 
     // when layers are selected or unselected, lets check our geo operations
     $(dc.ops).on('layer:selected', dc.ops.geoCheck);
     $(dc.ops).on('layer:unselected', dc.ops.geoCheck);
     $(dc.ops).on('operation:geo', dc.ops.geoExecute);
+
+    // setup ops file
+    var leftMenu = $('<div>').addClass('dropchop-menu-left');
+    for (var fileOp in dc.ops.file) {
+      var fileBtn = $('<button>').addClass('menu-action')
+        .html(dc.ops.file[fileOp].icon || 'A')
+        .attr('data-operation', fileOp)
+        .attr('data-tooltip', dc.ops.file[fileOp].description);
+      fileBtn.on('click', _fileBtnClick);
+      leftMenu.append(fileBtn);
+    }
+    dc.$elem.append(leftMenu);
   };
 
   function _createGeoForm(operation) {
@@ -44,6 +56,18 @@ var dropchop = (function(dc) {
     $(dc.form).trigger('form:geo', [operation]);
   }
 
+  function _fileBtnClick(event) {
+    event.preventDefault();
+
+    var operation = $(this).attr('data-operation');
+    try {
+      dc.ops.file[operation].execute();
+    } catch (err) {
+      dc.notify('error', 'This operation doesn\'t exist!');
+      throw err;
+    }
+  }
+
   /**
    * Execute a turf function based on button operation click.
    * @param {object} original event that triggered this function

src/js/ops.file.dropchop.js

@@ -0,0 +1,86 @@
+var dropchop = (function(dc) {
+
+  'use strict';
+
+  dc = dc || {};
+  dc.ops = dc.ops || {};
+
+  dc.ops.file = {
+    'save-geojson': {
+      minFeatures: 1,
+      description: 'Save as GeoJSON',
+      icon: '<i class="fa fa-file-code-o"></i>',
+      parameters: [
+        {
+          name: 'filename',
+          description :'Filename prefix to write',
+          default: 'dnc'
+        }
+      ],
+      createsLayer: false,
+      execute: function() {
+        $(dc.selection.list).each(function(i) {
+          var content = JSON.stringify(dc.selection.list[i].raw);
+          var title = 'dropchop_' + dc.selection.list[i].name + '.geojson';
+          saveAs(new Blob([content], {
+            type: 'text/plain;charset=utf-8'
+          }), title);
+
+        });
+      }
+    },
+
+    'save-shapefile': {
+        minFeatures: 1,
+        description: 'Save as Shapefile',
+        icon: '<i class="fa fa-file"></i>',
+        createsLayer: false
+    },
+
+    remove: {
+        minFeatures: 1,
+        description: 'Remove selected layers',
+        icon: '<i class="fa fa-trash-o"></i>',
+        disableForm: true,
+    },
+    upload: {
+        description: 'Upload from your computer',
+        icon: '<i class="fa fa-upload"></i>',
+        parameters: [
+            {
+                description: 'File to upload.',
+                type: 'file',
+                extra: 'multiple',
+            }
+        ]
+    },
+
+    'load-url': {
+        description: 'Import file from a URL',
+        icon: '<i class="fa fa-link"></i>',
+        parameters: [
+            {
+                name: 'url',
+                description :'URL',
+                type: 'text',
+                default: 'http://',
+            },
+        ],
+    },
+
+    'load-gist': {
+        description: 'Import files from Gist',
+        icon: '<i class="fa fa-github"></i>',
+        parameters: [
+            {
+                name: 'gist',
+                description :'Gist ID or URL',
+                type: 'text',
+            },
+        ],
+    }
+  };
+
+  return dc;
+
+})(dropchop || {});