github-mirror/project-nomad
1
0
Fork 0
mirror of https://github.com/Crosstalk-Solutions/project-nomad.git synced 2026-03-28 03:29:25 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(Maps): maps use full page by default

Browse Source
This commit is contained in:
Jake Turner 2026-02-04 21:54:05 -08:00 committed by Jake Turner
parent c3278efc01
commit 52e90041f4
4 changed files with 36 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
admin/inertia/components/maps/MapComponent.tsx
View File

@ -3,10 +3,8 @@ import maplibregl from 'maplibre-gl'
import 'maplibre-gl/dist/maplibre-gl.css' import 'maplibre-gl/dist/maplibre-gl.css'
import { Protocol } from 'pmtiles' import { Protocol } from 'pmtiles'
import { useEffect } from 'react' import { useEffect } from 'react'
import { useWindowSize } from 'usehooks-ts'
export default function MapComponent() { export default function MapComponent() {
const { width = 0, height = 0 } = useWindowSize()
// Add the PMTiles protocol to maplibre-gl // Add the PMTiles protocol to maplibre-gl
useEffect(() => { useEffect(() => {
@ -22,11 +20,8 @@ export default function MapComponent() {
<Map <Map
reuseMaps reuseMaps
style={{ style={{
width: width, width: '100%',
height: height - 175, height: '100vh',
borderRadius: '5px',
boxShadow: '0 0 4px rgba(0,0,0,0.3)',
backgroundColor: '#fff',
}} }}
mapStyle={`http://${window.location.hostname}:${window.location.port}/api/maps/styles`} mapStyle={`http://${window.location.hostname}:${window.location.port}/api/maps/styles`}
mapLib={maplibregl} mapLib={maplibregl}
@ -36,8 +31,8 @@ export default function MapComponent() {
zoom: 3.5, zoom: 3.5,
}} }}
> >
<NavigationControl /> <NavigationControl style={{ marginTop: '110px', marginRight: '36px' }} />
<FullscreenControl /> <FullscreenControl style={{ marginTop: '30px', marginRight: '36px' }} />
</Map> </Map>
</MapProvider> </MapProvider>
) )

59
admin/inertia/pages/maps.tsx
View File

@ -18,35 +18,40 @@ export default function Maps(props: {
return ( return (
<MapsLayout> <MapsLayout>
<Head title="Maps" /> <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">
<Link href="/home" className="flex items-center"> {/* Nav and alerts are overlayed */}
<IconArrowLeft className="mr-2" size={24} /> <div className="absolute top-0 left-0 right-0 z-50 flex justify-between p-4 bg-gray-50 backdrop-blur-sm shadow-sm">
<p className="text-lg text-gray-600">Back to Home</p> <Link href="/home" className="flex items-center">
</Link> <IconArrowLeft className="mr-2" size={24} />
<Link href="/settings/maps"> <p className="text-lg text-gray-600">Back to Home</p>
<StyledButton variant="primary" icon="IconSettings"> </Link>
Manage Map Regions <Link href="/settings/maps" className='mr-4'>
</StyledButton> <StyledButton variant="primary" icon="IconSettings">
</Link> Manage Map Regions
</div> </StyledButton>
<div className="w-full min-h-screen flex flex-col items-center justify-center py-4 mx-4"> </Link>
</div>
{alertMessage && ( {alertMessage && (
<AlertWithButton <div className="absolute top-20 left-4 right-4 z-50">
title={alertMessage} <AlertWithButton
type="warning" title={alertMessage}
variant="solid" type="warning"
className="w-full !mb-4" variant="solid"
buttonProps={{ className="w-full"
variant: 'secondary', buttonProps={{
children: 'Go to Map Settings', variant: 'secondary',
icon: 'IconSettings', children: 'Go to Map Settings',
onClick: () => { icon: 'IconSettings',
window.location.href = '/settings/maps' onClick: () => {
}, window.location.href = '/settings/maps'
}} },
/> }}
/>
</div>
)} )}
<MapComponent /> <div className="absolute inset-0">
<MapComponent />
</div>
</div> </div>
</MapsLayout> </MapsLayout>
) )

22
admin/package-lock.json generated
View File

@ -67,7 +67,6 @@
"tar": "^7.5.6", "tar": "^7.5.6",
"tesseract.js": "^7.0.0", "tesseract.js": "^7.0.0",
"url-join": "^5.0.0", "url-join": "^5.0.0",
"usehooks-ts": "^3.1.1",
"yaml": "^2.8.0" "yaml": "^2.8.0"
}, },
"devDependencies": { "devDependencies": {
@ -9933,12 +9932,6 @@
"integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==", "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
"license": "MIT" "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": { "node_modules/lodash.defaults": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz", "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" "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": { "node_modules/util-deprecate": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

1
admin/package.json
View File

@ -119,7 +119,6 @@
"tar": "^7.5.6", "tar": "^7.5.6",
"tesseract.js": "^7.0.0", "tesseract.js": "^7.0.0",
"url-join": "^5.0.0", "url-join": "^5.0.0",
"usehooks-ts": "^3.1.1",
"yaml": "^2.8.0" "yaml": "^2.8.0"
}, },
"hotHook": { "hotHook": {