Feature - Upload Shape File

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

@@ -8,15 +8,47 @@ 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 addNewVectorLayer = (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 [shape] = useQueryParam(URL_SHAPE, StringParam);
   const [tiles] = useQueryParam(URL_TILES, StringParam);
   const [colors] = useQueryParam(URL_COLORS, StringParam);
   const [opacity] = useQueryParam(URL_OPACITY, StringParam);
 
+  const shapeData = useSelector(state => state.shapeData);
+
   const prevTiles = usePrevious(tiles);
   const prevShape = usePrevious(shape);
+  const prevShapeData = usePrevious(shapeData);
 
   useEffect(() => {
     const olInstances = olMain({ shape, tiles, colors, opacity });
@@ -45,7 +77,40 @@ export default function OlInit() {
     if (olInstances.rasterSource) {
       olInstances.rasterSource.refresh();
     }
-  }, [shape, tiles, colors, opacity, prevTiles, prevShape]);
+
+    if (
+      shapeData &&
+      shapeData.type &&
+      shapeData.data &&
+      prevShapeData !== shapeData
+    ) {
+      let jsonObj = JSON.parse(shapeData.data);
+      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 = addNewVectorLayer(
+        title,
+        shapeData.type,
+        jsonObj,
+        featureProjection
+      );
+      olInstances.map.addLayer(newShape);
+    }
+  }, [
+    shape,
+    tiles,
+    colors,
+    opacity,
+    prevTiles,
+    prevShape,
+    shapeData,
+    prevShapeData,
+  ]);
 
   return (
     <>

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 UploadShapeFile } from './upload-shape-file';

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

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { updateShapeData } from 'redux/actions/shape-data-actions';
+
+export default function UploadShapeFile() {
+  const [file, setFile] = useState();
+  const fileTypes = '.geojson, .topojson';
+  const dispatch = useDispatch();
+
+  const handleShapeFileUpload = () => {
+    if (file == null) {
+      alert('No file chosen or file does not exist.');
+    } else {
+      let fileReader = new FileReader();
+
+      fileReader.onload = evt => {
+        const type = file.name.split('.').pop();
+        const data = evt.target.result;
+
+        if (JSON.parse(data)) {
+          const shapeData = {
+            type,
+            data,
+          };
+          dispatch(updateShapeData(shapeData));
+        }
+      };
+
+      fileReader.readAsText(file);
+    }
+  };
+
+  return (
+    <>
+      <p>Upload Shape File</p>
+      <input
+        type="file"
+        className="input-text"
+        onChange={evt => {
+          setFile(evt.target.files[0]);
+        }}
+        accept={fileTypes}
+      />
+      <button
+        onClick={() => handleShapeFileUpload()}
+        className="copy-btn"
+        id="upload-btn"
+      >
+        Upload
+      </button>
+    </>
+  );
+}

src/components/main-app/sidebar.js

@@ -7,6 +7,7 @@ import {
   ShapeInput,
   ColorsInput,
   AlphaInput,
+  UploadShapeFile,
 } from './sidebar-wrapper';
 import { ThemeProvider } from 'styled-components';
 import { GlobalStyles } from './themes/global-styles';
@@ -57,6 +58,9 @@ export default function Sidebar({ setTheme, theme }) {
             </label>
           </div>
           <hr />
+          <UploadShapeFile />
+          <br />
+          <br />
           <ShapeInput />
           <br />
           <br />

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

@@ -7,6 +7,11 @@ export const GlobalStyles = createGlobalStyle`
     transition: all 0.5s linear;
   }
 
+  #upload-btn {
+    background-color: ${({ theme }) => theme.altBtnBgColor};
+    color: ${({ theme }) => theme.altBtnColor};
+  }
+
   #json-pretty > pre::-webkit-scrollbar-thumb{
     background-color: ${({ theme }) => theme.scroll};
   }

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

@@ -4,6 +4,8 @@ export const lightTheme = {
   background: '#ececec',
   btnBgColor: '#000',
   btnColor: '#FFF',
+  altBtnBgColor: '#000',
+  altBtnColor: '#FFF',
   scroll: '#000',
   jsonKey: '#b553bf',
   jsonValue: '#1e1e1e',
@@ -17,6 +19,8 @@ export const darkTheme = {
   background: '#223547',
   btnBgColor: '#223547',
   btnColor: '#FFF',
+  altBtnBgColor: '#15202B',
+  altBtnColor: '#FFF',
   scroll: '#15202B',
   jsonKey: 'red',
   jsonValue: 'orange',

src/sass/_app.sass

@@ -190,6 +190,11 @@
   align-items: center
   margin-top: 2%
 
+#upload-btn
+    position: absolute
+    right: 2rem
+    top: 9.9rem
+
 @media only screen and (max-width: 1440px)
     .sidebar
         width: 400px