Switch between basemaps

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 basemap
 
 ## Installation
 clone repo and install using - 

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

@@ -4,6 +4,10 @@ import 'ol/ol.css';
 import { URL_SHAPE, URL_TILES, URL_COLORS, URL_OPACITY } from 'config';
 import { useQueryParam, StringParam } from 'use-query-params';
 import { usePrevious } from 'react-use';
+import { OSM } from 'ol/source';
+import XYZ from 'ol/source/XYZ';
+import '../../sass/index.sass';
+import { handleBaseMapChange } from '../../utils/map-data';
 
 export default function OlInit() {
   const [shape] = useQueryParam(URL_SHAPE, StringParam);
@@ -14,6 +18,17 @@ export default function OlInit() {
   const prevTiles = usePrevious(tiles);
   const prevShape = usePrevious(shape);
 
+  const mapBoxSource = new XYZ({
+    url: `https://api.mapbox.com/styles/v1/srijitcoder/ckhnsil6g15ud19qqo9leet6e/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic3Jpaml0Y29kZXIiLCJhIjoiY2s3MzhnZGZyMDlrbDNvbW5mcXpwZnoxMyJ9.ILgPQHEJq6lFRt2fN0j2sQ`,
+  });
+
+  const satelliteSource = new XYZ({
+    url:
+      'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+  });
+
+  const osmSource = new OSM();
+
   useEffect(() => {
     const olInstances = olMain({ shape, tiles, colors, opacity });
 
@@ -35,10 +50,32 @@ export default function OlInit() {
       olInstances.rasterSource.refresh();
     }
   }, [shape, tiles, colors, opacity, prevTiles, prevShape]);
+
   return (
     <>
       <div>
-        <div id="map" className="main-map"></div>
+        <div id="map" className="main-map">
+          <div className="btn-group">
+            <button
+              className="view"
+              onClick={() => handleBaseMapChange(mapBoxSource)}
+            >
+              MapBox
+            </button>
+            <button
+              className="view"
+              onClick={() => handleBaseMapChange(satelliteSource)}
+            >
+              Satellite
+            </button>
+            <button
+              className="view"
+              onClick={() => handleBaseMapChange(osmSource)}
+            >
+              OSM
+            </button>
+          </div>
+        </div>
       </div>
     </>
   );

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

@@ -1,5 +1,6 @@
 import { clipRasterLayer, dragMap, initMap, loadRasterLayer } from './';
 import { getColorsArray, getRgbColorsArray } from 'utils';
+import { setBaseLayer } from '../../../utils/map-data';
 
 let map = null;
 let rasterSource = null;
@@ -40,6 +41,7 @@ export default function olMain({ shape, tiles, colors, opacity }) {
   shapeSource = clipRaster.shapeSource;
 
   map = initMap({ rasterLayer, clipLayer, boundaryLayer });
+  setBaseLayer(map.getLayers().getArray()[0].values_);
   dragMap(map);
   return { map, rasterSource, rasterLayer, shapeSource, rasterColorSource };
 }

src/sass/_map.sass

@@ -1,2 +1,13 @@
 .main-map
-    height: 100vh
+    height: 100vh
+
+    .btn-group
+        position: fixed
+        bottom: 10px
+        right: 10px
+        display: flex
+        z-index: 1
+
+        button
+            background-color: rgba(0,60,136,0.5)
+            color: #fff

src/utils/map-data.js

@@ -0,0 +1,10 @@
+let baseLayer = {};
+
+export const handleBaseMapChange = source => {
+  baseLayer.source = source;
+  baseLayer.source.refresh();
+};
+
+export const setBaseLayer = bLayer => {
+  baseLayer = bLayer;
+};