fix: auto-center map on user's location instead of Hamburg

Trigger GeolocateControl on map load so the map flies to the user's
position. Default viewport changed from Hamburg CCH zoom-15 to a
world view, so denied geolocation still looks reasonable.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-18 09:47:13 +00:00
parent 186aeb72f9
commit 4faab77278
1 changed files with 13 additions and 13 deletions

View File

@ -37,10 +37,10 @@ interface MapViewProps {
onClearRoute?: () => void; onClearRoute?: () => void;
} }
// Default to Hamburg CCH area for CCC events // Default viewport — geolocation will override on load
const DEFAULT_VIEWPORT: MapViewport = { const DEFAULT_VIEWPORT: MapViewport = {
center: [9.9898, 53.5550], // Hamburg CCH center: [0, 30], // World view; geolocation re-centers automatically
zoom: 15, zoom: 2,
}; };
// Validate coordinates are within valid ranges // Validate coordinates are within valid ranges
@ -147,16 +147,14 @@ export default function MapView({
// Add controls // Add controls
map.current.addControl(new maplibregl.NavigationControl(), 'top-right'); map.current.addControl(new maplibregl.NavigationControl(), 'top-right');
map.current.addControl( const geolocate = new maplibregl.GeolocateControl({
new maplibregl.GeolocateControl({ positionOptions: {
positionOptions: { enableHighAccuracy: true,
enableHighAccuracy: true, },
}, trackUserLocation: true,
trackUserLocation: true, showUserHeading: true,
showUserHeading: true, } as maplibregl.GeolocateControlOptions);
} as maplibregl.GeolocateControlOptions), map.current.addControl(geolocate, 'top-right');
'top-right'
);
map.current.addControl(new maplibregl.ScaleControl(), 'bottom-left'); map.current.addControl(new maplibregl.ScaleControl(), 'bottom-left');
// Handle click events // Handle click events
@ -166,6 +164,8 @@ export default function MapView({
map.current.on('load', () => { map.current.on('load', () => {
setMapLoaded(true); setMapLoaded(true);
// Auto-trigger geolocation to center on user's position
geolocate.trigger();
}); });
return () => { return () => {