>(new Map())
+ const activeRef = useRef(active)
+ activeRef.current = active
function toggle(overlay: OverlayDef) {
setActive((prev) => {
const next = new Set(prev)
if (next.has(overlay.id)) {
- // Remove layer
- const layer = layerRefs.current.get(overlay.id)
- if (layer && !viewer.isDestroyed()) {
- viewer.imageryLayers.remove(layer, true)
- }
- layerRefs.current.delete(overlay.id)
+ removeOverlay(map, overlay)
next.delete(overlay.id)
} else {
- // Add layer
- const provider = new Cesium.UrlTemplateImageryProvider({ url: overlay.url })
- const layer = viewer.imageryLayers.addImageryProvider(provider)
- layer.alpha = overlay.alpha
- layerRefs.current.set(overlay.id, layer)
+ addOverlay(map, overlay)
next.add(overlay.id)
}
return next
})
}
- // Clean up all layers if the component unmounts
+ // Clean up all active overlays on unmount
useEffect(() => {
- const refs = layerRefs.current
return () => {
- refs.forEach((layer) => {
- if (!viewer.isDestroyed()) viewer.imageryLayers.remove(layer, true)
- })
+ for (const id of activeRef.current) {
+ const overlay = OVERLAYS.find(o => o.id === id)
+ if (overlay) removeOverlay(map, overlay)
+ }
}
- }, [viewer])
+ }, [map])
return (
diff --git a/web/src/ui/SearchBar.tsx b/web/src/ui/SearchBar.tsx
index b492cb5..53263ad 100644
--- a/web/src/ui/SearchBar.tsx
+++ b/web/src/ui/SearchBar.tsx
@@ -1,6 +1,5 @@
import { useState, useRef, useEffect } from 'react'
-import * as Cesium from 'cesium'
-import { useCesiumViewer } from '../cesium/cesiumContext'
+import { useMapLibreMap } from '../maplibre/maplibreContext'
import styles from './SearchBar.module.css'
interface NominatimResult {
@@ -12,7 +11,7 @@ interface NominatimResult {
}
export function SearchBar() {
- const viewer = useCesiumViewer()
+ const map = useMapLibreMap()
const [query, setQuery] = useState('')
const [results, setResults] = useState([])
const [open, setOpen] = useState(false)
@@ -57,11 +56,7 @@ export function SearchBar() {
function flyTo(result: NominatimResult) {
const [minLat, maxLat, minLon, maxLon] = result.boundingbox.map(Number)
- const rect = Cesium.Rectangle.fromDegrees(minLon, minLat, maxLon, maxLat)
- viewer.camera.flyTo({
- destination: rect,
- duration: 1.5,
- })
+ map.fitBounds([[minLon, minLat], [maxLon, maxLat]], { duration: 1500, padding: 40 })
setQuery(result.display_name.split(',')[0])
setOpen(false)
setResults([])
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 52c3209..2cb3281 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -1,21 +1,10 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
-import cesium from 'vite-plugin-cesium'
export default defineConfig({
- plugins: [react(), cesium()],
+ plugins: [react()],
optimizeDeps: {
- // Prevent Vite from pre-bundling Cesium — it ships its own worker scripts
- // that must be loaded from a specific public path, not inlined.
- exclude: ['cesium'],
- // Force pre-bundling of @mkkellogg/gaussian-splats-3d and all its CJS
- // transitive dependencies. The 'pkg > dep' syntax tells Vite's esbuild
- // step to convert each dep to ESM when reached through that package.
- // All CJS transitive dependencies of cesium and @mkkellogg/gaussian-splats-3d.
- // Because cesium is in exclude, Vite won't crawl its deps automatically —
- // every CJS package it touches must be listed here for ESM conversion.
- // List generated via: node -e "..." (see vite.config.ts comments above)
include: [
'@mkkellogg/gaussian-splats-3d',
'@mkkellogg/gaussian-splats-3d > mersenne-twister',
@@ -41,8 +30,7 @@ export default defineConfig({
rollupOptions: {
output: {
manualChunks: {
- // cesium is handled by vite-plugin-cesium (served from /Cesium/ public path)
- // and must NOT appear here.
+ maplibre: ['maplibre-gl'],
splat: ['@mkkellogg/gaussian-splats-3d', 'three'],
},
},
@@ -52,8 +40,6 @@ export default defineConfig({
server: {
port: 5173,
proxy: {
- // Proxy API calls to Django — avoids CORS in development.
- // Django dev server runs on the host at :8000.
'/api': {
target: 'http://localhost:8000',
changeOrigin: true,