added new baselayer with various styling

.env.development

@@ -0,0 +1,6 @@
+REACT_APP_MAPBOX_STYLE_ACCESS_TOKEN=pk.eyJ1Ijoic2hpdmFtLXNvbmkiLCJhIjoiY2t3OTFhdTFiMDR0OTJucWxhdG13bnk0dSJ9.eV9aMwxPXkIDz9DkUe5HdA
+REACT_APP_MAPBOX_LIGHT_STYLE=https://api.mapbox.com/styles/v1/shivam-soni/ckvb1lz88098p16s55aog1tvv/tiles/256/{z}/{x}/{y}
+REACT_APP_MAPBOX_DARK_STYLE=https://api.mapbox.com/styles/v1/shivam-soni/ckvb1pult2aon14mt5de2lc79/tiles/256/{z}/{x}/{y}
+REACT_APP_MAPBOX_SATELLITE_STYLE=https://api.mapbox.com/styles/v1/shivam-soni/ckvb1rchjc1ut14s7lsi66s3g/tiles/256/{z}/{x}/{y}
+REACT_APP_MAPBOX_STREETS_STYLE=https://api.mapbox.com/styles/v1/shivam-soni/ckvb1sp6h4svu15t5h7snxwgc/tiles/256/{z}/{x}/{y}
+REACT_APP_MAPBOX_GREEN_STYLE=https://api.mapbox.com/styles/v1/shivam-soni/ckvb1tksh05ts14mxll1ykm7s/tiles/256/{z}/{x}/{y}

.gitignore

@@ -12,7 +12,6 @@
 
 #lambda
 /lambda
-
 /src/style/dist/components
 
 # misc
@@ -27,7 +26,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
 yarn.lock
