mirror of
https://github.com/Crosstalk-Solutions/project-nomad.git
synced 2026-03-28 03:29:25 +01:00
feat(Maps): maps use full page by default
This commit is contained in:
Jake Turner
Jake Turner
parent
c3278efc01
commit
52e90041f4
|
|
@ -3,10 +3,8 @@ import maplibregl from 'maplibre-gl'
|
|||
import 'maplibre-gl/dist/maplibre-gl.css'
|
||||
import { Protocol } from 'pmtiles'
|
||||
import { useEffect } from 'react'
|
||||
import { useWindowSize } from 'usehooks-ts'
|
||||
|
||||
export default function MapComponent() {
|
||||
const { width = 0, height = 0 } = useWindowSize()
|
||||
|
||||
// Add the PMTiles protocol to maplibre-gl
|
||||
useEffect(() => {
|
||||
|
|
@ -22,11 +20,8 @@ export default function MapComponent() {
|
|||
<Map
|
||||
reuseMaps
|
||||
style={{
|
||||
width: width,
|
||||
height: height - 175,
|
||||
borderRadius: '5px',
|
||||
boxShadow: '0 0 4px rgba(0,0,0,0.3)',
|
||||
backgroundColor: '#fff',
|
||||
width: '100%',
|
||||
height: '100vh',
|
||||
}}
|
||||
mapStyle={`http://${window.location.hostname}:${window.location.port}/api/maps/styles`}
|
||||
mapLib={maplibregl}
|
||||
|
|
@ -36,8 +31,8 @@ export default function MapComponent() {
|
|||
zoom: 3.5,
|
||||
}}
|
||||
>
|
||||
<NavigationControl />
|
||||
<FullscreenControl />
|
||||
<NavigationControl style={{ marginTop: '110px', marginRight: '36px' }} />
|
||||
<FullscreenControl style={{ marginTop: '30px', marginRight: '36px' }} />
|
||||
</Map>
|
||||
</MapProvider>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -18,24 +18,26 @@ export default function Maps(props: {
|
|||
return (
|
||||
<MapsLayout>
|
||||
<Head title="Maps" />
|
||||
<div className="flex border-b border-gray-900/10 p-4 justify-between">
|
||||
<div className="relative w-full h-screen overflow-hidden">
|
||||
{/* Nav and alerts are overlayed */}
|
||||
<div className="absolute top-0 left-0 right-0 z-50 flex justify-between p-4 bg-gray-50 backdrop-blur-sm shadow-sm">
|
||||
<Link href="/home" className="flex items-center">
|
||||
<IconArrowLeft className="mr-2" size={24} />
|
||||
<p className="text-lg text-gray-600">Back to Home</p>
|
||||
</Link>
|
||||
<Link href="/settings/maps">
|
||||
<Link href="/settings/maps" className='mr-4'>
|
||||
<StyledButton variant="primary" icon="IconSettings">
|
||||
Manage Map Regions
|
||||
</StyledButton>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="w-full min-h-screen flex flex-col items-center justify-center py-4 mx-4">
|
||||
{alertMessage && (
|
||||
<div className="absolute top-20 left-4 right-4 z-50">
|
||||
<AlertWithButton
|
||||
title={alertMessage}
|
||||
type="warning"
|
||||
variant="solid"
|
||||
className="w-full !mb-4"
|
||||
className="w-full"
|
||||
buttonProps={{
|
||||
variant: 'secondary',
|
||||
children: 'Go to Map Settings',
|
||||
|
|
@ -45,9 +47,12 @@ export default function Maps(props: {
|
|||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute inset-0">
|
||||
<MapComponent />
|
||||
</div>
|
||||
</div>
|
||||
</MapsLayout>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
22
admin/package-lock.json
generated
22
admin/package-lock.json
generated
|
|
@ -67,7 +67,6 @@
|
|||
"tar": "^7.5.6",
|
||||
"tesseract.js": "^7.0.0",
|
||||
"url-join": "^5.0.0",
|
||||
"usehooks-ts": "^3.1.1",
|
||||
"yaml": "^2.8.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -9933,12 +9932,6 @@
|
|||
"integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash.debounce": {
|
||||
"version": "4.0.8",
|
||||
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash.defaults": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
|
||||
|
|
@ -14616,21 +14609,6 @@
|
|||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/usehooks-ts": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.1.tgz",
|
||||
"integrity": "sha512-I4diPp9Cq6ieSUH2wu+fDAVQO43xwtulo+fKEidHUwZPnYImbtkTjzIJYcDcJqxgmX31GVqNFURodvcgHcW0pA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"lodash.debounce": "^4.0.8"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.15.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17 || ^18 || ^19 || ^19.0.0-rc"
|
||||
}
|
||||
},
|
||||
"node_modules/util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
|
|
|
|||
|
|
@ -119,7 +119,6 @@
|
|||
"tar": "^7.5.6",
|
||||
"tesseract.js": "^7.0.0",
|
||||
"url-join": "^5.0.0",
|
||||
"usehooks-ts": "^3.1.1",
|
||||
"yaml": "^2.8.0"
|
||||
},
|
||||
"hotHook": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user