added support for geojson format url

package.json

@@ -3,34 +3,34 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.34",
-    "@fortawesome/free-solid-svg-icons": "^5.15.2",
-    "@fortawesome/react-fontawesome": "^0.1.14",
-    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^11.2.0",
-    "@testing-library/user-event": "^12.2.2",
-    "axios": "^0.21.1",
-    "history": "^5.0.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.16",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.24.0",
+    "history": "^5.2.0",
     "loadash": "^1.0.0",
-    "node-sass": "^4.14.1",
-    "ol": "^6.4.3",
-    "ol-geocoder": "^4.1.1",
-    "query-string": "^6.13.7",
+    "node-sass": "^7.0.0",
+    "ol": "^6.9.0",
+    "ol-geocoder": "^4.1.2",
+    "query-string": "^7.0.1",
     "rainbowvis.js": "^1.0.1",
-    "react": "^17.0.1",
+    "react": "^17.0.2",
     "react-color": "^2.19.3",
-    "react-copy-to-clipboard": "^5.0.3",
-    "react-dom": "^17.0.1",
+    "react-copy-to-clipboard": "^5.0.4",
+    "react-dom": "^17.0.2",
     "react-json-pretty": "^2.2.0",
-    "react-redux": "^7.2.2",
+    "react-redux": "^7.2.6",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.0",
-    "react-use": "^15.3.4",
-    "redux": "^4.0.5",
-    "styled-components": "^5.2.1",
-    "use-query-params": "^1.1.9",
-    "web-vitals": "^0.2.4"
+    "react-scripts": "5.0.0",
+    "react-use": "^17.3.1",
+    "redux": "^4.1.2",
+    "styled-components": "^5.3.3",
+    "use-query-params": "^1.2.3",
+    "web-vitals": "^2.1.2"
   },
   "scripts": {
     "check-pretty": "prettier --config .prettierrc --ignore-path .prettierignore --check \"src/**/*.{js,html,md,json,sass}\"",
@@ -59,6 +59,6 @@
     ]
   },
   "devDependencies": {
-    "prettier": "^2.2.1"
+    "prettier": "^2.5.1"
   }
 }

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

@@ -10,14 +10,49 @@ import { handleLocationButton } from 'utils';
 import { setSource } from '../../api/map-data';
 import { FOOTER_ICON } from 'config';
 
+import { useSelector } from 'react-redux';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import { GeoJSON, TopoJSON } from 'ol/format';
+
+const addClipLayer = (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 === 'json') {
+    features = new TopoJSON().readFeatures(jsonObj, { featureProjection });
+    source = new VectorSource({
+      features,
+      format: new TopoJSON(),
+      overlaps: false,
+    });
+  }
+
+  const newShape = new VectorLayer({
+    source,
+    title,
+  });
+
+  return { newShape };
+};
+
 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 });
