duplicate layer, #170

gulpfile.js

@@ -35,6 +35,7 @@ var vendorJS = [
   './node_modules/jquery/dist/jquery.js',
   './node_modules/browser-filesaver/FileSaver.js',
   './node_modules/shp-write/shpwrite.js',
+  './node_modules/shpjs/dist/shp.js',
   './node_modules/turf/turf.js',
   './node_modules/mapbox.js/dist/mapbox.js' // requires to be built
 ];

package.json

@@ -21,6 +21,7 @@
     "jquery": "^2.1.4",
     "mapbox.js": "^2.1.9",
     "shp-write": "^0.2.4",
+    "shpjs": "^3.2.1",
     "turf": "^2.0.2"
   },
   "devDependencies": {

src/js/layerlist.dropchop.js

@@ -35,6 +35,14 @@ var dropchop = (function(dc) {
       });
     var checkbox = $('<input>').addClass('layer-toggle').prop({'type': 'checkbox', 'checked': true});
     var remove = $('<button>').addClass('layer-remove').html('<i class="fa fa-times"></i>');
+    var duplicate = $('<button>').addClass('layer-duplicate').html('<i class="fa fa-files-o"></i>');
+
+    duplicate.on('click', function(event) {
+      event.preventDefault();
+      console.log('make a dupe');
+      $(dc.layers).trigger('layer:duplicate', [$(this).parent().attr('data-stamp')]);
+      return false;
+    });
 
     remove.on('click', function(event) {
       event.preventDefault();
@@ -43,7 +51,7 @@ var dropchop = (function(dc) {
       return false;
     });
 
-    checkbox.on('change', function(e) {
+    checkbox.on('change', function(event) {
       if (this.checked) {
         // trigger layer:show
         $(dc.map).trigger('layer:show', [layer]);
@@ -59,6 +67,7 @@ var dropchop = (function(dc) {
     layerlistItem.append(layerDiv);
     layerlistItem.append(checkbox);
     layerlistItem.append(remove);
+    layerlistItem.append(duplicate);
     dc.layerlist.$elem.append(layerlistItem);
 
     dc.layerlist.elems[layer.stamp] = layerlistItem;

src/js/layers.dropchop.js

@@ -9,6 +9,7 @@ var dropchop = (function(dc) {
   dc.layers.prepare = function() {
     $(dc.layers).on('file:added', dc.layers.add);
     $(dc.layers).on('layer:removed', dc.layers.remove);
+    $(dc.layers).on('layer:duplicate', dc.layers.duplicate);
   };
 
 /**
@@ -46,6 +47,12 @@ var dropchop = (function(dc) {
 
   };
 
+  dc.layers.duplicate = function(event, stamp) {
+    var lyr = dc.layers.list[stamp];
+    // need to create new layer so we can get a uniqe L.stamp()
+    dc.layers.add({}, 'copy_'+lyr.name, lyr.raw);
+  };
+
   function _makeLayer(name, json) {
     var fl = L.mapbox.featureLayer(json);
 

src/js/ops.file.dropchop.js

@@ -7,7 +7,7 @@ var dropchop = (function(dc) {
 
   dc.ops.file = {
     upload: {
-      description: 'Upload from your computer',
+      description: 'Upload from your computer. Supports .shp',
       icon: '<i class="fa fa-upload"></i>',
       execute: function() {
         // inspired from geojson.io
@@ -21,7 +21,19 @@ var dropchop = (function(dc) {
           .on('change', function() {
             var files = this.files;
             $(files).each(function(i) {
-              dc.util.readFile(files[i]);
+              // var ext = dc.util.getFileExtension(files[i].name);
+
+              // // if it is a shapefile or zip file
+              // if (ext === 'shp' || ext === 'zip') {
+              //   // upload a shapefile and add the layer
+              //   dc.util.readShpFile
+              //   shp("files/pandr").then(function(geojson){
+              //     //do something with your geojson 
+              //   });
+              // } else {
+                dc.util.readFile(files[i]);
+              // }
+
             });
             $blindInput.remove();
           });

src/js/util.dropchop.js

@@ -75,6 +75,10 @@ var dropchop = (function(dc) {
     }
   };
 
+  dc.util.getFileExtension = function(filename) {
+    return filename.substr(filename.lastIndexOf('.')+1);
+  };
+
   return dc;
 
 

src/scss/_general.scss

@@ -154,8 +154,26 @@ $geo-button-width: 100px;
       color: white;
     }
   }
+  .layer-duplicate {
+    border: none;
+    background: #f6f6f6;
+    position: absolute;
+    top: 6px;
+    padding: 5px 6px;
+    right: 35px;
+    text-align: center;
+    display: none;
+    color: $blue;
+    cursor: pointer;
+    border-radius: 50%;
+    &:hover {
+      background: $blue;
+      color: white;
+    }
+  }
   &:hover {
-    .layer-remove {
+    .layer-remove,
+    .layer-duplicate {
       display: block;
     }
   }