feature for base map layer switch

README.md

@@ -31,6 +31,7 @@ This utility helps simulate the color schemes quickly, along with clipping & map
 - [ ] Mobile version 
 - [ ] Search bar to search places 
 - [ ] Go to current location
+- [X] Switch between base maps
 
 ## Installation
 clone repo and install using - 

src/components/main-app/map-components/base-map-layer.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { URL_BASE_LAYER, URL_UPDATE_PUSH } from 'config';
+import { StringParam, useQueryParam } from 'use-query-params';
+
+export default function BaseMapLayer() {
+  const [baseLayer, onChangeBaseLayer] = useQueryParam(
+    URL_BASE_LAYER,
+    StringParam
+  );
+
+  return (
+    <>
+      <div className="group-button">
+        <div
+          onClick={e => onChangeBaseLayer('basic', URL_UPDATE_PUSH)}
+          className={`pointer iconButton border-radius-top-right-0 border-radius-bottom-right-0 ${
+            baseLayer === 'basic' ? 'selected-iconButton' : ''
+          }`}
+        >
+          Basic
+        </div>
+        <div
+          onClick={e => onChangeBaseLayer('satellite', URL_UPDATE_PUSH)}
+          className={`pointer iconButton border-radius-0 ${
+            baseLayer === 'satellite' ? 'selected-iconButton' : ''
+          }`}
+        >
+          Satellite
+        </div>
+        <div
+          onClick={e => onChangeBaseLayer('mapbox', URL_UPDATE_PUSH)}
+          className={`pointer iconButton border-radius-top-left-0 border-radius-bottom-left-0 ${
+            baseLayer === 'mapbox' ? 'selected-iconButton' : ''
+          }`}
+        >
+          Mapbox
+        </div>
+      </div>
+    </>
+  );
+}

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

@@ -1,27 +1,42 @@
 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,
+} from 'config';
 import { useQueryParam, StringParam } from 'use-query-params';
 import { usePrevious } from 'react-use';
+import BaseMapLayer from './map-components/base-map-layer';
+import { getBaseMapUrl } from 'utils';
 
 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] = 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 });
 
     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();
@@ -34,11 +49,21 @@ export default function OlInit() {
     if (olInstances.rasterSource) {
       olInstances.rasterSource.refresh();
     }
-  }, [shape, tiles, colors, opacity, prevTiles, prevShape]);
+  }, [
+    shape,
+    tiles,
+    colors,
+    opacity,
+    baseLayer,
+    prevTiles,
+    prevShape,
+    prevBaseLayer,
+  ]);
   return (
     <>
       <div>
         <div id="map" className="main-map"></div>
+        <BaseMapLayer />
       </div>
     </>
   );

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

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

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

@@ -1,23 +1,20 @@
 import Map from 'ol/Map';
-import XYZ from 'ol/source/XYZ';
-import { Tile as TileLayer } from 'ol/layer';
 import View from 'ol/View';
 
-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: `https://api.mapbox.com/styles/v1/srijitcoder/ckhnsil6g15ud19qqo9leet6e/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic3Jpaml0Y29kZXIiLCJhIjoiY2s3MzhnZGZyMDlrbDNvbW5mcXpwZnoxMyJ9.ILgPQHEJq6lFRt2fN0j2sQ`,
-        }),
-      }),
-      clipLayer,
-      rasterLayer,
-      boundaryLayer,
+      baseMapLayer, // base map layer
+      clipLayer, // clip layer
+      rasterLayer, // raster data layer
+      boundaryLayer, // boundry layer
     ],
   });
 }

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

@@ -1,14 +1,18 @@
 import { clipRasterLayer, dragMap, initMap, loadRasterLayer } from './';
-import { getColorsArray, getRgbColorsArray } from 'utils';
+import { getColorsArray, getRgbColorsArray, 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']
   );
@@ -19,7 +23,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,
@@ -39,7 +50,19 @@ 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 });
   dragMap(map);
-  return { map, rasterSource, rasterLayer, shapeSource, rasterColorSource };
+  return {
+    map,
+    rasterSource,
+    rasterLayer,
+    shapeSource,
+    rasterColorSource,
+    baseMapSource,
+  };
 }

src/config/default.js

@@ -18,3 +18,14 @@ export const COLORS_DEFAULT =
   'f1eef6-e4d2e7-d7b5d8-db8dc4-df65b0-de4094-dd1c77-bb0e5d-980043';
 
 export const OPACITY_DEFAULT = 1;
