diff --git a/app/package-lock.json b/app/package-lock.json index 8cfd0355b..b163b6a20 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -68,6 +68,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-dropzone": "^14.2.3", + "react-map-gl": "^7.1.7", "react-redux": "^9.1.2", "react-refresh": "~0.14.2", "react-router": "^5.3.4", @@ -8001,6 +8002,15 @@ "@types/pbf": "*" } }, + "node_modules/@types/mapbox-gl": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-3.4.1.tgz", + "integrity": "sha512-NsGKKtgW93B+UaLPti6B7NwlxYlES5DpV5Gzj9F75rK5ALKsqSk15CiEHbOnTr09RGbr6ZYiCdI+59NNNcAImg==", + "license": "MIT", + "dependencies": { + "@types/geojson": "*" + } + }, "node_modules/@types/minimist": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.5.tgz", @@ -8963,6 +8973,15 @@ "dequal": "^2.0.3" } }, + "node_modules/arr-union": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz", + "integrity": "sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/array-buffer-byte-length": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz", @@ -9163,6 +9182,15 @@ "node": "*" } }, + "node_modules/assign-symbols": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz", + "integrity": "sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/astral-regex": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz", @@ -9724,6 +9752,25 @@ "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==", "license": "MIT" }, + "node_modules/bytewise": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/bytewise/-/bytewise-1.1.0.tgz", + "integrity": "sha512-rHuuseJ9iQ0na6UDhnrRVDh8YnWVlU6xM3VH6q/+yHDeUH2zIhUzP+2/h3LIrhLDBtTqzWpE3p3tP/boefskKQ==", + "license": "MIT", + "dependencies": { + "bytewise-core": "^1.2.2", + "typewise": "^1.0.3" + } + }, + "node_modules/bytewise-core": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/bytewise-core/-/bytewise-core-1.2.3.tgz", + "integrity": "sha512-nZD//kc78OOxeYtRlVk8/zXqTB4gf/nlguL1ggWA8FuchMyOxcyHR4QPQZMUmA7czC+YnaBrPUCubqAWe50DaA==", + "license": "MIT", + "dependencies": { + "typewise-core": "^1.2" + } + }, "node_modules/cac": { "version": "6.7.14", "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz", @@ -12606,6 +12653,18 @@ "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } }, + "node_modules/extend-shallow": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", + "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==", + "license": "MIT", + "dependencies": { + "is-extendable": "^0.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -13428,6 +13487,15 @@ "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1" } }, + "node_modules/get-value": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz", + "integrity": "sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/git-raw-commits": { "version": "2.0.11", "resolved": "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-2.0.11.tgz", @@ -14489,6 +14557,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/is-extendable": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz", + "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", @@ -14898,6 +14975,15 @@ "dev": true, "license": "ISC" }, + "node_modules/isobject": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", + "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/istanbul-lib-coverage": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz", @@ -20185,6 +20271,61 @@ "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", "license": "MIT" }, + "node_modules/react-map-gl": { + "version": "7.1.7", + "resolved": "https://registry.npmjs.org/react-map-gl/-/react-map-gl-7.1.7.tgz", + "integrity": "sha512-mwjc0obkBJOXCcoXQr3VoLqmqwo9vS4bXfbGsdxXzEgVCv/PM0v+1QggL7W0d/ccIy+VCjbXNlGij+PENz6VNg==", + "license": "MIT", + "dependencies": { + "@maplibre/maplibre-gl-style-spec": "^19.2.1", + "@types/mapbox-gl": ">=1.0.0" + }, + "peerDependencies": { + "mapbox-gl": ">=1.13.0", + "maplibre-gl": ">=1.13.0", + "react": ">=16.3.0", + "react-dom": ">=16.3.0" + }, + "peerDependenciesMeta": { + "mapbox-gl": { + "optional": true + }, + "maplibre-gl": { + "optional": true + } + } + }, + "node_modules/react-map-gl/node_modules/@maplibre/maplibre-gl-style-spec": { + "version": "19.3.3", + "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-19.3.3.tgz", + "integrity": "sha512-cOZZOVhDSulgK0meTsTkmNXb1ahVvmTmWmfx9gRBwc6hq98wS9JP35ESIoNq3xqEan+UN+gn8187Z6E4NKhLsw==", + "license": "ISC", + "dependencies": { + "@mapbox/jsonlint-lines-primitives": "~2.0.2", + "@mapbox/unitbezier": "^0.0.1", + "json-stringify-pretty-compact": "^3.0.0", + "minimist": "^1.2.8", + "rw": "^1.3.3", + "sort-object": "^3.0.3" + }, + "bin": { + "gl-style-format": "dist/gl-style-format.mjs", + "gl-style-migrate": "dist/gl-style-migrate.mjs", + "gl-style-validate": "dist/gl-style-validate.mjs" + } + }, + "node_modules/react-map-gl/node_modules/json-stringify-pretty-compact": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-3.0.0.tgz", + "integrity": "sha512-Rc2suX5meI0S3bfdZuA7JMFBGkJ875ApfVyq2WHELjBiiG22My/l7/8zPpH/CfFVQHuVLd8NLR0nv6vi0BYYKA==", + "license": "MIT" + }, + "node_modules/react-map-gl/node_modules/rw": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz", + "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==", + "license": "BSD-3-Clause" + }, "node_modules/react-redux": { "version": "9.1.2", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.2.tgz", @@ -21746,6 +21887,33 @@ "node": ">= 0.4" } }, + "node_modules/set-value": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz", + "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==", + "license": "MIT", + "dependencies": { + "extend-shallow": "^2.0.1", + "is-extendable": "^0.1.1", + "is-plain-object": "^2.0.3", + "split-string": "^3.0.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/set-value/node_modules/is-plain-object": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", + "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==", + "license": "MIT", + "dependencies": { + "isobject": "^3.0.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/setimmediate": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", @@ -22033,6 +22201,41 @@ "node": ">= 10" } }, + "node_modules/sort-asc": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.2.0.tgz", + "integrity": "sha512-umMGhjPeHAI6YjABoSTrFp2zaBtXBej1a0yKkuMUyjjqu6FJsTF+JYwCswWDg+zJfk/5npWUUbd33HH/WLzpaA==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/sort-desc": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.2.0.tgz", + "integrity": "sha512-NqZqyvL4VPW+RAxxXnB8gvE1kyikh8+pR+T+CXLksVRN9eiQqkQlPwqWYU0mF9Jm7UnctShlxLyAt1CaBOTL1w==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/sort-object": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-3.0.3.tgz", + "integrity": "sha512-nK7WOY8jik6zaG9CRwZTaD5O7ETWDLZYMM12pqY8htll+7dYeqGfEUPcUBHOpSJg2vJOrvFIY2Dl5cX2ih1hAQ==", + "license": "MIT", + "dependencies": { + "bytewise": "^1.1.0", + "get-value": "^2.0.2", + "is-extendable": "^0.1.1", + "sort-asc": "^0.2.0", + "sort-desc": "^0.2.0", + "union-value": "^1.0.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", @@ -22156,6 +22359,55 @@ "node": "*" } }, + "node_modules/split-string": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz", + "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==", + "license": "MIT", + "dependencies": { + "extend-shallow": "^3.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/split-string/node_modules/extend-shallow": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz", + "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==", + "license": "MIT", + "dependencies": { + "assign-symbols": "^1.0.0", + "is-extendable": "^1.0.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/split-string/node_modules/is-extendable": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz", + "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==", + "license": "MIT", + "dependencies": { + "is-plain-object": "^2.0.4" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/split-string/node_modules/is-plain-object": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", + "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==", + "license": "MIT", + "dependencies": { + "isobject": "^3.0.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/split2": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/split2/-/split2-3.2.2.tgz", @@ -23842,6 +24094,21 @@ "typescript-compare": "^0.0.2" } }, + "node_modules/typewise": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/typewise/-/typewise-1.0.3.tgz", + "integrity": "sha512-aXofE06xGhaQSPzt8hlTY+/YWQhm9P0jYUp1f2XtmW/3Bk0qzXcyFWAtPoo2uTGQj1ZwbDuSyuxicq+aDo8lCQ==", + "license": "MIT", + "dependencies": { + "typewise-core": "^1.2.0" + } + }, + "node_modules/typewise-core": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/typewise-core/-/typewise-core-1.2.0.tgz", + "integrity": "sha512-2SCC/WLzj2SbUwzFOzqMCkz5amXLlxtJqDKTICqg30x+2DZxcfZN2MvQZmGfXWKNWaKK9pBPsvkcwv8bF/gxKg==", + "license": "MIT" + }, "node_modules/ufo": { "version": "1.5.4", "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.4.tgz", @@ -23929,6 +24196,21 @@ "node": ">=4" } }, + "node_modules/union-value": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz", + "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==", + "license": "MIT", + "dependencies": { + "arr-union": "^3.1.0", + "get-value": "^2.0.6", + "is-extendable": "^0.1.1", + "set-value": "^2.0.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/unique-filename": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz", diff --git a/app/package.json b/app/package.json index c2c06312b..616157acf 100644 --- a/app/package.json +++ b/app/package.json @@ -72,6 +72,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-dropzone": "^14.2.3", + "react-map-gl": "^7.1.7", "react-redux": "^9.1.2", "react-refresh": "~0.14.2", "react-router": "^5.3.4", diff --git a/app/src/UI/App.tsx b/app/src/UI/App.tsx index 3d565fa30..39fd46bfe 100644 --- a/app/src/UI/App.tsx +++ b/app/src/UI/App.tsx @@ -4,6 +4,7 @@ import { Redirect, Route, useHistory } from 'react-router-dom'; import './App.css'; import { Footer } from './Footer/Footer'; import { Header } from './Header/Header'; +import { MainMap } from './Map2/MainMap'; import { Map } from './Map2/Map'; import { LandingComponent } from './Overlay/Landing/Landing'; import Overlay from './Overlay/Overlay'; @@ -32,6 +33,7 @@ import AlertsContainer from './AlertsContainer/AlertsContainer'; import UserInputModalController from './UserInputModals/UserInputModalController'; import { MOBILE, PLATFORM, Platform } from 'state/build-time-config'; import { WhatsHereTable } from 'UI/Overlay/WhatsHere/WhatsHereTable'; +import { MapProvider } from 'react-map-gl'; // lazy-loaded components const BatchList = React.lazy(() => import('./Overlay/Batch/BatchList')); @@ -226,6 +228,7 @@ const OverlayContentMemo = () => { const App: React.FC = () => { const authInitiated = useSelector((state) => state.Auth.initialized); + const authenticated = useSelector((state) => state.Auth.authenticated); const { detail: errorDetail, hasCrashed } = useSelector(selectGlobalErrorState); const { disrupted } = useSelector(selectAuth); const ref = useRef(0); @@ -268,27 +271,39 @@ const App: React.FC = () => { return (
- - -
+ + + +
- - - - - - - + {!authenticated ? ( + + + + + + + + ) : ( + + + + + + + + )} - -
); }; diff --git a/app/src/UI/Map2/MainMap.tsx b/app/src/UI/Map2/MainMap.tsx new file mode 100644 index 000000000..99f22b526 --- /dev/null +++ b/app/src/UI/Map2/MainMap.tsx @@ -0,0 +1,218 @@ +import React, { useEffect, useRef, useState } from 'react'; +import { useSelector } from 'utils/use_selector'; +import Map, { NavigationControl, ScaleControl } from 'react-map-gl/maplibre'; +import { getCurrentJWT } from 'state/sagas/auth/auth'; +import maplibregl from 'maplibre-gl'; +import { PublicLayer } from './PublicLayer'; +import { MOBILE } from 'state/build-time-config'; + +// to make base layers work on this map, will be refactored in the next iteration +const wmsBaseLayersValue: Record = { + 'Esri-Sat-LayerHD': 'esri-sat-layer-hd', + 'Esri-Sat-LayerSD': 'esri-sat-layer-sd', + 'Esri-Topo': 'esri-topo' +}; + +type MapStyleSourceDefinition = { + name: string; + source: maplibregl.SourceSpecification; +}; + +// Base map sources +const mapStyleSources: MapStyleSourceDefinition[] = [ + { + name: 'esri-sat-label-source', + source: { + type: 'raster', + tiles: [ + 'https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}' + ], + tileSize: 256, + attribution: 'Powered by ESRI', + maxzoom: 18 + } + }, + { + name: 'esri-sat-layer-hd', + source: { + type: 'raster', + tiles: ['https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'], + attribution: 'Powered by ESRI', + tileSize: 256, + maxzoom: 24 + } + }, + { + name: 'esri-sat-layer-sd', + source: { + type: 'raster', + tiles: ['https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'], + attribution: 'Powered by ESRI', + tileSize: 256, + maxzoom: 24 + } + }, + { + name: 'esri-topo', + source: { + type: 'raster', + tiles: ['https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}'], + attribution: 'Powered by ESRI', + tileSize: 256, + maxzoom: 24 + } + } +]; + +// Base map layers +const mapStyleLayers: Record = { + 'esri-sat-layer-hd': [ + { + id: 'esri-sat-layer-hd', + type: 'raster', + source: 'esri-sat-layer-hd', + minzoom: 0 + }, + { + id: `esri-sat-label-hd`, + type: 'raster', + source: 'esri-sat-label-source', + minzoom: 0 + } + ], + 'esri-sat-layer-sd': [ + { + id: 'esri-sat-layer-sd', + type: 'raster', + source: 'esri-sat-layer-sd', + minzoom: 0 + }, + { + id: 'esri-sat-label-sd', + type: 'raster', + source: 'esri-sat-label-source', + minzoom: 0 + } + ], + 'esri-topo': [ + { + id: 'esri-topo', + type: 'raster', + source: 'esri-topo', + minzoom: 0 + } + ] +}; + +// name will be changed to 'Map' upon full transition +export const MainMap = ({ children }) => { + const API_BASE = useSelector((state) => state.Configuration.current.API_BASE); + const authenticated = useSelector((state) => state.Auth.authenticated); + const [currentAuthHeader, setCurrentAuthHeader] = useState(''); + const authHeaderRef = useRef(); + authHeaderRef.current = currentAuthHeader; + const baseMapLayer = useSelector((state) => state.Map.baseMapLayer); + const map_center = useSelector((state) => state.Map.map_center); + + if (!baseMapLayer) { + return null; + } + + const mapstyle_current_layer: maplibregl.LayerSpecification[] = mapStyleLayers[wmsBaseLayersValue[baseMapLayer]]; + + /* map can have platform-specific options */ + const platformOptions = (() => { + if (MOBILE) { + return { + maxBounds: [-141.7761, 46.41459, -114.049, 60.00678] as maplibregl.LngLatBoundsLike + }; + } + return {}; + })(); + + useEffect(() => { + if (!authenticated) { + return; + } + + // get it once with no delay + getCurrentJWT().then((header) => { + setCurrentAuthHeader(header); + }); + + // and then regularly thereafter + const id = setInterval(() => { + getCurrentJWT().then((header) => { + setCurrentAuthHeader(header); + }); + }, 10000); + + return () => { + clearInterval(id); + }; + }, [authenticated]); + + // for logged in or out layers: + const getAuthHeaderCallback = () => { + if (authHeaderRef.current === undefined) { + console.error('requested access before header received'); + return ''; + } + return authHeaderRef.current; + }; + const transformRequest: maplibregl.RequestTransformFunction = (url) => { + if (url.includes(API_BASE)) { + return { + url, + headers: { + Authorization: getAuthHeaderCallback() + } + }; + } + return { + url + }; + }; + return ( +
+
+ { + result[item.name] = item.source; + return result; + }, {}) + }, + layers: mapstyle_current_layer + }} + > + + + + {!authenticated && } + +
+ Loading tiles... +
+ {children} +
+
+ ); +}; diff --git a/app/src/UI/Map2/PublicLayer.tsx b/app/src/UI/Map2/PublicLayer.tsx new file mode 100644 index 000000000..eb48930b3 --- /dev/null +++ b/app/src/UI/Map2/PublicLayer.tsx @@ -0,0 +1,117 @@ +import React from 'react'; +import { Source, Layer } from 'react-map-gl/maplibre'; +import maplibregl from 'maplibre-gl'; +import { PMTiles, Protocol } from 'pmtiles'; +import { MOBILE } from 'state/build-time-config'; + +export const PublicLayer = () => { + const pmtilesProtocol = new Protocol(); + maplibregl.addProtocol('pmtiles', (request) => { + return new Promise((resolve, reject) => { + const callback = (err, data) => { + if (err) { + reject(err); + } else { + resolve({ data }); + } + }; + pmtilesProtocol.tile(request, callback); + }); + }); + + const PMTILES_URL = `https://nrs.objectstore.gov.bc.ca/rzivsz/invasives-prod.pmtiles/{z}/{x}/{y}`; + + const p = new PMTiles(PMTILES_URL); + + // this is so we share one instance across the JS code and the map renderer + pmtilesProtocol.add(p); + + // available from CDN, but not in asset pack + let VECTOR_MAP_FONT_FACE = 'Open Sans Bold'; + if (MOBILE) { + // available locally, but not from CDN + VECTOR_MAP_FONT_FACE = 'Noto Sans Bold'; + } + + return ( + <> + + + + + + + + ); +}; diff --git a/app/src/UI/Map2/RecordSetLayers3.tsx b/app/src/UI/Map2/RecordSetLayers3.tsx new file mode 100644 index 000000000..26177fc59 --- /dev/null +++ b/app/src/UI/Map2/RecordSetLayers3.tsx @@ -0,0 +1,82 @@ +import { Source, Layer } from 'react-map-gl/maplibre'; +import { useSelector } from 'utils/use_selector'; + +const getPaintBySchemeOrColor = (layer: any) => { + const FALLBACK_COLOR = 'orange'; + if (layer?.layerState?.colorScheme) { + return [ + 'match', + ['get', 'activity_subtype'], + 'Activity_Biocontrol_Collection', + layer.layerState.colorScheme['Activity_Biocontrol_Collection'] || FALLBACK_COLOR, + 'Activity_Biocontrol_Release', + layer.layerState.colorScheme['Activity_Biocontrol_Release'] || FALLBACK_COLOR, + 'Activity_Monitoring_BiocontrolDispersal_TerrestrialPlant', + layer.layerState.colorScheme['Activity_Monitoring_BiocontrolDispersal_TerrestrialPlant'] || FALLBACK_COLOR, + 'Activity_Monitoring_BiocontrolRelease_TerrestrialPlant', + layer.layerState.colorScheme['Activity_Monitoring_BiocontrolRelease_TerrestrialPlant'] || FALLBACK_COLOR, + 'Activity_Monitoring_ChemicalTerrestrialAquaticPlant', + layer.layerState.colorScheme['Activity_Monitoring_ChemicalTerrestrialAquaticPlant'] || FALLBACK_COLOR, + 'Activity_Monitoring_MechanicalTerrestrialAquaticPlant', + layer.layerState.colorScheme['Activity_Monitoring_MechanicalTerrestrialAquaticPlant'] || FALLBACK_COLOR, + 'Activity_Observation_PlantAquatic', + layer.layerState.colorScheme['Activity_Observation_PlantAquatic'] || FALLBACK_COLOR, + 'Activity_Observation_PlantTerrestrial', + layer.layerState.colorScheme['Activity_Observation_PlantTerrestrial'] || FALLBACK_COLOR, + 'Activity_Treatment_ChemicalPlantAquatic', + layer.layerState.colorScheme['Activity_Treatment_ChemicalPlantAquatic'] || FALLBACK_COLOR, + 'Activity_Treatment_ChemicalPlantTerrestrial', + layer.layerState.colorScheme['Activity_Treatment_ChemicalPlantTerrestrial'] || FALLBACK_COLOR, + 'Activity_Treatment_MechanicalPlantAquatic', + layer.layerState.colorScheme['Activity_Treatment_MechanicalPlantAquatic'] || FALLBACK_COLOR, + 'Activity_Treatment_MechanicalPlantTerrestrial', + layer.layerState.colorScheme['Activity_Treatment_MechanicalPlantTerrestrial'] || FALLBACK_COLOR, + layer.layerState.color || FALLBACK_COLOR + ]; + } else { + return layer?.layerState?.color || FALLBACK_COLOR; + } +}; +export const RecordSetLayers = () => { + const layersInStore = useSelector((state) => state.Map.layers); + const API_BASE = useSelector((state) => state.Configuration.current.API_BASE); + + return ( + <> + {layersInStore.map((layer) => { + if (layer.type !== 'Activity') return; + if (!layer.filterObject) return; + + const source = layer.recordSetID + 'source' + 'points'; + const layerIDName = 'recordset-layer-' + layer.recordSetID + '-hash-' + layer.tableFiltersHash; + + const url = `${API_BASE}/api/vectors/activities/{z}/{x}/{y}?filterObject=${encodeURI(JSON.stringify(layer.filterObject))}`; + return ( + + + + + ); + })} + + ); +};