added new baselayer with various styling #70

shivamSspirit · 2021-10-28T17:55:23Z

add various types of styling layers

netlify · 2021-10-28T17:55:26Z

👷 Deploy request for raster-playground pending review.
Visit the deploys page to approve it

🔨 Explore the source changes: b958d1a

shivamSspirit · 2021-11-23T11:25:18Z

leave feedback so i can improve as soon as possible

srijitcoder · 2021-11-23T14:15:28Z

On the first load this is what it shows (Run the URL without any params just domain)... White map state

srijitcoder · 2021-11-23T14:19:00Z

Make the base layer selector UI something similar to google maps (Not exactly same... Take your UI liberty)
Something like an image selector

From this

srijitcoder · 2021-11-23T14:20:24Z

The text colour should change dynamically change on basis of base map theme (White text on a grey base map is not readable)

srijitcoder · 2021-11-23T14:21:10Z

.env.development

+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}


This must not be part of the code

srijitcoder · 2021-11-23T14:21:20Z

.gitignore

@@ -8,7 +8,7 @@
 /coverage

 # production
-/build
+ /build


remove extra space

srijitcoder · 2021-11-23T14:21:28Z

.gitignore

@@ -23,7 +23,7 @@
 .env.test.local
 .env.production.local
 .env
-.env.development
+ .env.development


remove extra space

srijitcoder · 2021-11-23T14:22:33Z

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

+            <button
+              className="toggle"
+              onClick={e => onChangeBaseLayer('light', URL_UPDATE_PUSH)}
+            >
+              light
+            </button>
+            <button
+              className="toggle"
+              onClick={e => onChangeBaseLayer('dark', URL_UPDATE_PUSH)}
+            >
+              dark
+            </button>
+            <button
+              className="toggle"
+              onClick={e => onChangeBaseLayer('satelight', URL_UPDATE_PUSH)}
+            >
+              satelight
+            </button>
+            <button
+              className="toggle"
+              onClick={e => onChangeBaseLayer('street', URL_UPDATE_PUSH)}
+            >
+              street
+            </button>
+            <button
+              className="toggle"
+              onClick={e => onChangeBaseLayer('green', URL_UPDATE_PUSH)}
+            >
+              green
+            </button>


Can have a single component for this and dynamically generate with help of a map function

srijitcoder · 2021-11-23T14:23:15Z

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

 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
+  // console.log(`shape`, shape);


remove this

srijitcoder · 2021-11-23T14:23:38Z

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

+  // console.log(`baseMapLayerLoaded`, baseMapLayerLoaded);
+  baseMapLayer = baseMapLayerLoaded.baseMapLayer;
+  // console.log(`baseMapLayer`, baseMapLayer);
+  baseMapSource = baseMapLayerLoaded.baseMapSource;
+  // console.log(`baseMapSource`, baseMapSource);


Remove unnecessary console comments

srijitcoder · 2021-11-23T14:23:48Z

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

+  // console.log(`style`, style);
+  // console.log(`BASEMAP_LIGHT_STYLE`, BASEMAP_LIGHT_STYLE);


Remove unnecessary console comments

srijitcoder · 2021-11-23T14:23:55Z

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

    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) {
+      // console.log(`prevBaseLayer`, prevBaseLayer, baseLayer);


Remove unnecessary console comments

srijitcoder · 2021-11-23T14:24:01Z

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

+import { Tile as TileLayer } from 'ol/layer';
+
+export function baseMapLayerLoader(url) {
+ // console.log(`url`, url);


Remove unnecessary console comments

srijitcoder · 2021-11-23T14:26:52Z

src/components/tool-tip/toolTip.js

+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import 'react-tippy/dist/tippy.css';
+import { Tooltip } from 'react-tippy';
+
+const Tooltips = ({ tipinfo }) => {
+  return (
+    <div>
+      <Tooltip title={tipinfo} position="bottom" trigger="click">
+        <FontAwesomeIcon icon={faInfoCircle} />
+      </Tooltip>
+    </div>
+  );
+};
+
+export default Tooltips;


Why tooltip code is part of this PR? It should be part of -

Myfeature/tooltip #71

Remove this tooltip code from this PR
I think you branched it from that PR

shivamSspirit · 2021-11-29T05:02:52Z

refactor all changes

shivamSspirit · 2021-12-18T10:22:06Z

Review this

added new baselayer with various styling

ecd930b

shivamSspirit added 4 commits November 1, 2021 12:13

refactor

685e5fe

refactor

080c68e

refactor

e983ae9

refactor

51d6547

srijitcoder suggested changes Nov 23, 2021

View reviewed changes

shivamSspirit added 4 commits November 27, 2021 23:50

remove unecessary things and add image toggler

74c1ff0

refactor map load

3bc2ba7

remove console logs

5bd45d7

refactor

9d53e71

shivamSspirit added 2 commits December 21, 2021 22:22

component for imgtoggler

b8e203b

import toggler

b958d1a

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

added new baselayer with various styling #70

added new baselayer with various styling #70

shivamSspirit commented Oct 28, 2021

netlify bot commented Oct 28, 2021 •

edited

Loading

shivamSspirit commented Nov 23, 2021

srijitcoder commented Nov 23, 2021 •

edited

Loading

srijitcoder commented Nov 23, 2021

srijitcoder commented Nov 23, 2021

srijitcoder Nov 23, 2021

srijitcoder Nov 23, 2021

srijitcoder Nov 23, 2021

srijitcoder Nov 23, 2021

srijitcoder Nov 23, 2021

srijitcoder Nov 23, 2021

srijitcoder Nov 23, 2021

srijitcoder Nov 23, 2021

srijitcoder Nov 23, 2021

srijitcoder Nov 23, 2021

srijitcoder Nov 23, 2021

shivamSspirit commented Nov 29, 2021

shivamSspirit commented Dec 18, 2021

		// console.log(`style`, style);
		// console.log(`BASEMAP_LIGHT_STYLE`, BASEMAP_LIGHT_STYLE);

added new baselayer with various styling #70

Are you sure you want to change the base?

added new baselayer with various styling #70

Conversation

shivamSspirit commented Oct 28, 2021

netlify bot commented Oct 28, 2021 • edited Loading

shivamSspirit commented Nov 23, 2021

srijitcoder commented Nov 23, 2021 • edited Loading

srijitcoder commented Nov 23, 2021

srijitcoder commented Nov 23, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shivamSspirit commented Nov 29, 2021

shivamSspirit commented Dec 18, 2021

netlify bot commented Oct 28, 2021 •

edited

Loading

srijitcoder commented Nov 23, 2021 •

edited

Loading