61 |
92 |
93 | );
94 | }
95 |
--------------------------------------------------------------------------------
/src/components/main-app/ol/clip-raster.js:
--------------------------------------------------------------------------------
1 | import { Vector as VectorLayer } from 'ol/layer';
2 | import { Vector as VectorSource } from 'ol/source';
3 | import { TopoJSON } from 'ol/format';
4 | import { getVectorContext } from 'ol/render';
5 | import { Fill, Style, Stroke } from 'ol/style';
6 |
7 | /**
8 | * @param {*} rasterLayer = Raster layer map instance generated from OL map init
9 | */
10 | export default function clipRasterLayer({ rasterLayer, shape }) {
11 | //Create cliping layer from topojson
12 | const shapeSource = new VectorSource({
13 | url: shape,
14 | format: new TopoJSON(),
15 | overlaps: false,
16 | });
17 |
18 | const clipLayer = new VectorLayer({
19 | source: shapeSource,
20 | style: null,
21 | });
22 |
23 | const boundaryLayer = new VectorLayer({
24 | source: shapeSource,
25 | style: () =>
26 | new Style({
27 | fill: new Fill({
28 | color: 'rgba(255, 255, 255, 0.01)',
29 | }),
30 | stroke: new Stroke({
31 | color: '#000000',
32 | width: 1,
33 | }),
34 | }),
35 | });
36 |
37 | //clip raster layer on add feature event
38 | clipLayer.getSource().on('addfeature', function () {
39 | rasterLayer.setExtent(clipLayer.getSource().getExtent());
40 | });
41 |
42 | const style = new Style({
43 | fill: new Fill({
44 | color: 'black',
45 | }),
46 | });
47 |
48 | //postrender cliped raster layer with vector on postrender
49 | rasterLayer.on('postrender', function (e) {
50 | const vectorContext = getVectorContext(e);
51 | e.context.globalCompositeOperation = 'destination-in';
52 | clipLayer.getSource().forEachFeature(function (feature) {
53 | vectorContext.drawFeature(feature, style);
54 | });
55 | e.context.globalCompositeOperation = 'source-over';
56 | });
57 |
58 | return { clipLayer, boundaryLayer, shapeSource };
59 | }
60 |
--------------------------------------------------------------------------------
/src/components/main-app/ol/drag-map.js:
--------------------------------------------------------------------------------
1 | export default function dragMap(map) {
2 | map.getViewport().style.cursor = '-webkit-grab';
3 | map.on('pointerdrag', function (evt) {
4 | map.getViewport().style.cursor = '-webkit-grabbing';
5 | });
6 |
7 | map.on('pointerup', function (evt) {
8 | map.getViewport().style.cursor = '-webkit-grab';
9 | });
10 | }
11 |
--------------------------------------------------------------------------------
/src/components/main-app/ol/index.js:
--------------------------------------------------------------------------------
1 | export { default as dragMap } from './drag-map';
2 | export { default as initMap } from './init-map';
3 | export { default as loadRasterLayer } from './load-color-raster';
4 | export { default as clipRasterLayer } from './clip-raster';
5 |
--------------------------------------------------------------------------------
/src/components/main-app/ol/init-map.js:
--------------------------------------------------------------------------------
1 | import Map from 'ol/Map';
2 | import XYZ from 'ol/source/XYZ';
3 | import { Tile as TileLayer } from 'ol/layer';
4 | import View from 'ol/View';
5 | import { BASEMAP_LIGHT_STYLE } from 'config';
6 |
7 | export default function initMap({ rasterLayer, clipLayer, boundaryLayer }) {
8 | return new Map({
9 | target: 'map',
10 | view: new View({ center: [0, 0], zoom: 0 }),
11 | layers: [
12 | new TileLayer({
13 | className: true,
14 | preload: Infinity,
15 | source: new XYZ({
16 | url: BASEMAP_LIGHT_STYLE,
17 | }),
18 | }),
19 | clipLayer,
20 | rasterLayer,
21 | boundaryLayer,
22 | ],
23 | });
24 | }
25 |
--------------------------------------------------------------------------------
/src/components/main-app/ol/load-color-raster.js:
--------------------------------------------------------------------------------
1 | import { Raster as RasterSource } from 'ol/source';
2 | import { Image as ImageLayer } from 'ol/layer';
3 | import XYZ from 'ol/source/XYZ';
4 |
5 | /**
6 | * @param {*} rasterSource = Raster source map instance generated from OL map init
7 | * @param {*} rasterColorSource = Raster Coloured source value before colorization
8 | * @param {*} rgbColorsArray = RGB colour scheme for a data attribute
9 | */
10 | export default function loadRasterLayer({
11 | rasterSource,
12 | rasterColorSource,
13 | rgbColorsArray,
14 | rasterLayer,
15 | opacity,
16 | tiles,
17 | }) {
18 | //Raster source initilization using XYZ tile type
19 | rasterSource = new XYZ({
20 | url: tiles,
21 | crossOrigin: 'anonymous',
22 | });
23 |
24 | //Running colourization on raster source
25 | rasterColorSource = new RasterSource({
26 | sources: [rasterSource],
27 | operation: function (pixels, data) {
28 | const pixel = pixels[0];
29 | let r = 255 - pixel[0];
30 | let g = 255 - pixel[1];
31 | let b = 255 - pixel[2];
32 | const value = (r + g + b) / (3 * 255);
33 | const rgb = data.rgbColorsArr[Math.round(value * 100)];
34 | pixel[0] = rgb.r;
35 | pixel[1] = rgb.g;
36 | pixel[2] = rgb.b;
37 | return pixel;
38 | },
39 | });
40 |
41 | //Triggering colourization event before raster source render opetration
42 | rasterColorSource.on('beforeoperations', function (event) {
43 | event.data.rgbColorsArr = rgbColorsArray;
44 | });
45 |
46 | //Generating image out of coloured raster source
47 | rasterLayer = new ImageLayer({
48 | source: rasterColorSource,
49 | opacity: opacity ? parseFloat(opacity) : 1,
50 | });
51 |
52 | return { rasterSource, rasterColorSource, rasterLayer };
53 | }
54 |
--------------------------------------------------------------------------------
/src/components/main-app/ol/main.js:
--------------------------------------------------------------------------------
1 | import { clipRasterLayer, dragMap, initMap, loadRasterLayer } from './';
2 | import {
3 | getColorsArray,
4 | getRgbColorsArray,
5 | addSearchControl,
6 | setMap,
7 | } from 'utils';
8 |
9 | let map = null;
10 | let rasterSource = null;
11 | let rasterColorSource = null;
12 | let rasterLayer = null;
13 | let shapeSource = null;
14 |
15 | export default function olMain({ shape, tiles, colors, opacity }) {
16 | const spectrumColor = getColorsArray(colors);
17 | const rgbColorsArray = getRgbColorsArray(
18 | spectrumColor.length >= 2 ? spectrumColor : ['#000000', '#ffffff']
19 | );
20 |
21 | if (rasterColorSource && spectrumColor.length >= 2)
22 | rasterColorSource.on('beforeoperations', function (event) {
23 | event.data.rgbColorsArr = rgbColorsArray;
24 | });
25 |
26 | if (map)
27 | return { map, rasterLayer, rasterSource, shapeSource, rasterColorSource };
28 |
29 | const loadRaster = loadRasterLayer({
30 | rasterSource,
31 | rasterColorSource,
32 | rgbColorsArray,
33 | rasterLayer,
34 | opacity,
35 | tiles,
36 | });
37 |
38 | rasterLayer = loadRaster.rasterLayer;
39 | rasterSource = loadRaster.rasterSource;
40 | rasterColorSource = loadRaster.rasterColorSource;
41 |
42 | const clipRaster = clipRasterLayer({ rasterLayer, shape });
43 | const clipLayer = clipRaster.clipLayer;
44 | const boundaryLayer = clipRaster.boundaryLayer;
45 | shapeSource = clipRaster.shapeSource;
46 |
47 | map = initMap({ rasterLayer, clipLayer, boundaryLayer });
48 | setMap(map);
49 | addSearchControl(map);
50 | dragMap(map);
51 | return { map, rasterSource, rasterLayer, shapeSource, rasterColorSource };
52 | }
53 |
--------------------------------------------------------------------------------
/src/components/main-app/sidebar-wrapper/alpha-input.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { URL_OPACITY, URL_UPDATE_PUSH } from 'config';
3 | import { StringParam, useQueryParam } from 'use-query-params';
4 |
5 | export default function AlphaInput() {
6 | const [opacity, onChangeOpacity] = useQueryParam(URL_OPACITY, StringParam);
7 |
8 | return (
9 | <>
10 |
62 |
68 |
63 |
66 |
67 |
69 |
91 |
70 | Powered by{' '}
71 |
72 | Blue Sky Analytics
73 | {' '}
74 | | Made on{' '}
75 |
76 | OpenLayers
77 | {' '}
78 | | Basemap by{' '}
79 |
80 | Mapbox
81 |
82 |
83 |
84 | {FOOTER_ICON.map(footer => (
85 |
86 | 
87 |
88 | ))}
89 |
90 | Alpha Value (0-1)
11 |
12 |
36 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/src/components/main-app/sidebar-wrapper/colors-input.js:
--------------------------------------------------------------------------------
1 | import React, { useState, Fragment } from 'react';
2 | import { StringParam, useQueryParam } from 'use-query-params';
3 | import { URL_COLORS, URL_UPDATE_PUSH } from 'config';
4 | import { ReactComponent as CloseSVG } from 'assets/svg/close.svg';
5 | import { getColorsArray, getColorsString } from 'utils';
6 | import { ChromePicker } from 'react-color';
7 |
8 | const popover = {
9 | position: 'absolute',
10 | zIndex: '3',
11 | };
12 | const cover = {
13 | position: 'fixed',
14 | top: '0px',
15 | right: '0px',
16 | bottom: '0px',
17 | left: '0px',
18 | };
19 |
20 | const deleteColor = (key, colorsArray, onChangeColor) => {
21 | let tempColorsArray = colorsArray;
22 | if (key > -1) {
23 | tempColorsArray.splice(key, 1);
24 | onChangeColor(getColorsString(tempColorsArray), URL_UPDATE_PUSH);
25 | }
26 | };
27 |
28 | export default function ColorsInput() {
29 | const [colors, onChangeColor] = useQueryParam(URL_COLORS, StringParam);
30 | const [itemColorStatus, setItemColorStatus] = useState(null);
31 | const colorsArray = getColorsArray(colors);
32 |
33 | const changeItemColor = color => {
34 | setItemColorStatus({ color: color.hex, key: itemColorStatus.key });
35 | let tempColorsArray = colorsArray;
36 | tempColorsArray[itemColorStatus.key] = color.hex;
37 | onChangeColor(getColorsString(tempColorsArray), URL_UPDATE_PUSH);
38 | };
39 |
40 | const addColor = () => {
41 | setItemColorStatus({ color: '#006698', key: colorsArray.length });
42 | let tempColorsArray = colorsArray;
43 | tempColorsArray.push('#006698');
44 | onChangeColor(getColorsString(tempColorsArray), URL_UPDATE_PUSH);
45 | };
46 |
47 | return (
48 | <>
49 |
13 | onChangeOpacity(e.target.value, URL_UPDATE_PUSH)}
21 | />
22 |
23 |
24 | onChangeOpacity(e.target.value, URL_UPDATE_PUSH)}
33 | />
34 |
35 |
50 |
59 | Colors Palette
{' '} 51 | addColor()} 54 | className="iconButton fa fa-lg fa-plus" 55 | > 56 | {' '} 57 | 58 |
60 | {colorsArray.map((color, key) => (
61 |
62 |
82 | ))}
83 |
84 | {itemColorStatus ? (
85 |
70 |
81 | deleteColor(key, colorsArray, onChangeColor)}
73 | >
74 |
76 | setItemColorStatus({ color, key })}
79 | >
80 |
86 |
38 |
96 | );
97 | }
98 |
--------------------------------------------------------------------------------
/src/components/main-app/themes/global-styles.js:
--------------------------------------------------------------------------------
1 | import { createGlobalStyle } from 'styled-components';
2 |
3 | export const GlobalStyles = createGlobalStyle`
4 | .sidebar {
5 | background-color: ${({ theme }) => theme.body};
6 | color: ${({ theme }) => theme.text};
7 | transition: all 0.5s linear;
8 | }
9 |
10 | .powered {
11 | color: ${({ theme }) => theme.text};
12 | }
13 |
14 | #json-pretty > pre::-webkit-scrollbar-thumb{
15 | background-color: ${({ theme }) => theme.scroll};
16 | }
17 |
18 | #json-pretty > pre{
19 | background-color: ${({ theme }) => theme.background} !important;
20 | color: ${({ theme }) => theme.jsonColor} !important;
21 | }
22 |
23 | .__json-key__{
24 | color: ${({ theme }) => theme.jsonKey} !important;
25 | }
26 |
27 | .__json-value__{
28 | color: ${({ theme }) => theme.jsonValue} !important;
29 | }
30 |
31 | .__json-string__{
32 | color: ${({ theme }) => theme.jsonString} !important;
33 | }
34 |
35 | .input-text {
36 | background-color: ${({ theme }) => theme.background};
37 | color: ${({ theme }) => theme.text};
38 | }
39 |
40 | .input-text-slider {
41 | background-color: ${({ theme }) => theme.background};
42 | color: ${({ theme }) => theme.text};
43 | }
44 |
45 | .fa.iconButton, #color-format, .copy-btn{
46 | background-color: ${({ theme }) => theme.btnBgColor};
47 | color: ${({ theme }) => theme.btnColor};
48 | }
49 |
50 | .theme-toggle input:checked + .slider {
51 | background-color: ${({ theme }) => theme.btnBgColor};
52 | }
53 | `;
54 |
--------------------------------------------------------------------------------
/src/components/main-app/themes/themes.js:
--------------------------------------------------------------------------------
1 | export const lightTheme = {
2 | body: '#FFF',
3 | text: '#000',
4 | background: '#ececec',
5 | btnBgColor: '#000',
6 | btnColor: '#FFF',
7 | scroll: '#000',
8 | jsonKey: '#b553bf',
9 | jsonValue: '#1e1e1e',
10 | jsonString: '#b553bf',
11 | jsonColor: 'darkBlue',
12 | };
13 |
14 | export const darkTheme = {
15 | body: '#15202B',
16 | text: '#FFF',
17 | background: '#223547',
18 | btnBgColor: '#223547',
19 | btnColor: '#FFF',
20 | scroll: '#15202B',
21 | jsonKey: 'red',
22 | jsonValue: 'orange',
23 | jsonString: '#b553bf',
24 | jsonColor: '#F8F8FF',
25 | };
26 |
--------------------------------------------------------------------------------
/src/config/basemap-url.js:
--------------------------------------------------------------------------------
1 | //You need to refer to ".env.example" to generate envs for your development
2 |
3 | export const MAPBOX_STYLE_ACCESS_TOKEN =
4 | process.env.REACT_APP_MAPBOX_STYLE_ACCESS_TOKEN;
5 | export const BASEMAP_LIGHT_STYLE = `${process.env.REACT_APP_MAPBOX_LIGHT_STYLE}?access_token=${MAPBOX_STYLE_ACCESS_TOKEN}`;
6 | export const BASEMAP_DARK_STYLE = `${process.env.REACT_APP_MAPBOX_DARK_STYLE}?access_token=${MAPBOX_STYLE_ACCESS_TOKEN}`;
7 | export const BASEMAP_SATELLITE_STYLE = `${process.env.REACT_APP_MAPBOX_SATELLITE_STYLE}?access_token=${MAPBOX_STYLE_ACCESS_TOKEN}`; //NOT YET USED - Use it when you resolve issue no. -
8 | export const BASEMAP_STREETS_STYLE = `${process.env.REACT_APP_MAPBOX_STREETS_STYLE}?access_token=${MAPBOX_STYLE_ACCESS_TOKEN}`; //NOT YET USED - Use it when you resolve issue no. -
9 | export const BASEMAP_GREEN_STYLE = `${process.env.REACT_APP_MAPBOX_GREEN_STYLE}?access_token=${MAPBOX_STYLE_ACCESS_TOKEN}`; //NOT YET USED - Use it when you resolve issue no. -
10 |
--------------------------------------------------------------------------------
/src/config/default.js:
--------------------------------------------------------------------------------
1 | export const SHAPE_URL_DEFAULT = `${window.location.origin}/assets/shape/india-boundary.json`;
2 | export const TILES_URL_DEFAULT = `${window.location.origin}/assets/tiles/{z}/{x}/{-y}.png`;
3 | export const COLORS_DEFAULT2 = [
4 | '#4b0c00',
5 | '#dd7f3d',
6 | '#d1a45b',
7 | '#b7be9e',
8 | '#abb8be',
9 | '#7db6d2',
10 | '#3e8eb4',
11 | '#006698',
12 | ];
13 |
14 | export const COLORS_DEFAULT =
15 | 'f1eef6-e4d2e7-d7b5d8-db8dc4-df65b0-de4094-dd1c77-bb0e5d-980043';
16 |
17 | export const OPACITY_DEFAULT = 1;
18 |
19 | export const THEME_DEFAULT = 'dark';
20 |
--------------------------------------------------------------------------------
/src/config/index.js:
--------------------------------------------------------------------------------
1 | export {
2 | URL_UPDATE_REPLACE,
3 | URL_UPDATE_PUSH,
4 | URL_SHAPE,
5 | URL_TILES,
6 | URL_COLORS,
7 | URL_OPACITY,
8 | } from './url';
9 |
10 | export {
11 | SHAPE_URL_DEFAULT,
12 | TILES_URL_DEFAULT,
13 | COLORS_DEFAULT,
14 | OPACITY_DEFAULT,
15 | THEME_DEFAULT,
16 | } from './default';
17 |
18 | export {
19 | MAPBOX_STYLE_ACCESS_TOKEN,
20 | BASEMAP_LIGHT_STYLE,
21 | BASEMAP_DARK_STYLE,
22 | } from './basemap-url';
23 |
24 | const GITHUB_REPO = 'blueskyanalytics/raster-playground';
25 |
26 | export const FOOTER_ICON = [
27 | {
28 | label: 'fork',
29 | img: `https://img.shields.io/github/forks/${GITHUB_REPO}.svg?style=social&label=Contribute`,
30 | url: `https://github.com/${GITHUB_REPO}`,
31 | },
32 | {
33 | label: 'issues',
34 | img: `https://img.shields.io/github/hacktoberfest/2021/blueskyanalytics/raster-playground?label=hacktoberfest%2021&color=blue`,
35 | url: `https://github.com/${GITHUB_REPO}/issues`,
36 | },
37 | {
38 | label: 'stars',
39 | img: `https://img.shields.io/github/stars/${GITHUB_REPO}.svg?style=for-the-badge`,
40 | url: `https://github.com/${GITHUB_REPO}/stargazers`,
41 | },
42 | {
43 | label: 'js',
44 | img: `https://forthebadge.com/images/badges/made-with-javascript.svg`,
45 | url: `https://github.com/${GITHUB_REPO}`,
46 | },
47 | ];
48 |
--------------------------------------------------------------------------------
/src/config/url.js:
--------------------------------------------------------------------------------
1 | export const URL_UPDATE_REPLACE = 'replaceIn';
2 | export const URL_UPDATE_PUSH = 'pushIn';
3 | export const URL_SHAPE = 'shape';
4 | export const URL_TILES = 'tiles';
5 | export const URL_COLORS = 'colors';
6 | export const URL_OPACITY = 'opacity';
7 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React, { StrictMode } from 'react';
2 | import { render } from 'react-dom';
3 | import App from './app';
4 | import reportWebVitals from './reportWebVitals';
5 | import { Provider } from 'react-redux';
6 | import { store } from 'redux/store';
7 |
8 | render(
9 |
10 |
11 |
13 | ,
14 | document.getElementById('root')
15 | );
16 |
17 | // If you want to start measuring performance in your app, pass a function
18 | // to log results (for example: reportWebVitals(console.log))
19 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
20 | reportWebVitals();
21 |
--------------------------------------------------------------------------------
/src/netlify.toml:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/blueskyanalytics/raster-playground/baa47534ca64f646c8875210cb105879c026367f/src/netlify.toml
--------------------------------------------------------------------------------
/src/pages/main.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import MainApp from 'components/main-app';
3 | import {
4 | URL_SHAPE,
5 | URL_TILES,
6 | URL_COLORS,
7 | URL_OPACITY,
8 | COLORS_DEFAULT,
9 | URL_UPDATE_PUSH,
10 | OPACITY_DEFAULT,
11 | TILES_URL_DEFAULT,
12 | SHAPE_URL_DEFAULT,
13 | THEME_DEFAULT,
14 | } from 'config';
15 | import { StringParam, useQueryParam } from 'use-query-params';
16 | import { useCookie, useEffectOnce } from 'react-use';
17 | import { themeToggler } from 'utils';
18 |
19 | export default function Main() {
20 | const [shape, onChangeShape] = useQueryParam(URL_SHAPE, StringParam);
21 | const [tiles, onChangeTiles] = useQueryParam(URL_TILES, StringParam);
22 | const [colors, onChangeColors] = useQueryParam(URL_COLORS, StringParam);
23 | const [opacity, onChangeOpacity] = useQueryParam(URL_OPACITY, StringParam);
24 | const [theme, setTheme] = useCookie('theme-color');
25 |
26 | useEffectOnce(() => {
27 | if (!theme) themeToggler(THEME_DEFAULT, setTheme);
28 | else themeToggler(theme, setTheme);
29 | }, [theme]);
30 |
31 | useEffect(() => {
32 | if (!shape) {
33 | onChangeShape(SHAPE_URL_DEFAULT, URL_UPDATE_PUSH);
34 | }
35 | }, [shape, onChangeShape]);
36 |
37 | useEffect(() => {
38 | if (!tiles) {
39 | onChangeTiles(TILES_URL_DEFAULT, URL_UPDATE_PUSH);
40 | }
41 | }, [tiles, onChangeTiles]);
42 |
43 | useEffect(() => {
44 | if (!colors) {
45 | onChangeColors(COLORS_DEFAULT, URL_UPDATE_PUSH);
46 | }
47 | }, [colors, onChangeColors]);
48 |
49 | useEffect(() => {
50 | if (!opacity) {
51 | onChangeOpacity(OPACITY_DEFAULT, URL_UPDATE_PUSH);
52 | }
53 | }, [opacity, onChangeOpacity]);
54 |
55 | return (
56 | <>
57 |
18 |
19 |
20 |
21 | {/* dynamic app route */}
22 |
27 |
28 |
29 |
30 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/src/sass/_app.sass:
--------------------------------------------------------------------------------
1 | .sidebar
2 | width: 460px
3 | height: 100%
4 | position: fixed
5 | background: white
6 | top: 0
7 | left: 0
8 | z-index: 1
9 | box-shadow: 4px 0px 15px #00000029
10 | overflow-y: auto
11 |
12 | .sidebar-wrapper
13 | padding: 20px
14 |
15 | hr
16 | margin-bottom: 30px
17 |
18 | h1
19 | display: inline-block
20 | font-weight: 700
21 | margin-top: 0px
22 | margin-bottom: 10px
23 | span
24 | font-weight: 300
25 |
26 | .theme-toggle
27 | .switch
28 | display: flex
29 | height: 36px
30 | position: relative
31 | width: 70px
32 | cursor: pointer
33 |
34 | input
35 | display: none
36 |
37 | .slider
38 | background-color: #ececec
39 | bottom: 0
40 | cursor: pointer
41 | left: 0
42 | position: absolute
43 | right: 0
44 | top: 0
45 | transition: .4s
46 |
47 | &:before
48 | background-color: #333
49 | border: 1px solid #000
50 | bottom: 3px
51 | content: ""
52 | height: 26px
53 | left: 4px
54 | position: absolute
55 | transition: .4s
56 | width: 26px
57 | z-index: 421
58 |
59 | input:checked + .slider:before
60 | transform: translateX(34px)
61 | border-color: #CFCFCF
62 | background-color: #EFEFEF
63 |
64 | .slider.round
65 | border-radius: 34px
66 |
67 | &:before
68 | border-radius: 50%
69 |
70 | .toggle-moon
71 | width: 50%
72 | text-align: center
73 | padding: 0.25em
74 | position: relative
75 | z-index: 420
76 |
77 | .toggle-sun
78 | width: 50%
79 | text-align: center
80 | padding: 0.25em
81 | position: relative
82 | z-index: 420
83 |
84 | .input-text
85 | width: -webkit-fill-available
86 | width: -moz-available
87 | border: 0
88 | padding: 15px
89 | background: #ececec
90 | margin-top: 5px
91 |
92 | .input-container
93 | width: -webkit-fill-available
94 | width: -moz-available
95 | display: flex
96 |
97 | .input-text-slider
98 | border: 0
99 | padding: 15px
100 | background: #ececec
101 | margin-left: 15px
102 | position: absolute
103 | width: 74px
104 | height: 74px
105 | box-sizing: border-box
106 |
107 | .range-slider
108 | width: 100%
109 |
110 | .slider-container
111 | position: relative
112 | width: 72%
113 | display: flex
114 | align-items: center
115 | height: 74px
116 |
117 | .color-row
118 | display: flex
119 | flex-direction: row
120 | flex-wrap: wrap
121 | justify-content: space-between
122 | align-items: baseline
123 |
124 | .color-input
125 | width: -webkit-fill-available
126 | width: -moz-available
127 | margin-top: 20px
128 |
129 | .color-input-item
130 | width: 27%
131 | border: 5px solid #eee
132 | margin: 5px
133 | height: 40px
134 | display: inline-block
135 | cursor: pointer
136 | position: relative
137 |
138 | .color-input-item-overlay
139 | width: 100%
140 | height: 40px
141 | background: transparent
142 | position: absolute
143 | top: 0
144 | left: 0
145 |
146 | .color-input-item-close
147 | top: -15px
148 | right: -10px
149 | position: absolute
150 | z-index: 2
151 | background: white
152 | border-radius: 50%
153 | width: 18px
154 | height: 18px
155 | display: flex
156 | align-items: center
157 | justify-content: center
158 | box-shadow: 0px 2px 4px #0000004f
159 |
160 | svg
161 | width: 10px
162 |
163 | .fa.iconButton
164 | width: 30px
165 | height: 18px
166 | color: #FFF
167 | background-color: #000
168 | padding: 6px 0px
169 | display: flex
170 | align-items: center
171 | justify-content: center
172 | font-size: 15px
173 | border-radius: 6px
174 |
175 | #json-pretty > pre
176 | height: 13rem
177 | padding: 0.5rem
178 | overflow: auto
179 |
180 | #json-pretty > pre::-webkit-scrollbar
181 | width: 9px
182 |
183 | #json-pretty > pre::-webkit-scrollbar-thumb
184 | border-radius: 10px
185 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1)
186 |
187 | #color-format
188 | border: none
189 | border-radius: 6px
190 | background-color: #000
191 | color: #fff
192 | padding: 4px
193 |
194 | #color-format:hover
195 | cursor: pointer
196 |
197 | .copy-btn
198 | border: none
199 | background-color: #000
200 | color: #fff
201 | border-radius: 6px
202 | float: right
203 | padding: 5px
204 | width: 4rem
205 |
206 | .copy-btn:active
207 | opacity: 0.5
208 |
209 | .copy-btn:hover
210 | cursor: pointer
211 |
212 | .theme-switch-wrapper
213 | display: inline
214 | float: right
215 | align-items: center
216 | margin-top: 2%
217 |
218 | @media only screen and (max-width: 1440px)
219 | .sidebar
220 | width: 400px
221 |
222 | @media only screen and (max-width: 1366px)
223 | .sidebar
224 | width: 380px
225 |
226 | @media only screen and (max-width: 1280px)
227 | .sidebar
228 | width: 360px
--------------------------------------------------------------------------------
/src/sass/_global.sass:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;700&display=swap');
2 | @import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
3 |
4 | *
5 | outline: none
6 | font-family: 'Jost', sans-serif;
7 |
8 | body, html
9 | padding: 0
10 | margin: 0
11 |
12 | #root
13 | width: 100vw
14 | height: 100vh
15 | background: var(--start-screen-bg-color)
16 |
17 | .ol-zoom
18 | right: 8px
19 | left: inherit !important
20 |
21 | p
22 | margin: 0
23 |
24 | a, a:hover
25 | text-decoration: none
--------------------------------------------------------------------------------
/src/sass/_map.sass:
--------------------------------------------------------------------------------
1 | .main-map
2 | height: 100vh
3 |
4 | .location-btn
5 | position: fixed
6 | top: 4rem
7 | right: 0.5rem
8 | z-index: 1
9 | margin-top: 0.5rem
10 |
11 | .gcd-gl-control.ol-control
12 | padding: 0
13 | width: 20rem
14 |
15 | .ol-geocoder
16 | position: absolute
17 | top: 1.5%
18 | left: 55%
19 |
20 | .ol-control
21 | display: flex
22 |
23 | .ol-zoom.ol-unselectable.ol-control
24 | display: block
25 |
26 | #gcd-input-query.gcd-gl-input
27 | border: none
28 | border-radius: 4px
29 | font-size: 1.2rem
30 | opacity: 0.6
31 | padding: 0.5rem
32 | width: 20rem
33 |
34 | #gcd-button-control.gcd-gl-btn
35 | display: none
36 |
37 | .gcd-gl-result
38 | list-style: none
39 | margin-top: 20%
40 | background-color: #eee
41 | opacity: 0.5
42 | font-weight: 800
43 | padding: 0
44 | overflow: hidden
45 | overflow-y: scroll
46 | height: 200px
47 | width: 20rem
48 |
49 | li
50 | margin: 0
51 | margin-bottom: 0.5rem
52 |
53 | .gcd-road
54 | color: black
55 |
56 | li:hover
57 | cursor: pointer
58 | background: #ccc
59 |
60 | .hide-results
61 | display: none
62 |
63 | .ol-popup
64 | position: absolute
65 | bottom: 12px
66 | right: 12px
67 | float: right
68 | min-width: 280px
69 | text-align: right
70 |
71 | .powered
72 | padding: 5px
73 | font-size: 13px
74 |
75 | a
76 | color: rgb(45, 124, 241)
77 | font-weight: 700
78 |
79 | .badges
80 | display: flex
81 | justify-content: flex-end
82 |
83 |
84 | img
85 | height: 1.45rem
86 | margin: 0px 5px
87 |
88 | a
89 | text-decoration: none
--------------------------------------------------------------------------------
/src/sass/index.sass:
--------------------------------------------------------------------------------
1 | @import "_global.sass"
2 | @import "_app.sass"
3 | @import "_map.sass"
4 |
--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/src/utils/add-search-control.js:
--------------------------------------------------------------------------------
1 | import Geocoder from 'ol-geocoder';
2 |
3 | export default function addSearchControl(map) {
4 | var geocoder = new Geocoder('nominatim', {
5 | provider: 'osm',
6 | lang: 'en-US',
7 | placeholder: 'Search...',
8 | limit: 10,
9 | debug: false,
10 | autoComplete: true,
11 | keepOpen: false,
12 | });
13 |
14 | map.addControl(geocoder);
15 |
16 | let searchBar = document.querySelector('#gcd-input-query.gcd-gl-input');
17 | let results = document.querySelector('#gcd-container > ul');
18 | results.classList.add('hide-results');
19 |
20 | searchBar.addEventListener('input', e => {
21 | if (e.target.value === '') {
22 | results.classList.add('hide-results');
23 | searchBar.setAttribute('style', 'opacity: 0.6;');
24 | } else {
25 | results.classList.remove('hide-results');
26 | searchBar.setAttribute('style', 'opacity: 1;');
27 | }
28 | });
29 |
30 | geocoder.on('addresschosen', () => {
31 | searchBar.setAttribute('style', 'opacity: 0.6;');
32 | results.classList.add('hide-results');
33 | });
34 | }
35 |
--------------------------------------------------------------------------------
/src/utils/copy-color.js:
--------------------------------------------------------------------------------
1 | function hexToRgbA(hex, opacity) {
2 | let c;
3 | if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
4 | c = hex.substring(1).split('');
5 | if (c.length === 3) {
6 | c = [c[0], c[0], c[1], c[1], c[2], c[2]];
7 | }
8 | c = '0x' + c.join('');
9 | return {
10 | r: (c >> 16) & 255,
11 | g: (c >> 8) & 255,
12 | b: c & 255,
13 | a: 255 * parseFloat(opacity),
14 | };
15 | }
16 | throw new Error('Bad Hex');
17 | }
18 |
19 | function rgbaToHsla(hex, opacity) {
20 | let rgba = hexToRgbA(hex, opacity);
21 | let r = rgba.r,
22 | g = rgba.g,
23 | b = rgba.b,
24 | a = rgba.a;
25 |
26 | r /= 255;
27 | g /= 255;
28 | b /= 255;
29 |
30 | let cmin = Math.min(r, g, b),
31 | cmax = Math.max(r, g, b),
32 | delta = cmax - cmin,
33 | h = 0,
34 | s = 0,
35 | l = 0;
36 |
37 | if (delta === 0) h = 0;
38 | else if (cmax === r) h = ((g - b) / delta) % 6;
39 | else if (cmax === g) h = (b - r) / delta + 2;
40 | else h = (r - g) / delta + 4;
41 |
42 | h = Math.round(h * 60);
43 |
44 | if (h < 0) h += 360;
45 | l = (cmax + cmin) / 2;
46 | s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
47 |
48 | s = +(s * 100).toFixed(1);
49 | l = +(l * 100).toFixed(1);
50 |
51 | return {
52 | h,
53 | s,
54 | l,
55 | a,
56 | };
57 | }
58 |
59 | export default function copyColor(colorsArray, opacity, text) {
60 | if (!colorsArray.length) return null;
61 |
62 | let tempColorsArray = [];
63 |
64 | if (text === 'hex') colorsArray.map(color => tempColorsArray.push(color));
65 | else if (text === 'rgba')
66 | colorsArray.map(color => tempColorsArray.push(hexToRgbA(color, opacity)));
67 | else if (text === 'hsla')
68 | colorsArray.map(color => tempColorsArray.push(rgbaToHsla(color, opacity)));
69 |
70 | return tempColorsArray;
71 | }
72 |
--------------------------------------------------------------------------------
/src/utils/current-location.js:
--------------------------------------------------------------------------------
1 | import Point from 'ol/geom/Point';
2 | import Feature from 'ol/Feature';
3 | import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
4 | import { circular } from 'ol/geom/Polygon';
5 | import { fromLonLat } from 'ol/proj';
6 | import View from 'ol/View';
7 | import { Vector as VectorSource } from 'ol/source';
8 | import { Vector as VectorLayer } from 'ol/layer';
9 |
10 | let map = {};
11 |
12 | export function setMap(mapVar) {
13 | map = mapVar;
14 | }
15 |
16 | export function handleLocationButton() {
17 | navigator.geolocation.getCurrentPosition(position => {
18 | let currentLocation = [position.coords.longitude, position.coords.latitude];
19 | let view = new View({ center: fromLonLat(currentLocation), zoom: 12 });
20 |
21 | const accuracy = circular(currentLocation, position.coords.accuracy);
22 | let accuracyFeature = new Feature(accuracy);
23 | let positionFeature = new Feature(new Point(fromLonLat(currentLocation)));
24 |
25 | positionFeature.setStyle(
26 | new Style({
27 | image: new CircleStyle({
28 | radius: 6,
29 | fill: new Fill({
30 | color: '#3399CC',
31 | }),
32 | stroke: new Stroke({
33 | color: '#fff',
34 | width: 2,
35 | }),
36 | }),
37 | })
38 | );
39 |
40 | new VectorLayer({
41 | map: map,
42 | source: new VectorSource({
43 | features: [accuracyFeature, positionFeature],
44 | }),
45 | });
46 |
47 | map.setView(view);
48 | });
49 | }
50 |
--------------------------------------------------------------------------------
/src/utils/get-colors-array.js:
--------------------------------------------------------------------------------
1 | export default function getColorsArray(colors) {
2 | if (!colors) return [];
3 | return colors.split('-').map(color => `#${color}`);
4 | }
5 |
--------------------------------------------------------------------------------
/src/utils/get-colors-string.js:
--------------------------------------------------------------------------------
1 | export default function getColorsString(colorsArray) {
2 | let tempColorsArray = colorsArray;
3 | if (!tempColorsArray.length) return undefined;
4 | tempColorsArray = tempColorsArray.map(color => color.replace('#', ''));
5 | return tempColorsArray.join().replace(/,/g, '-');
6 | }
7 |
--------------------------------------------------------------------------------
/src/utils/get-rgb-colors-array.js:
--------------------------------------------------------------------------------
1 | import Rainbow from 'rainbowvis.js';
2 |
3 | function hexToRgb(hexColor) {
4 | /* hexColor to rgb */
5 | const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(
6 | '#' + hexColor
7 | );
8 | return result
9 | ? {
10 | r: parseInt(result[1], 16),
11 | g: parseInt(result[2], 16),
12 | b: parseInt(result[3], 16),
13 | }
14 | : {
15 | r: 0,
16 | g: 0,
17 | b: 0,
18 | };
19 | }
20 |
21 | export default function getRgbColorsArray(spectrumColor) {
22 | const rainbow = new Rainbow();
23 | const numberOfItems = 101;
24 | rainbow.setNumberRange(1, numberOfItems);
25 | rainbow.setSpectrum(...spectrumColor);
26 |
27 | const rgbColorsArray = [];
28 | for (let i = 1; i <= numberOfItems; i++) {
29 | const hexColour = rainbow.colourAt(i);
30 | rgbColorsArray.push(hexToRgb(hexColour));
31 | }
32 |
33 | return rgbColorsArray;
34 | }
35 |
--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
1 | export { default as getRgbColorsArray } from './get-rgb-colors-array';
2 | export { default as getColorsArray } from './get-colors-array';
3 | export { default as getColorsString } from './get-colors-string';
4 | export { default as copyColor } from './copy-color';
5 | export { setMap, handleLocationButton } from './current-location';
6 | export { default as addSearchControl } from './add-search-control';
7 | export { default as themeToggler } from './theme-toggler';
8 |
--------------------------------------------------------------------------------
/src/utils/theme-toggler.js:
--------------------------------------------------------------------------------
1 | import { getSource } from 'api/map-data';
2 | import { BASEMAP_LIGHT_STYLE } from 'config';
3 | import { BASEMAP_DARK_STYLE } from 'config';
4 |
5 | export default function themeToggler(theme, setTheme) {
6 | theme === 'light' ? setTheme('light') : setTheme('dark');
7 | let source = getSource();
8 |
9 | if (theme === 'dark') source.setUrl(BASEMAP_DARK_STYLE);
10 | else if (theme === 'light') source.setUrl(BASEMAP_LIGHT_STYLE);
11 |
12 | source.refresh();
13 | }
14 |
--------------------------------------------------------------------------------
{
89 | setItemColorStatus(false);
90 | }}
91 | />
92 |
97 | ) : null}
98 |
99 | );
100 | }
101 |
--------------------------------------------------------------------------------
/src/components/main-app/sidebar-wrapper/index.js:
--------------------------------------------------------------------------------
1 | export { default as TilesInput } from './tiles-input';
2 | export { default as ShapeInput } from './shape-input';
3 | export { default as ColorsInput } from './colors-input';
4 | export { default as AlphaInput } from './alpha-input';
5 |
--------------------------------------------------------------------------------
/src/components/main-app/sidebar-wrapper/shape-input.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { URL_SHAPE, URL_UPDATE_PUSH } from 'config';
3 | import { StringParam, useQueryParam } from 'use-query-params';
4 |
5 | export default function ShapeInput() {
6 | const [shape, onChangeShape] = useQueryParam(URL_SHAPE, StringParam);
7 |
8 | return (
9 | <>
10 | Shape URL (Only Topo JSON)
11 | onChangeShape(e.target.value, URL_UPDATE_PUSH)} 17 | /> 18 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /src/components/main-app/sidebar-wrapper/tiles-input.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { URL_TILES, URL_UPDATE_PUSH } from 'config'; 3 | import { StringParam, useQueryParam } from 'use-query-params'; 4 | 5 | export default function TilesInput() { 6 | const [tiles, onChangeTiles] = useQueryParam(URL_TILES, StringParam); 7 | 8 | return ( 9 | <> 10 |Tiles URL (XYZ Format)
11 | onChangeTiles(e.target.value, URL_UPDATE_PUSH)} 17 | /> 18 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /src/components/main-app/sidebar.js: -------------------------------------------------------------------------------- 1 | import { URL_COLORS, URL_OPACITY } from 'config'; 2 | import React, { useEffect, useState } from 'react'; 3 | import { StringParam, useQueryParam } from 'use-query-params'; 4 | import { copyColor, getColorsArray, themeToggler } from 'utils'; 5 | import { 6 | TilesInput, 7 | ShapeInput, 8 | ColorsInput, 9 | AlphaInput, 10 | } from './sidebar-wrapper'; 11 | import { ThemeProvider } from 'styled-components'; 12 | import { GlobalStyles } from './themes/global-styles'; 13 | import { lightTheme, darkTheme } from './themes/themes'; 14 | import '../../sass/index.sass'; 15 | import JSONPretty from 'react-json-pretty'; 16 | import { CopyToClipboard } from 'react-copy-to-clipboard'; 17 | import * as JSONPrettyMon from 'react-json-pretty/dist/acai'; 18 | 19 | export default function Sidebar({ setTheme, theme }) { 20 | const [colors] = useQueryParam(URL_COLORS, StringParam); 21 | const [opacity] = useQueryParam(URL_OPACITY, StringParam); 22 | const [text, setText] = useState(''); 23 | const [colorFormat, setColorFormat] = useState('rgba'); 24 | 25 | useEffect(() => { 26 | const colorArray = getColorsArray(colors); 27 | setText( 28 | JSON.stringify(copyColor(colorArray, opacity, colorFormat), undefined, 4) 29 | ); 30 | }, [colors, opacity, colorFormat]); 31 | 32 | const handleColorFormatChange = event => { 33 | setColorFormat(event.target.value); 34 | }; 35 | 36 | return ( 37 |
40 |
95 |
41 |
64 |
66 |
67 |
69 |
70 |
72 |
74 |
75 | 84 |
85 |
86 |
87 |
88 |
94 | 42 | RasterPlayground 43 |
44 |
45 |
62 |
63 | 64 |
66 |
67 |
69 |
70 |
72 |
74 |
75 | 84 |
88 |