Feature: Shape File Upload

src/api/get-shape.js

@@ -1,6 +1,7 @@
 import { get } from 'axios';
 
-export default getShape = async url => {
+const getShape = async url => {
   const res = await get(url);
   return res;
 };
+export default getShape;

src/components/main-app/ol-init.js

@@ -8,13 +8,39 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCompass } from '@fortawesome/free-solid-svg-icons';
 import { handleLocationButton } from 'utils';
 import { setSource } from '../../api/map-data';
-
+import { useSelector } from 'react-redux';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import { GeoJSON, TopoJSON } from 'ol/format';
+const addVectorLayer = (title, type, jsonObj, featureProjection) => {
+  let source, features;
+  if (type === 'geojson') {
+    features = new GeoJSON().readFeatures(jsonObj, { featureProjection });
+    source = new VectorSource({
+      features,
+      format: new GeoJSON(),
+      overlaps: false,
+    });
+  } else if (type === 'topojson') {
+    features = new TopoJSON().readFeatures(jsonObj, { featureProjection });
+    source = new VectorSource({
+      features,
+      format: new TopoJSON(),
+      overlaps: false,
+    });
+  }
+  return new VectorLayer({
+    source,
+    title,
+  });
+};
 export default function OlInit() {
+  const shapeData = useSelector(state => state.shapeData);
   const [shape] = useQueryParam(URL_SHAPE, StringParam);
   const [tiles] = useQueryParam(URL_TILES, StringParam);
   const [colors] = useQueryParam(URL_COLORS, StringParam);
   const [opacity] = useQueryParam(URL_OPACITY, StringParam);
-
+  const prevShapeData = usePrevious(shapeData);
   const prevTiles = usePrevious(tiles);
   const prevShape = usePrevious(shape);
 
@@ -45,8 +71,39 @@ export default function OlInit() {
     if (olInstances.rasterSource) {
       olInstances.rasterSource.refresh();
     }
-  }, [shape, tiles, colors, opacity, prevTiles, prevShape]);
+    if (
+      shapeData &&
+      shapeData.fileType &&
+      shapeData.parsedFileData &&
+      prevShapeData !== shapeData
+    ) {
+      let jsonObj = JSON.stringify(shapeData.parsedFileData);
+      let featureProjection = olInstances.map.getView().getProjection();
+      let title = 'upload-file-layer';
 
+      olInstances.map.getLayers().forEach(vectorLayer => {
+        if (vectorLayer.get('title') === 'upload-file-layer')
+          olInstances.map.removeLayer(vectorLayer);
+      });
+
+      const newShape = addVectorLayer(
+        title,
+        shapeData.fileType,
+        jsonObj,
+        featureProjection
+      );
+      olInstances.map.addLayer(newShape);
+    }
+  }, [
+    shape,
+    tiles,
+    colors,
+    opacity,
+    prevTiles,
+    prevShape,
+    shapeData,
+    prevShapeData,
+  ]);
   return (
     <>
       <div>

src/components/main-app/sidebar-wrapper/index.js

@@ -2,3 +2,4 @@ export { default as TilesInput } from './tiles-input';
 export { default as ShapeInput } from './shape-input';
 export { default as ColorsInput } from './colors-input';
 export { default as AlphaInput } from './alpha-input';
+export { default as ShapeUpload } from './shape-upload';

src/components/main-app/sidebar-wrapper/shape-upload.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { connect, useDispatch } from 'react-redux';
+import {
+  updateShapeData,
+  resetShapeData,
+} from '../../../redux/actions/shape-data-actions';
+
+function ShapeUpload() {
+  const dispatch = useDispatch();
+  const uploadData = e => {
+    if (e.target.files && e.target.files[0]) {
+      resetShapeData();
+      let fr = new FileReader();
+      let shapeFile = e.target.files[0];
+      fr.onload = event => {
+        const fileData = event.target.result;
+        const parsedFileData = JSON.parse(fileData);
+        let fileType;
+        if (parsedFileData[`type`] === 'Topology') {
+          fileType = 'topojson';
+        } else if (parsedFileData[`type`] === 'FeatureCollection') {
+          fileType = 'geojson';
+        }
+        const shapeData = {
+          fileType,
+          parsedFileData,
+        };
+        dispatch(updateShapeData(shapeData));
+      };
+      fr.readAsText(shapeFile);
+    } else {
+      alert('There was an error!');
+    }
+  };
+  return (
+    <>
+      <p>Upload Shape (Topo JSON and Geo JSON)</p>
+      <input
+        type="file"
+        className="upload-button"
+        onChange={uploadData}
+        accept="application/json"
+      />
+    </>
+  );
+}
+
+export default connect(updateShapeData)(ShapeUpload);

src/components/main-app/sidebar.js

@@ -4,9 +4,10 @@ import { StringParam, useQueryParam } from 'use-query-params';
 import { copyColor, getColorsArray, themeToggler } from 'utils';
 import {
   TilesInput,
-  ShapeInput,
   ColorsInput,
   AlphaInput,
+  ShapeInput,
+  ShapeUpload,
 } from './sidebar-wrapper';
 import { ThemeProvider } from 'styled-components';
 import { GlobalStyles } from './themes/global-styles';
@@ -60,6 +61,9 @@ export default function Sidebar({ setTheme, theme }) {
           <ShapeInput />
           <br />
           <br />
+          <ShapeUpload />
+          <br />
+          <br />
           <TilesInput />
           <br />
           <br />
@@ -80,6 +84,19 @@ export default function Sidebar({ setTheme, theme }) {
           <CopyToClipboard text={text}>
             <button className="copy-btn">Copy</button>
           </CopyToClipboard>
+          <a
+            href={`data:text/json;charset=utf-8,${encodeURIComponent(text)}`}
+            download={`${colorFormat}.json`}
+            className="copy-btn"
+            style={{
+              textAlign: 'center',
+              height: '1.15rem',
+              fontSize: '0.85rem',
+              marginRight: '0.5rem',
+            }}
+          >
+            Export
+          </a>
           <br />
           <JSONPretty
             id="json-pretty"

src/components/main-app/themes/global-styles.js

@@ -32,7 +32,11 @@ export const GlobalStyles = createGlobalStyle`
     background-color: ${({ theme }) => theme.background};
     color: ${({ theme }) => theme.text};
   }
-
+  .upload-button {
+    background-color: ${({ theme }) => theme.background};
+    color: ${({ theme }) => theme.text};
+  }
+
   .fa.iconButton, #color-format, .copy-btn{
     background-color: ${({ theme }) => theme.btnBgColor};
     color: ${({ theme }) => theme.btnColor};

src/sass/_app.sass

@@ -89,6 +89,18 @@
     background: #ececec
     margin-top: 5px
 
+.upload-button
+    background: #ececec
+    width: -webkit-fill-available
+    width: -moz-available
+    border: 0
+    padding: 15px
+    font-size: 15px
+    text-align: right;
+    outline: none;
+    cursor: pointer;
+    display: block;
+
 .color-row 
     display: flex
     flex-direction: row