+
+export const BASE_LAYER_DEFAULT = 'basic';
+
+export const MAPBOX_ACCESS_TOKEN =
+  'pk.eyJ1Ijoic2FoaWwwMDQiLCJhIjoiY2tqMTgzbHdpMDQycDJycGltOW01YmxuNSJ9.7vGu_4hyrdbrxr8w1gATfA';
+
+export const BASE_MAP_STYLE = {
+  basic: 'sahil004/ckj69eml13rba19o5xde6w2tp',
+  satellite: 'sahil004/ckj187v769dqo1at4efeloch1',
+  mapbox: 'sahil004/ckj65nxct3nne19o5kqt0tljl',
+};

src/config/index.js

@@ -5,11 +5,13 @@ export {
   URL_TILES,
   URL_COLORS,
   URL_OPACITY,
+  URL_BASE_LAYER,
 } from './url';
 
 export {
   SHAPE_URL_DEFAULT,
   TILES_URL_DEFAULT,
   COLORS_DEFAULT,
   OPACITY_DEFAULT,
+  BASE_LAYER_DEFAULT,
 } from './default';

src/config/url.js

@@ -4,3 +4,4 @@ export const URL_SHAPE = 'shape';
 export const URL_TILES = 'tiles';
 export const URL_COLORS = 'colors';
 export const URL_OPACITY = 'opacity';
+export const URL_BASE_LAYER = 'layer';

src/pages/main.js

@@ -5,11 +5,13 @@ import {
   URL_TILES,
   URL_COLORS,
   URL_OPACITY,
+  URL_BASE_LAYER,
   COLORS_DEFAULT,
   URL_UPDATE_PUSH,
   OPACITY_DEFAULT,
   TILES_URL_DEFAULT,
   SHAPE_URL_DEFAULT,
+  BASE_LAYER_DEFAULT,
 } from 'config';
 import { StringParam, useQueryParam } from 'use-query-params';
 
@@ -18,6 +20,10 @@ export default function Main() {
   const [tiles, onChangeTiles] = useQueryParam(URL_TILES, StringParam);
   const [colors, onChangeColors] = useQueryParam(URL_COLORS, StringParam);
   const [opacity, onChangeOpacity] = useQueryParam(URL_OPACITY, StringParam);
+  const [baseLayer, onChangeBaseLayer] = useQueryParam(
+    URL_BASE_LAYER,
+    StringParam
+  );
 
   useEffect(() => {
     if (!shape) {
@@ -43,6 +49,12 @@ export default function Main() {
     }
   }, [opacity, onChangeOpacity]);
 
+  useEffect(() => {
+    if (!baseLayer) {
+      onChangeBaseLayer(BASE_LAYER_DEFAULT, URL_UPDATE_PUSH);
+    }
+  }, [baseLayer, onChangeBaseLayer]);
+
   return (
     <>
       <MainApp />

src/sass/_app.sass

@@ -76,18 +76,53 @@
             svg
                 width: 10px
 
-.fa.iconButton
-    width: 30px
+.iconButton 
+    min-width: 30px
     height: 18px
     color: #FFF
     background-color: #000
-    padding: 6px 0px
+    padding: 6px
     display: flex
     align-items: center
     justify-content: center
     font-size: 15px
     border-radius: 6px
+    transition: all 0.1s ease-in
+    &:hover 
+        opacity: 0.7
+
+.fa.iconButton
+    width: 30px
+    height: 18px
+    padding: 6px 0px
+
+.selected-iconButton
+    opacity: 0.7
+
+.group-button 
+    position: fixed
+    bottom: 10px
+    right: 10px
+    display: flex
+
+
+.border-radius-0
+    border-radius: 0px !important
+
+.border-radius-top-left-0
+    border-top-left-radius: 0px !important
+
+.border-radius-bottom-left-0
+    border-bottom-left-radius: 0px !important
+
+.border-radius-top-right-0
+    border-top-right-radius: 0px !important
+
+.border-radius-top-right-0
+    border-bottom-right-radius: 0px !important
 
+.pointer 
+    cursor: pointer !important
 
 @media only screen and (max-width: 1440px)
     .sidebar

src/utils/get-base-map-url.js

@@ -0,0 +1,5 @@
+import { MAPBOX_ACCESS_TOKEN, BASE_MAP_STYLE } from 'config/default';
+
+export default function getBaseMapUrl(style) {
+  return `https://api.mapbox.com/styles/v1/${BASE_MAP_STYLE[style]}/tiles/256/{z}/{x}/{y}?access_token=${MAPBOX_ACCESS_TOKEN}`;
+}

src/utils/index.js

@@ -2,3 +2,4 @@ export { default as getRgbColorsArray } from './get-rgb-colors-array';
 export { default as getColorsArray } from './get-colors-array';
 export { default as getColorsString } from './get-colors-string';
 export { default as copyColor } from './copy-color';
+export { default as getBaseMapUrl } from './get-base-map-url';