-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added CSS for arcgis and maplibre mapping clients, and other general …
…updates (#12)
- Loading branch information
Showing
10 changed files
with
100 additions
and
83 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,6 +4,8 @@ | |
| "Algoa", | ||
| "appleboy", | ||
| "arange", | ||
| "arcgis", | ||
| "BASEMAP", | ||
| "bottomlat", | ||
| "browserslist", | ||
| "bson", | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,34 +1,52 @@ | ||
| /** | ||
| * This page doesn't support SSR | ||
| */ | ||
| import { useState, useEffect, lazy, Suspense } from 'react' | ||
| import { useState, useEffect, lazy, Suspense, useContext, useMemo } from 'react' | ||
| import { ctx as configContext } from '../../modules/config' | ||
| import { createPortal } from 'react-dom' | ||
| import Box from '@mui/material/Box' | ||
| import { Linear as Loading } from '../../components/loading' | ||
|
|
||
| const Map = lazy(() => import('./map')) | ||
|
|
||
| export default () => { | ||
| const [isClient, setIsClient] = useState(false) | ||
| const { IMPORT_MAP } = useContext(configContext) | ||
|
|
||
| useEffect(() => { | ||
| setIsClient(true) | ||
| }, []) | ||
|
|
||
| const arcGisVersion = useMemo( | ||
| () => IMPORT_MAP?.scopes['../']['@arcgis/core/Map'].match(/\@arcgis\/core@(.*)\/Map.js/)[1], | ||
| [] | ||
| ) | ||
|
|
||
| if (!isClient) { | ||
| return null | ||
| } | ||
|
|
||
| return ( | ||
| <Suspense fallback={<Loading />}> | ||
| <Box | ||
| sx={{ | ||
| flexGrow: 1, | ||
| background: theme => theme.palette.grey[100], | ||
| transition: theme => theme.transitions.create(['background-color']), | ||
| }} | ||
| > | ||
| <Map /> | ||
| </Box> | ||
| </Suspense> | ||
| <> | ||
| {/* Render the stylesheet into the head */} | ||
| {createPortal( | ||
| <link | ||
| rel="stylesheet" | ||
| href={`https://js.arcgis.com/${arcGisVersion}/esri/themes/light/main.css`} | ||
| />, | ||
| document.getElementsByTagName('head')[0] | ||
| )} | ||
| <Suspense fallback={<Loading />}> | ||
| <Box | ||
| sx={{ | ||
| flexGrow: 1, | ||
| background: theme => theme.palette.grey[100], | ||
| transition: theme => theme.transitions.create(['background-color']), | ||
| }} | ||
| > | ||
| <Map /> | ||
| </Box> | ||
| </Suspense> | ||
| </> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,33 +1,53 @@ | ||
| /** | ||
| * This page doesn't support SSR | ||
| */ | ||
| import { useState, useEffect, lazy, Suspense } from 'react' | ||
| import { useState, useEffect, lazy, Suspense, useContext, useMemo } from 'react' | ||
| import { ctx as configContext } from '../../modules/config' | ||
| import { createPortal } from 'react-dom' | ||
| import Box from '@mui/material/Box' | ||
| import { Linear as Loading } from '../../components/loading' | ||
|
|
||
| const Map = lazy(() => import('./map')) | ||
|
|
||
| export default () => { | ||
| const [isClient, setIsClient] = useState(false) | ||
| const { IMPORT_MAP } = useContext(configContext) | ||
|
|
||
| useEffect(() => { | ||
| setIsClient(true) | ||
| }, []) | ||
|
|
||
| const maplibreVersion = useMemo( | ||
| () => IMPORT_MAP?.scopes['../']['maplibre-gl'].match(/maplibre-gl@(.*)\/dist/)[1], | ||
| [] | ||
| ) | ||
|
|
||
| if (!isClient) { | ||
| return null | ||
| } | ||
|
|
||
| return ( | ||
| <Suspense fallback={<Loading />}> | ||
| <Box | ||
| sx={{ | ||
| flexGrow: 1, | ||
| background: theme => theme.palette.grey[100], | ||
| transition: theme => theme.transitions.create(['background-color']), | ||
| }} | ||
| > | ||
| <Map /> | ||
| </Box> | ||
| </Suspense> | ||
| <> | ||
| {/* Render the stylesheet into the head */} | ||
| {createPortal( | ||
| <link | ||
| rel="stylesheet" | ||
| href={`https://unpkg.com/maplibre-gl@${maplibreVersion}/dist/maplibre-gl.css`} | ||
| />, | ||
| document.getElementsByTagName('head')[0] | ||
| )} | ||
| <Suspense fallback={<Loading />}> | ||
| <Box | ||
| sx={{ | ||
| display: 'flex', | ||
| flexGrow: 1, | ||
| background: theme => theme.palette.grey[100], | ||
| transition: theme => theme.transitions.create(['background-color']), | ||
| }} | ||
| > | ||
| <Map /> | ||
| </Box> | ||
| </Suspense> | ||
| </> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,10 +4,6 @@ | |
| "type": "module", | ||
| "description": "SOMISANA web stack", | ||
| "author": "[email protected]", | ||
| "scripts": { | ||
| "rollup:client": "rollup --config rollup/client.config.js", | ||
| "rollup:ssr": "rollup --config rollup/server.config.js" | ||
| }, | ||
| "dependencies": { | ||
| "@apollo/client": "^3.6.9", | ||
| "@arcgis/core": "^4.24.7", | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| { | ||
| "compilerOptions": { | ||
| "jsx": "react-jsx" | ||
| } | ||
| } |