Hackathons/VTHacks13
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Controls and Mapbox Config Update

Browse Source
This commit is contained in:
GamerBoss101
2025-09-27 09:56:23 -04:00
parent ca5913678c
commit 775b1719f0
5 changed files with 99 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
web/src/app/components/MapNavigationControl.tsx Normal file
View File

@@ -0,0 +1,32 @@
"use client";
import React, { useEffect } from 'react';
import mapboxgl from 'mapbox-gl';
type Position = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
interface Props {
mapRef: React.MutableRefObject<mapboxgl.Map | null>;
position?: Position;
showCompass?: boolean;
showZoom?: boolean;
visualizePitch?: boolean;
style?: React.CSSProperties;
}
export default function MapNavigationControl({ mapRef, position = 'top-right', showCompass = true, showZoom = true, visualizePitch = false, style }: Props) {
useEffect(() => {
const map = mapRef.current;
if (!map) return;
const nav = new mapboxgl.NavigationControl({ showCompass, showZoom, visualizePitch });
map.addControl(nav, position);
return () => {
try { map.removeControl(nav); } catch (e) {}
};
}, [mapRef, position, showCompass, showZoom, visualizePitch]);
// the control is rendered by mapbox, so this component itself renders nothing
return null;
}

18
web/src/app/components/MapView.tsx
View File

@@ -41,11 +41,27 @@ export default function MapView({ mapStyleChoice, heatRadius, heatIntensity, hea
return () => ro.disconnect();
}, []);
// react to style choice changes
useEffect(() => {
const map = mapRef.current;
if (!map) return;
const styleUrl = mapStyleChoice === 'dark' ? 'mapbox://styles/mapbox/dark-v10' : 'mapbox://styles/mapbox/streets-v11';
try {
map.setStyle(styleUrl);
} catch (e) {
// some map versions may throw; still listen for styledata to re-add layers
}
}, [mapStyleChoice]);
useEffect(() => {
const mapEl = mapContainerRef.current;
if (!mapEl) return;
mapboxgl.accessToken = 'pk.eyJ1IjoicGllbG9yZDc1NyIsImEiOiJjbWcxdTd6c3AwMXU1MmtxMDh6b2l5amVrIn0.5Es0azrah23GX1e9tmbjGw';
const token = process.env.NEXT_PUBLIC_MAPBOX_TOKEN || process.env.NEXT_PUBLIC_MAPBOX_TOKEN;
if (!token) {
console.warn('Missing NEXT_PUBLIC_MAPBOX_TOKEN environment variable. Mapbox map will not initialize correctly.');
}
mapboxgl.accessToken = token ?? '';
const styleUrl = mapStyleChoice === 'dark'
? 'mapbox://styles/mapbox/dark-v10'

22
web/src/app/components/ZoomControls.tsx
View File

@@ -1,15 +1,15 @@
"use client";
import React from 'react';
import mapboxgl from 'mapbox-gl';
// import React from 'react';
// import mapboxgl from 'mapbox-gl';
interface Props { mapRef: React.MutableRefObject<mapboxgl.Map | null> }
// interface Props { mapRef: React.MutableRefObject<mapboxgl.Map | null> }
export default function ZoomControls({ mapRef }: Props) {
return (
<div style={{ position: 'absolute', top: 12, right: 12, zIndex: 3, display: 'flex', flexDirection: 'column', gap: 8 }}>
<button className="zoom-btn" aria-label="Zoom in" title="Zoom in" onClick={() => { const map = mapRef.current; if (!map) return; map.easeTo({ zoom: map.getZoom() + 1 }); }}>+</button>
<button className="zoom-btn" aria-label="Zoom out" title="Zoom out" onClick={() => { const map = mapRef.current; if (!map) return; map.easeTo({ zoom: map.getZoom() - 1 }); }}>-</button>
</div>
);
}
// export default function ZoomControls({ mapRef }: Props) {
// return (
// <div style={{ position: 'absolute', top: 12, right: 12, zIndex: 3, display: 'flex', flexDirection: 'column', gap: 8 }}>
// <button className="zoom-btn" aria-label="Zoom in" title="Zoom in" onClick={() => { const map = mapRef.current; if (!map) return; map.easeTo({ zoom: map.getZoom() + 1 }); }}>+</button>
// <button className="zoom-btn" aria-label="Zoom out" title="Zoom out" onClick={() => { const map = mapRef.current; if (!map) return; map.easeTo({ zoom: map.getZoom() - 1 }); }}>-</button>
// </div>
// );
// }

52
web/src/app/layout.tsx
View File

@@ -3,32 +3,50 @@ import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
title: "DC Heatmap Explorer — Washington, D.C. Density Visualizer",
description:
"Interactive heatmap of simulated points across Washington, D.C. Toggle heatmap, inspect nearby statistics, and explore data-driven areas.",
openGraph: {
title: "DC Heatmap Explorer — Washington, D.C.",
description:
"Interactive heatmap of simulated points across Washington, D.C.",
url: "https://your-domain.example/",
siteName: "DC Heatmap Explorer",
images: [
{
url: "https://your-domain.example/og-image.png",
width: 1200,
height: 630,
alt: "DC Heatmap Explorer preview",
},
],
locale: "en_US",
type: "website",
}
};
export default function RootLayout({
children,
children,
}: Readonly<{
children: React.ReactNode;
children: React.ReactNode;
}>) {
return (
<html lang="en" data-theme="cerberus">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</html>
);
return (
<html lang="en" data-theme="cerberus">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</html>
);
}

6
web/src/app/page.tsx
View File

@@ -5,7 +5,7 @@ import MapView, { PopupData } from './components/MapView';
import ControlsPanel from './components/ControlsPanel';
import PopupOverlay from './components/PopupOverlay';
import Legend from './components/Legend';
import ZoomControls from './components/ZoomControls';
import MapNavigationControl from './components/MapNavigationControl';
export default function Home() {
const mapRef = useRef<any>(null);
@@ -47,8 +47,10 @@ export default function Home() {
onPopupCreate={(p) => { setPopupVisible(false); setPopup(p); requestAnimationFrame(() => setPopupVisible(true)); }}
/>
{/* Native Mapbox navigation control (zoom + compass) */}
<MapNavigationControl mapRef={mapRef} position="top-right" />
<Legend />
<ZoomControls mapRef={mapRef} />
<PopupOverlay popup={popup} popupVisible={popupVisible} mapRef={mapRef} onClose={() => { setPopupVisible(false); setTimeout(() => setPopup(null), 220); }} />
</div>
);