feat: switch to NA tileset + browser geolocation

Swap tile source from idaho.pmtiles (427 MB, Idaho-only) to na.pmtiles
(31 GB, CONUS + Canada + Mexico + Alaska). Replace MapLibre GeolocateControl
with browser geolocation API that flies to user location on load and stores
coordinates in Zustand for future use.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ubuntu 2026-04-20 18:43:36 +00:00
commit 6983e2655b

View file

@ -36,6 +36,10 @@ const MapView = forwardRef(function MapView({ onMapClick }, ref) {
const protocol = new Protocol() const protocol = new Protocol()
maplibregl.addProtocol('pmtiles', protocol.tile) maplibregl.addProtocol('pmtiles', protocol.tile)
// Default center: Matt's home (Filer, ID) updated by geolocation if permitted
const DEFAULT_CENTER = [-114.6066, 42.5736]
const DEFAULT_ZOOM = 10
const map = new maplibregl.Map({ const map = new maplibregl.Map({
container: mapRef.current, container: mapRef.current,
style: { style: {
@ -45,25 +49,37 @@ const MapView = forwardRef(function MapView({ onMapClick }, ref) {
sources: { sources: {
protomaps: { protomaps: {
type: 'vector', type: 'vector',
url: 'pmtiles:///tiles/idaho.pmtiles', url: 'pmtiles:///tiles/na.pmtiles',
attribution: attribution:
'<a href="https://protomaps.com">Protomaps</a> | <a href="https://openstreetmap.org">OSM</a>', '<a href="https://protomaps.com">Protomaps</a> | <a href="https://openstreetmap.org">OSM</a>',
}, },
}, },
layers: layers('protomaps', namedTheme('dark'), { lang: 'en' }), layers: layers('protomaps', namedTheme('dark'), { lang: 'en' }),
}, },
center: [-114.5, 44.0], center: DEFAULT_CENTER,
zoom: 6, zoom: DEFAULT_ZOOM,
}) })
map.addControl(new maplibregl.NavigationControl(), 'top-right') map.addControl(new maplibregl.NavigationControl(), 'top-right')
map.addControl(
new maplibregl.GeolocateControl({ // Request geolocation for initial view (not for routing that's separate)
positionOptions: { enableHighAccuracy: true }, if (navigator.geolocation) {
trackUserLocation: false, navigator.geolocation.getCurrentPosition(
}), (pos) => {
'top-right' const { latitude, longitude } = pos.coords
) // Only fly to user location if no stops have been added yet
if (useStore.getState().stops.length === 0) {
map.flyTo({ center: [longitude, latitude], zoom: 12, duration: 1500 })
}
useStore.getState().setUserLocation({ lat: latitude, lon: longitude })
useStore.getState().setGeoPermission('granted')
},
() => {
useStore.getState().setGeoPermission('denied')
},
{ enableHighAccuracy: false, timeout: 8000, maximumAge: 300000 }
)
}
map.on('click', () => { map.on('click', () => {
// Mobile: collapse sheet when map is tapped // Mobile: collapse sheet when map is tapped