@@ -53,7 +88,44 @@ 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 } = addClipLayer(
+        title,
+        shapeData.type,
+        jsonObj,
+        featureProjection
+      );
+
+      if (olInstances.map) {
+        let map = olInstances.map;
+        newShape.setMap(map);
+      }
+    }
+  }, [
+    shape,
+    tiles,
+    colors,
+    opacity,
+    prevTiles,
+    prevShape,
+    shapeData,
+    prevShapeData,
+  ]);
 
   return (
     <>
@@ -65,7 +137,7 @@ export default function OlInit() {
             </button>
           </div>
         </div>
-        <div id="popup" class="ol-popup">
+        <div id="popup" className="ol-popup">
           <div className="powered">
             Powered by{' '}
             <a href="http://blueskyhq.in/" target="_blank" rel="noreferrer">
@@ -82,7 +154,12 @@ export default function OlInit() {
           </div>
           <div className="badges">
             {FOOTER_ICON.map(footer => (
-              <a href={footer.url} target="_blank" rel="noreferrer">
+              <a
+                key={footer.label}
+                href={footer.url}
+                target="_blank"
+                rel="noreferrer"
+              >
                 <img src={footer.img} alt={footer.label} />
               </a>
             ))}

src/components/main-app/ol/clip-raster.js

@@ -1,17 +1,24 @@
 import { Vector as VectorLayer } from 'ol/layer';
 import { Vector as VectorSource } from 'ol/source';
-import { TopoJSON } from 'ol/format';
+import { TopoJSON, GeoJSON } from 'ol/format';
 import { getVectorContext } from 'ol/render';
 import { Fill, Style, Stroke } from 'ol/style';
 
 /**
  * @param {*} rasterLayer = Raster layer map instance generated from OL map init
  */
+
+function get_url_extension(url) {
+  if (url) {
+    return url.split(/[#?]/)[0].split('.').pop().trim();
+  }
+}
+
 export default function clipRasterLayer({ rasterLayer, shape }) {
-  //Create cliping layer from topojson
+  const urlExtension = get_url_extension(shape);
   const shapeSource = new VectorSource({
     url: shape,
-    format: new TopoJSON(),
+    format: urlExtension === 'geojson' ? new GeoJSON() : new TopoJSON(),
     overlaps: false,
   });
 
@@ -54,6 +61,5 @@ export default function clipRasterLayer({ rasterLayer, shape }) {
     });
     e.context.globalCompositeOperation = 'source-over';
   });
-
   return { clipLayer, boundaryLayer, shapeSource };
 }

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

@@ -38,7 +38,6 @@ export default function olMain({ shape, tiles, colors, opacity }) {
   rasterLayer = loadRaster.rasterLayer;
   rasterSource = loadRaster.rasterSource;
   rasterColorSource = loadRaster.rasterColorSource;
-
   const clipRaster = clipRasterLayer({ rasterLayer, shape });
   const clipLayer = clipRaster.clipLayer;
   const boundaryLayer = clipRaster.boundaryLayer;

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/shape-input.js

@@ -7,7 +7,7 @@ export default function ShapeInput() {
 
   return (
     <>
-      <p>Shape URL (Only Topo JSON)</p>
+      <p>Shape URL ( Topo & Geo JSON ) </p>
       <input
         type="text"
         value={shape}

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

@@ -0,0 +1,54 @@
+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,.json';
+  const dispatch = useDispatch();
+
+  const handleShapeFile = () => {
+    if (!file) {
+      alert('no file exist please select file');
+    } else {
+      let fileReader = new FileReader();
+
+      fileReader.onload = e => {
+        const type = file.name.split('.').pop();
+        const data = e.target.result;
+
+        if (JSON.parse(data)) {
+          const shapeData = {
+            type,
+            data,
+          };
+          dispatch(updateShapeData(shapeData));
+        }
+      };
+      fileReader.readAsText(file);
+    }
+  };
+
+  return (
+    <>
+      <p>upload shape files(Topo & Geo JSON)</p>
+
+      <div className="container-background">
+        <div className="second-container">
+          <input
+            type="file"
+            className="input-text"
+            onChange={e => {
+              setFile(e.target.files[0]);
+            }}
+            accept={fileTypes}
+          />
+
+          <button id="btn" onClick={() => handleShapeFile()}>
+            upload
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}

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';
@@ -61,6 +62,9 @@ export default function Sidebar({ setTheme, theme }) {
             </label>
           </div>
           <hr />
+          <UploadShapeFile />
+          <br />
+          <br />
           <ShapeInput />
           <br />
           <br />

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

@@ -36,6 +36,16 @@ export const GlobalStyles = createGlobalStyle`
     background-color: ${({ theme }) => theme.background};
     color: ${({ theme }) => theme.text};
   }
+
+  .container-background {
+    background-color: ${({ theme }) => theme.background};
+    color: ${({ theme }) => theme.text};
+    display: ${'flex'};
+  }
+
+  .second-container {
+    margin-top: ${'-5px'};
+  }
 
   .input-text-slider {
     background-color: ${({ theme }) => theme.background};

src/sass/_app.sass

@@ -215,6 +215,20 @@
   align-items: center
   margin-top: 2%
 
+#btn
+    position: absolute
+    right: 23px
+    background: #87ceeb
+    color: white
+    border: none
+    border-radius: 6px
+    padding: 5px
+    width: 5rem
+    margin: 0.6rem
+    height: 30px
+    margin-top: 15px
+
+
 @media only screen and (max-width: 1440px)
     .sidebar
         width: 400px
@@ -225,4 +239,10 @@
 
 @media only screen and (max-width: 1280px)
     .sidebar
-        width: 360px
+        width: 360px
+
+
+
+
+
+