add shp support

package.json

@@ -79,6 +79,7 @@
     "react-dom": "16.2.0",
     "react-fa": "5.0.0",
     "react-rnd": "7.3.1",
+    "shpjs": "^3.4.2",
     "url-parse": "1.2.0",
     "validator": "9.4.1"
   },

src/HigherOrderComponent/DropTargetMap/DropTargetMap.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import OlFormatGeoJSON from 'ol/format/geojson';
 import OlLayerVector from 'ol/layer/vector';
 import OlSourceVector from 'ol/source/vector';
+import shp from 'shpjs';
 
 /**
  * HOC that adds layers to the map if GeoJSON files are dropped on it.
@@ -21,25 +22,47 @@ export function onDropAware(WrappedComponent) {
       map: PropTypes.object
     }
 
+    addGeojsonLayer = json => {
+      const format = new OlFormatGeoJSON();
+      const features = format.readFeatures(json);
+      const layer = new OlLayerVector({
+        source: new OlSourceVector({
+          features: features
+        })
+      });
+
+      this.props.map.addLayer(layer);
+    }
+
+    readGeojsonFile = file => {
+      const reader = new FileReader();
+      reader.readAsText(file);
+      reader.addEventListener('loadend', () => {
+        const content = reader.result;
+        this.addGeojsonLayer(content);
+      });
+    }
+
+    readShpFile = file => {
+      const reader = new FileReader();
+      reader.readAsArrayBuffer(file);
+      reader.addEventListener('loadend', () => {
+        const blob = reader.result;
+        shp(blob).then(this.addGeojsonLayer);
+      });
+    }
+
     onDrop = event => {
       event.preventDefault();
       const files = event.dataTransfer.files;
-      const format = new OlFormatGeoJSON();
       if (files.length > 0) {
         for (let i = 0; i < files.length; ++i) {
-          const reader = new FileReader();
-          reader.readAsText(files[i]);
-          reader.addEventListener('loadend', () => {
-            const content = reader.result;
-            const features = format.readFeatures(content);
-            const layer = new OlLayerVector({
-              source: new OlSourceVector({
-                features: features
-              })
-            });
-
-            this.props.map.addLayer(layer);
-          });
+          const file = files[i];
+          if (file.name.match(/\.zip$/g)) {
+            this.readShpFile(file);
+          } else {
+            this.readGeojsonFile(file);
+          }
         }
       }
     }