-
 build/**

package.json

@@ -3,34 +3,35 @@
   "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.14.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.24.0",
+    "history": "^5.0.1",
     "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": "^6.0.1",
+    "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-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-redux": "^7.2.6",
+    "react-router": "^5.2.1",
+    "react-router-dom": "^5.3.0",
+    "react-scripts": "4.0.3",
+    "react-tippy": "^1.4.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 +60,6 @@
     ]
   },
   "devDependencies": {
-    "prettier": "^2.2.1"
+    "prettier": "^2.4.1"
   }
 }

src/api/map-data.js

@@ -1,4 +1,4 @@
-let source = {};
+export let source = {};
 
 export const setSource = mapSource => {
   source = mapSource;

src/components/main-app/imgToggle.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+function ImgToggler(props) {
+  const { imgalt, imgsrc, onChangeBaseLayer, url } = props;
+  return (
+    <>
+      <span
+        key={imgalt}
+        className="toggle"
+        onClick={e => onChangeBaseLayer(imgalt, url)}
+      >
+        <img className="imgstyle" src={imgsrc} alt={imgalt} />
+        <p className="title">{imgalt}</p>
+      </span>
+    </>
+  );
+}
+
+export default ImgToggler;

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

@@ -1,33 +1,54 @@
 import React, { useEffect } from 'react';
 import olMain from './ol/main';
 import 'ol/ol.css';
-import { URL_SHAPE, URL_TILES, URL_COLORS, URL_OPACITY } from 'config';
+import {
+  URL_SHAPE,
+  URL_TILES,
+  URL_COLORS,
+  URL_OPACITY,
+  URL_BASE_LAYER,
+  URL_UPDATE_PUSH,
+} from 'config';
 import { useQueryParam, StringParam } from 'use-query-params';
 import { usePrevious } from 'react-use';
 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 { FOOTER_ICON } from 'config';
+import { FOOTER_ICON, TOGGLE_ITEM } from 'config';
+
+import { getBaseMapUrl } from 'utils';
+import ImgToggler from './imgToggle';
 
 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 [baseLayer, onChangeBaseLayer] = useQueryParam(
+    URL_BASE_LAYER,
+    StringParam
+  );
+
   const prevTiles = usePrevious(tiles);
   const prevShape = usePrevious(shape);
+  const prevBaseLayer = usePrevious(baseLayer);
 
   useEffect(() => {
-    const olInstances = olMain({ shape, tiles, colors, opacity });
+    const olInstances = olMain({ shape, tiles, colors, opacity, baseLayer });
     setSource(olInstances.map.getLayers().getArray()[0].values_.source);
 
     if (olInstances.rasterSource && shape && prevTiles !== tiles) {
       olInstances.rasterSource.setUrl(tiles);
       olInstances.rasterSource.refresh();
     }
 
+    if (olInstances.baseMapSource && baseLayer && prevBaseLayer !== baseLayer) {
+      olInstances.baseMapSource.setUrl(getBaseMapUrl(baseLayer));
+      olInstances.baseMapSource.refresh();
+    }
+
     if (olInstances.shapeSource && shape && prevShape !== shape) {
       olInstances.shapeSource.setUrl(shape);
       olInstances.shapeSource.refresh();
@@ -53,7 +74,16 @@ export default function OlInit() {
     if (olInstances.rasterSource) {
       olInstances.rasterSource.refresh();
     }
-  }, [shape, tiles, colors, opacity, prevTiles, prevShape]);
+  }, [
+    shape,
+    tiles,
+    colors,
+    opacity,
+    prevTiles,
+    prevShape,
+    baseLayer,
+    prevBaseLayer,
+  ]);
 
   return (
     <>
@@ -65,7 +95,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">
@@ -80,9 +110,26 @@ export default function OlInit() {
               Mapbox
             </a>
           </div>
+
+          <div className="toggle-block">
+            {TOGGLE_ITEM.map(toggle => (
+              <ImgToggler
+                imgsrc={toggle.imgsrc}
+                imgalt={toggle.imgalt}
+                onChangeBaseLayer={onChangeBaseLayer}
+                url={URL_UPDATE_PUSH}
+              />
+            ))}
+          </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/base-layer.js

@@ -0,0 +1,16 @@
+import XYZ from 'ol/source/XYZ';
+import { Tile as TileLayer } from 'ol/layer';
+
+export function baseMapLayerLoader(url) {
+  const baseMapSource = new XYZ({
+    url,
+  });
+
+  const baseMapLayer = new TileLayer({
+    className: true,
+    preload: Infinity,
+    source: baseMapSource,
+  });
+
+  return { baseMapSource, baseMapLayer };
+}

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

@@ -1,14 +1,14 @@
 import { Vector as VectorLayer } from 'ol/layer';
 import { Vector as VectorSource } from 'ol/source';
 import { TopoJSON } 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
  */
 export default function clipRasterLayer({ rasterLayer, shape }) {
-  //Create cliping layer from topojson
   const shapeSource = new VectorSource({
     url: shape,
     format: new TopoJSON(),

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

@@ -1,24 +1,15 @@
 import Map from 'ol/Map';
-import XYZ from 'ol/source/XYZ';
-import { Tile as TileLayer } from 'ol/layer';
 import View from 'ol/View';
-import { BASEMAP_LIGHT_STYLE } from 'config';
 
-export default function initMap({ rasterLayer, clipLayer, boundaryLayer }) {
+export default function initMap({
+  rasterLayer,
+  clipLayer,
+  boundaryLayer,
+  baseMapLayer,
+}) {
   return new Map({
     target: 'map',
     view: new View({ center: [0, 0], zoom: 0 }),
-    layers: [
-      new TileLayer({
-        className: true,
-        preload: Infinity,
-        source: new XYZ({
-          url: BASEMAP_LIGHT_STYLE,
-        }),
-      }),
-      clipLayer,
-      rasterLayer,
-      boundaryLayer,
-    ],
+    layers: [baseMapLayer, clipLayer, rasterLayer, boundaryLayer],
   });
 }

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

@@ -4,16 +4,24 @@ import {
   getRgbColorsArray,
   addSearchControl,
   setMap,
+  getBaseMapUrl,
 } from 'utils';
 
+import { baseMapLayerLoader } from './base-layer';
+
 let map = null;
 let rasterSource = null;
 let rasterColorSource = null;
 let rasterLayer = null;
 let shapeSource = null;
+let baseMapSource = null;
+let baseMapLayer = null;
 
-export default function olMain({ shape, tiles, colors, opacity }) {
+export default function olMain({ shape, tiles, colors, opacity, baseLayer }) {
   const spectrumColor = getColorsArray(colors);
+
+  const url = getBaseMapUrl(baseLayer);
+
   const rgbColorsArray = getRgbColorsArray(
     spectrumColor.length >= 2 ? spectrumColor : ['#000000', '#ffffff']
   );
@@ -24,7 +32,14 @@ export default function olMain({ shape, tiles, colors, opacity }) {
     });
 
   if (map)
-    return { map, rasterLayer, rasterSource, shapeSource, rasterColorSource };
+    return {
+      map,
+      rasterLayer,
+      rasterSource,
+      shapeSource,
+      rasterColorSource,
+      baseMapSource,
+    };
 
   const loadRaster = loadRasterLayer({
     rasterSource,
@@ -44,9 +59,21 @@ export default function olMain({ shape, tiles, colors, opacity }) {
   const boundaryLayer = clipRaster.boundaryLayer;
   shapeSource = clipRaster.shapeSource;
 
-  map = initMap({ rasterLayer, clipLayer, boundaryLayer });
+  const baseMapLayerLoaded = baseMapLayerLoader({ url });
+  baseMapLayer = baseMapLayerLoaded.baseMapLayer;
+  baseMapSource = baseMapLayerLoaded.baseMapSource;
+
+
+  map = initMap({ rasterLayer, clipLayer, boundaryLayer, baseMapLayer });
   setMap(map);
   addSearchControl(map);
   dragMap(map);
-  return { map, rasterSource, rasterLayer, shapeSource, rasterColorSource };
+  return {
+    map,
+    rasterSource,
+    rasterLayer,
+    shapeSource,
+    rasterColorSource,
+    baseMapSource,
+  };
 }

src/components/main-app/sidebar-wrapper/alpha-input.js

@@ -7,7 +7,9 @@ export default function AlphaInput() {
 
   return (
     <>
-      <p>Alpha Value (0-1)</p>
+      <div className="color-row">
+        <p>Alpha Value (0-1)</p>
+      </div>
       <div className="input-container">
         <div className="slider-container">
           <input

src/components/main-app/sidebar-wrapper/colors-input.js

@@ -5,6 +5,7 @@ import { ReactComponent as CloseSVG } from 'assets/svg/close.svg';
 import { getColorsArray, getColorsString } from 'utils';
 import { ChromePicker } from 'react-color';
 
+
 const popover = {
   position: 'absolute',
   zIndex: '3',

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

@@ -1,13 +1,14 @@
 import React from 'react';
 import { URL_SHAPE, URL_UPDATE_PUSH } from 'config';
 import { StringParam, useQueryParam } from 'use-query-params';
-
 export default function ShapeInput() {
   const [shape, onChangeShape] = useQueryParam(URL_SHAPE, StringParam);
 
   return (
     <>
-      <p>Shape URL (Only Topo JSON)</p>
+      <div className="color-row">
+        <p>Shape URL (Only Topo JSON)</p>
+      </div>
       <input
         type="text"
         value={shape}