Merge pull request #576 from saricicekibrahim/templatelayer

added shapefile & geojson temporary layer support

app/static/app/js/classes/TempLayer.js

@@ -0,0 +1,99 @@
+import shp from 'shpjs';
+import Spinner from 'spin';
+
+export function addTempLayer(file, _this) {
+  let maxSize = 5242880;
+
+  //random color for each feature
+  let getColor = () => {
+    return 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
+  }
+
+  //notifications on top
+  let writeMessage = (_err) => {
+    _this.setState({ error: _err.message || JSON.stringify(_err) });
+    spinner.stop();
+  }
+
+  //show wait spinner
+  var spinner = new Spinner({ color: '#fff', lines: 12 }).spin(_this.map._container);
+
+  if (file && file.size > maxSize) {
+    let err = {};
+    err.message = file.name + " is bigger than 5 MB.";
+    writeMessage(err);
+  } else {
+    //get just the first file
+    //file = file[0];
+    let reader = new FileReader();
+    let isZipFile = file.name.slice(-3) === 'zip';
+    if (isZipFile) {
+      //zipped shapefile
+      reader.onload = function () {
+        if (reader.readyState != 2 || reader.error) {
+          return;
+        } else {
+          shp(reader.result).then(function (geojson) {
+            addLayer(geojson);
+          }).catch(function (err) {
+            err.message = "Not a proper zipped shapefile " + file.name;
+            writeMessage(err);
+          })
+        }
+      }
+      reader.readAsArrayBuffer(file);
+    } else {
+      //geojson file
+      reader.onload = function () {
+        try {
+          let geojson = JSON.parse(reader.result);
+          addLayer(geojson);
+        } catch (err) {
+          err.message = "Not a proper json file " + file.name;
+          writeMessage(err);
+        }
+      }
+      reader.readAsText(file);
+    }
+  }
+
+  let addLayer = (_geojson) => {
+    let tempLayer =
+      L.geoJson(_geojson, {
+        style: function (feature) {
+          return {
+            opacity: 1,
+            fillOpacity: 0.7,
+            color: getColor()
+          }
+        },
+        //for point layers
+        pointToLayer: function (feature, latlng) {
+          return L.circleMarker(latlng, {
+            radius: 6,
+            color: getColor(),
+            opacity: 1,
+            fillOpacity: 0.7
+          });
+        },
+        //
+        onEachFeature: function (feature, layer) {
+          if (feature.properties) {
+            if (feature.properties) {
+              layer.bindPopup(Object.keys(feature.properties).map(function (k) {
+                return k + ": " + feature.properties[k];
+              }).join("<br />"), {
+                  maxHeight: 200
+                });
+            }
+          }
+        }
+      });
+    tempLayer.addTo(_this.map);
+    //add layer to layer switcher with file name
+    _this.autolayers.addOverlay(tempLayer, file.name);
+    //zoom to all features
+    _this.map.fitBounds(tempLayer.getBounds());
+    spinner.stop();
+  }
+}

app/static/app/js/components/Map.jsx

@@ -7,11 +7,13 @@ import '../vendor/leaflet/L.Control.MousePosition.css';
 import '../vendor/leaflet/L.Control.MousePosition';
 import '../vendor/leaflet/Leaflet.Autolayers/css/leaflet.auto-layers.css';
 import '../vendor/leaflet/Leaflet.Autolayers/leaflet-autolayers';
+import Dropzone from '../vendor/dropzone';
 import $ from 'jquery';
 import ErrorMessage from './ErrorMessage';
 import SwitchModeButton from './SwitchModeButton';
 import ShareButton from './ShareButton';
 import AssetDownloads from '../classes/AssetDownloads';
+import {addTempLayer} from '../classes/TempLayer';
 import PropTypes from 'prop-types';
 import PluginsAPI from '../classes/plugins/API';
 import Basemaps from '../classes/Basemaps';
@@ -172,6 +174,15 @@ class Map extends React.Component {
   }
 
   componentDidMount() {
+    var thisComponent = this;
+    var mapTempLayerDrop = new Dropzone(this.container, {url : "/", clickable : false});
+    mapTempLayerDrop.on("addedfile", function(file) {
+      addTempLayer(file, thisComponent);
+    });
+    mapTempLayerDrop.on("error", function(file) {
+      mapTempLayerDrop.removeFile(file);
+    });
+    
     const { showBackground, tiles } = this.props;
 
     this.map = Leaflet.map(this.container, {

package.json

@@ -56,7 +56,9 @@
     "react-test-renderer": "^15.6.1",
     "regenerator-runtime": "^0.11.0",
     "sass-loader": "^7.0.3",
+    "shpjs": "^3.4.2",
     "sinon": "^4.0.0",
+    "spin": "0.0.1",
     "statuses": "^1.3.1",
     "style-loader": "^0.13.1",
     "tween.js": "^16.6.0",