mirror of
https://github.com/zvx-echo6/navi.git
synced 2026-05-20 14:44:51 +02:00
feat(map): add USFS trails and roads layer
- Add USFS trails/roads as toggleable map layer via PMTiles - Trails: dashed brown lines, roads: solid khaki lines - Labels at zoom 12+ for trail and road names - Click handler shows popup with trail/road info - Feature-flag gated with has_usfs_trails (default false) - Add Trails toggle to Layer Control panel Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
e53ff561e8
commit
2b90f8b17a
3 changed files with 526 additions and 307 deletions
|
|
@ -1,306 +1,343 @@
|
|||
import { useState, useEffect, useRef } from 'react'
|
||||
import { Layers, Trees, Mountain } from 'lucide-react'
|
||||
import { hasFeature, getConfig } from '../config'
|
||||
|
||||
const STORAGE_KEY = 'navi-layer-prefs'
|
||||
|
||||
function loadPrefs() {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY)
|
||||
if (raw) return JSON.parse(raw)
|
||||
} catch {}
|
||||
return null
|
||||
}
|
||||
|
||||
function savePrefs(prefs) {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs))
|
||||
}
|
||||
|
||||
export default function LayerControl({ mapRef }) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [hillshade, setHillshade] = useState(false)
|
||||
const [traffic, setTraffic] = useState(false)
|
||||
const [publicLands, setPublicLands] = useState(false)
|
||||
const [contours, setContours] = useState(false)
|
||||
const [contoursTest, setContoursTest] = useState(false)
|
||||
const [contoursTest10ft, setContoursTest10ft] = useState(false)
|
||||
const panelRef = useRef(null)
|
||||
|
||||
// Initialize from localStorage or defaults on mount
|
||||
useEffect(() => {
|
||||
const saved = loadPrefs()
|
||||
const hsAvailable = hasFeature('has_hillshade')
|
||||
const trAvailable = hasFeature('has_traffic_overlay')
|
||||
|
||||
const plAvailable = hasFeature('has_public_lands_layer')
|
||||
const ctAvailable = hasFeature('has_contours')
|
||||
const ctTestAvailable = hasFeature('has_contours_test')
|
||||
const ctTest10ftAvailable = hasFeature('has_contours_test_10ft')
|
||||
|
||||
if (saved) {
|
||||
setHillshade(hsAvailable && (saved.hillshade ?? true))
|
||||
setTraffic(trAvailable && (saved.traffic ?? false))
|
||||
setPublicLands(plAvailable && (saved.publicLands ?? false))
|
||||
setContours(ctAvailable && (saved.contours ?? false))
|
||||
setContoursTest(ctTestAvailable && (saved.contoursTest ?? false))
|
||||
setContoursTest10ft(ctTest10ftAvailable && (saved.contoursTest10ft ?? false))
|
||||
} else {
|
||||
// Defaults: hillshade ON if available, others OFF
|
||||
setHillshade(hsAvailable)
|
||||
setTraffic(false)
|
||||
setPublicLands(false)
|
||||
setContours(false)
|
||||
setContoursTest(false)
|
||||
setContoursTest10ft(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Apply layers when prefs change
|
||||
useEffect(() => {
|
||||
const mapView = mapRef?.current
|
||||
if (!mapView) return
|
||||
const map = mapView.getMap?.()
|
||||
if (!map) return
|
||||
|
||||
const apply = () => {
|
||||
if (hillshade && hasFeature('has_hillshade')) {
|
||||
mapView.addHillshadeLayer?.()
|
||||
} else {
|
||||
mapView.removeHillshadeLayer?.()
|
||||
}
|
||||
}
|
||||
|
||||
if (map.isStyleLoaded()) {
|
||||
apply()
|
||||
} else {
|
||||
map.once('style.load', apply)
|
||||
}
|
||||
savePrefs({ hillshade, traffic, publicLands, contours, contoursTest, contoursTest10ft })
|
||||
return () => map.off('style.load', apply)
|
||||
}, [hillshade, mapRef])
|
||||
|
||||
useEffect(() => {
|
||||
const mapView = mapRef?.current
|
||||
if (!mapView) return
|
||||
const map = mapView.getMap?.()
|
||||
if (!map) return
|
||||
|
||||
const apply = () => {
|
||||
if (traffic && hasFeature('has_traffic_overlay')) {
|
||||
mapView.addTrafficLayer?.()
|
||||
} else {
|
||||
mapView.removeTrafficLayer?.()
|
||||
}
|
||||
}
|
||||
|
||||
if (map.isStyleLoaded()) {
|
||||
apply()
|
||||
} else {
|
||||
map.once('style.load', apply)
|
||||
}
|
||||
savePrefs({ hillshade, traffic, publicLands, contours, contoursTest, contoursTest10ft })
|
||||
return () => map.off('style.load', apply)
|
||||
}, [traffic, mapRef])
|
||||
|
||||
useEffect(() => {
|
||||
const mapView = mapRef?.current
|
||||
if (!mapView) return
|
||||
const map = mapView.getMap?.()
|
||||
if (!map) return
|
||||
|
||||
const apply = () => {
|
||||
if (publicLands && hasFeature('has_public_lands_layer')) {
|
||||
mapView.addPublicLandsLayer?.()
|
||||
} else {
|
||||
mapView.removePublicLandsLayer?.()
|
||||
}
|
||||
}
|
||||
|
||||
if (map.isStyleLoaded()) {
|
||||
apply()
|
||||
} else {
|
||||
map.once('style.load', apply)
|
||||
}
|
||||
savePrefs({ hillshade, traffic, publicLands, contours, contoursTest, contoursTest10ft })
|
||||
return () => map.off('style.load', apply)
|
||||
}, [publicLands, mapRef])
|
||||
|
||||
useEffect(() => {
|
||||
const mapView = mapRef?.current
|
||||
if (!mapView) return
|
||||
const map = mapView.getMap?.()
|
||||
if (!map) return
|
||||
|
||||
const apply = () => {
|
||||
if (contours && hasFeature('has_contours')) {
|
||||
mapView.addContoursLayer?.()
|
||||
} else {
|
||||
mapView.removeContoursLayer?.()
|
||||
}
|
||||
}
|
||||
|
||||
if (map.isStyleLoaded()) {
|
||||
apply()
|
||||
} else {
|
||||
map.once('style.load', apply)
|
||||
}
|
||||
savePrefs({ hillshade, traffic, publicLands, contours, contoursTest, contoursTest10ft })
|
||||
return () => map.off('style.load', apply)
|
||||
}, [contours, mapRef])
|
||||
|
||||
useEffect(() => {
|
||||
const mapView = mapRef?.current
|
||||
if (!mapView) return
|
||||
const map = mapView.getMap?.()
|
||||
if (!map) return
|
||||
|
||||
const apply = () => {
|
||||
if (contoursTest && hasFeature('has_contours_test')) {
|
||||
mapView.addContoursTestLayer?.()
|
||||
} else {
|
||||
mapView.removeContoursTestLayer?.()
|
||||
}
|
||||
}
|
||||
|
||||
if (map.isStyleLoaded()) {
|
||||
apply()
|
||||
} else {
|
||||
map.once('style.load', apply)
|
||||
}
|
||||
savePrefs({ hillshade, traffic, publicLands, contours, contoursTest, contoursTest10ft })
|
||||
return () => map.off('style.load', apply)
|
||||
}, [contoursTest, mapRef])
|
||||
|
||||
// Apply contoursTest10ft layer
|
||||
useEffect(() => {
|
||||
const map = mapRef.current?.getMap?.()
|
||||
if (!map) return
|
||||
|
||||
const apply = () => {
|
||||
if (contoursTest10ft && hasFeature('has_contours_test_10ft')) {
|
||||
mapRef.current?.addContoursTest10ftLayer?.()
|
||||
} else {
|
||||
mapRef.current?.removeContoursTest10ftLayer?.()
|
||||
}
|
||||
}
|
||||
|
||||
if (map.isStyleLoaded()) {
|
||||
apply()
|
||||
} else {
|
||||
map.once('style.load', apply)
|
||||
}
|
||||
}, [contoursTest10ft, mapRef])
|
||||
|
||||
// Close on outside click
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
function handleClick(e) {
|
||||
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
||||
setOpen(false)
|
||||
}
|
||||
}
|
||||
document.addEventListener('pointerdown', handleClick)
|
||||
return () => document.removeEventListener('pointerdown', handleClick)
|
||||
}, [open])
|
||||
|
||||
const showHillshade = hasFeature('has_hillshade')
|
||||
const showTraffic = hasFeature('has_traffic_overlay')
|
||||
const showPublicLands = hasFeature('has_public_lands_layer')
|
||||
const showContours = hasFeature('has_contours')
|
||||
const showContoursTest = hasFeature('has_contours_test')
|
||||
const showContoursTest10ft = hasFeature('has_contours_test_10ft')
|
||||
|
||||
// Don't render if no overlay features available
|
||||
if (!showHillshade && !showTraffic && !showPublicLands && !showContours && !showContoursTest && !showContoursTest10ft) return null
|
||||
|
||||
return (
|
||||
<div ref={panelRef} className="layer-control">
|
||||
<button
|
||||
className="layer-control-btn"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
title="Map layers"
|
||||
aria-label="Toggle map layers"
|
||||
>
|
||||
<Layers size={18} />
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="layer-control-popover">
|
||||
<div className="layer-control-header">Layers</div>
|
||||
|
||||
{showHillshade && (
|
||||
<label className="layer-control-item">
|
||||
<span className="layer-control-label">Hillshade</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="layer-control-toggle"
|
||||
checked={hillshade}
|
||||
onChange={(e) => setHillshade(e.target.checked)}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
|
||||
{showTraffic && (
|
||||
<label className="layer-control-item">
|
||||
<span className="layer-control-label">Traffic</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="layer-control-toggle"
|
||||
checked={traffic}
|
||||
onChange={(e) => setTraffic(e.target.checked)}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
|
||||
{showPublicLands && (
|
||||
<label className="layer-control-item">
|
||||
<span className="layer-control-label">Public Lands</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="layer-control-toggle"
|
||||
checked={publicLands}
|
||||
onChange={(e) => setPublicLands(e.target.checked)}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
|
||||
{showContours && (
|
||||
<label className="layer-control-item">
|
||||
<span className="layer-control-label">Contours</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="layer-control-toggle"
|
||||
checked={contours}
|
||||
onChange={(e) => setContours(e.target.checked)}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
|
||||
{showContoursTest && (
|
||||
<label className="layer-control-item">
|
||||
<span className="layer-control-label">Contours (Test)</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="layer-control-toggle"
|
||||
checked={contoursTest}
|
||||
onChange={(e) => setContoursTest(e.target.checked)}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
|
||||
{showContoursTest10ft && (
|
||||
<label className="layer-control-item">
|
||||
<span className="layer-control-label">Contours (Test 10ft)</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="layer-control-toggle"
|
||||
checked={contoursTest10ft}
|
||||
onChange={(e) => setContoursTest10ft(e.target.checked)}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { Layers, Trees, Mountain } from 'lucide-react'
|
||||
import { hasFeature, getConfig } from '../config'
|
||||
|
||||
const STORAGE_KEY = 'navi-layer-prefs'
|
||||
|
||||
function loadPrefs() {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY)
|
||||
if (raw) return JSON.parse(raw)
|
||||
} catch {}
|
||||
return null
|
||||
}
|
||||
|
||||
function savePrefs(prefs) {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs))
|
||||
}
|
||||
|
||||
export default function LayerControl({ mapRef }) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [hillshade, setHillshade] = useState(false)
|
||||
const [traffic, setTraffic] = useState(false)
|
||||
const [publicLands, setPublicLands] = useState(false)
|
||||
const [contours, setContours] = useState(false)
|
||||
const [contoursTest, setContoursTest] = useState(false)
|
||||
const [contoursTest10ft, setContoursTest10ft] = useState(false)
|
||||
const [usfsTrails, setUsfsTrails] = useState(false)
|
||||
const panelRef = useRef(null)
|
||||
|
||||
// Initialize from localStorage or defaults on mount
|
||||
useEffect(() => {
|
||||
const saved = loadPrefs()
|
||||
const hsAvailable = hasFeature('has_hillshade')
|
||||
const trAvailable = hasFeature('has_traffic_overlay')
|
||||
const plAvailable = hasFeature('has_public_lands_layer')
|
||||
const ctAvailable = hasFeature('has_contours')
|
||||
const ctTestAvailable = hasFeature('has_contours_test')
|
||||
const ctTest10ftAvailable = hasFeature('has_contours_test_10ft')
|
||||
const usfsAvailable = hasFeature('has_usfs_trails')
|
||||
|
||||
if (saved) {
|
||||
setHillshade(hsAvailable && (saved.hillshade ?? true))
|
||||
setTraffic(trAvailable && (saved.traffic ?? false))
|
||||
setPublicLands(plAvailable && (saved.publicLands ?? false))
|
||||
setContours(ctAvailable && (saved.contours ?? false))
|
||||
setContoursTest(ctTestAvailable && (saved.contoursTest ?? false))
|
||||
setContoursTest10ft(ctTest10ftAvailable && (saved.contoursTest10ft ?? false))
|
||||
setUsfsTrails(usfsAvailable && (saved.usfsTrails ?? false))
|
||||
} else {
|
||||
// Defaults: hillshade ON if available, others OFF
|
||||
setHillshade(hsAvailable)
|
||||
setTraffic(false)
|
||||
setPublicLands(false)
|
||||
setContours(false)
|
||||
setContoursTest(false)
|
||||
setContoursTest10ft(false)
|
||||
setUsfsTrails(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Apply layers when prefs change
|
||||
useEffect(() => {
|
||||
const mapView = mapRef?.current
|
||||
if (!mapView) return
|
||||
const map = mapView.getMap?.()
|
||||
if (!map) return
|
||||
|
||||
const apply = () => {
|
||||
if (hillshade && hasFeature('has_hillshade')) {
|
||||
mapView.addHillshadeLayer?.()
|
||||
} else {
|
||||
mapView.removeHillshadeLayer?.()
|
||||
}
|
||||
}
|
||||
|
||||
if (map.isStyleLoaded()) {
|
||||
apply()
|
||||
} else {
|
||||
map.once('style.load', apply)
|
||||
}
|
||||
savePrefs({ hillshade, traffic, publicLands, contours, contoursTest, contoursTest10ft, usfsTrails })
|
||||
return () => map.off('style.load', apply)
|
||||
}, [hillshade, mapRef])
|
||||
|
||||
useEffect(() => {
|
||||
const mapView = mapRef?.current
|
||||
if (!mapView) return
|
||||
const map = mapView.getMap?.()
|
||||
if (!map) return
|
||||
|
||||
const apply = () => {
|
||||
if (traffic && hasFeature('has_traffic_overlay')) {
|
||||
mapView.addTrafficLayer?.()
|
||||
} else {
|
||||
mapView.removeTrafficLayer?.()
|
||||
}
|
||||
}
|
||||
|
||||
if (map.isStyleLoaded()) {
|
||||
apply()
|
||||
} else {
|
||||
map.once('style.load', apply)
|
||||
}
|
||||
savePrefs({ hillshade, traffic, publicLands, contours, contoursTest, contoursTest10ft, usfsTrails })
|
||||
return () => map.off('style.load', apply)
|
||||
}, [traffic, mapRef])
|
||||
|
||||
useEffect(() => {
|
||||
const mapView = mapRef?.current
|
||||
if (!mapView) return
|
||||
const map = mapView.getMap?.()
|
||||
if (!map) return
|
||||
|
||||
const apply = () => {
|
||||
if (publicLands && hasFeature('has_public_lands_layer')) {
|
||||
mapView.addPublicLandsLayer?.()
|
||||
} else {
|
||||
mapView.removePublicLandsLayer?.()
|
||||
}
|
||||
}
|
||||
|
||||
if (map.isStyleLoaded()) {
|
||||
apply()
|
||||
} else {
|
||||
map.once('style.load', apply)
|
||||
}
|
||||
savePrefs({ hillshade, traffic, publicLands, contours, contoursTest, contoursTest10ft, usfsTrails })
|
||||
return () => map.off('style.load', apply)
|
||||
}, [publicLands, mapRef])
|
||||
|
||||
useEffect(() => {
|
||||
const mapView = mapRef?.current
|
||||
if (!mapView) return
|
||||
const map = mapView.getMap?.()
|
||||
if (!map) return
|
||||
|
||||
const apply = () => {
|
||||
if (contours && hasFeature('has_contours')) {
|
||||
mapView.addContoursLayer?.()
|
||||
} else {
|
||||
mapView.removeContoursLayer?.()
|
||||
}
|
||||
}
|
||||
|
||||
if (map.isStyleLoaded()) {
|
||||
apply()
|
||||
} else {
|
||||
map.once('style.load', apply)
|
||||
}
|
||||
savePrefs({ hillshade, traffic, publicLands, contours, contoursTest, contoursTest10ft, usfsTrails })
|
||||
return () => map.off('style.load', apply)
|
||||
}, [contours, mapRef])
|
||||
|
||||
useEffect(() => {
|
||||
const mapView = mapRef?.current
|
||||
if (!mapView) return
|
||||
const map = mapView.getMap?.()
|
||||
if (!map) return
|
||||
|
||||
const apply = () => {
|
||||
if (contoursTest && hasFeature('has_contours_test')) {
|
||||
mapView.addContoursTestLayer?.()
|
||||
} else {
|
||||
mapView.removeContoursTestLayer?.()
|
||||
}
|
||||
}
|
||||
|
||||
if (map.isStyleLoaded()) {
|
||||
apply()
|
||||
} else {
|
||||
map.once('style.load', apply)
|
||||
}
|
||||
savePrefs({ hillshade, traffic, publicLands, contours, contoursTest, contoursTest10ft, usfsTrails })
|
||||
return () => map.off('style.load', apply)
|
||||
}, [contoursTest, mapRef])
|
||||
|
||||
// Apply contoursTest10ft layer
|
||||
useEffect(() => {
|
||||
const map = mapRef.current?.getMap?.()
|
||||
if (!map) return
|
||||
|
||||
const apply = () => {
|
||||
if (contoursTest10ft && hasFeature('has_contours_test_10ft')) {
|
||||
mapRef.current?.addContoursTest10ftLayer?.()
|
||||
} else {
|
||||
mapRef.current?.removeContoursTest10ftLayer?.()
|
||||
}
|
||||
}
|
||||
|
||||
if (map.isStyleLoaded()) {
|
||||
apply()
|
||||
} else {
|
||||
map.once('style.load', apply)
|
||||
}
|
||||
}, [contoursTest10ft, mapRef])
|
||||
|
||||
// Apply usfsTrails layer
|
||||
useEffect(() => {
|
||||
const map = mapRef.current?.getMap?.()
|
||||
if (!map) return
|
||||
|
||||
const apply = () => {
|
||||
if (usfsTrails && hasFeature('has_usfs_trails')) {
|
||||
mapRef.current?.addUsfsTrailsLayer?.()
|
||||
} else {
|
||||
mapRef.current?.removeUsfsTrailsLayer?.()
|
||||
}
|
||||
}
|
||||
|
||||
if (map.isStyleLoaded()) {
|
||||
apply()
|
||||
} else {
|
||||
map.once('style.load', apply)
|
||||
}
|
||||
savePrefs({ hillshade, traffic, publicLands, contours, contoursTest, contoursTest10ft, usfsTrails })
|
||||
}, [usfsTrails, mapRef])
|
||||
|
||||
// Close on outside click
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
function handleClick(e) {
|
||||
if (panelRef.current && !panelRef.current.contains(e.target)) {
|
||||
setOpen(false)
|
||||
}
|
||||
}
|
||||
document.addEventListener('pointerdown', handleClick)
|
||||
return () => document.removeEventListener('pointerdown', handleClick)
|
||||
}, [open])
|
||||
|
||||
const showHillshade = hasFeature('has_hillshade')
|
||||
const showTraffic = hasFeature('has_traffic_overlay')
|
||||
const showPublicLands = hasFeature('has_public_lands_layer')
|
||||
const showContours = hasFeature('has_contours')
|
||||
const showContoursTest = hasFeature('has_contours_test')
|
||||
const showContoursTest10ft = hasFeature('has_contours_test_10ft')
|
||||
const showUsfsTrails = hasFeature('has_usfs_trails')
|
||||
|
||||
// Don't render if no overlay features available
|
||||
if (!showHillshade && !showTraffic && !showPublicLands && !showContours && !showContoursTest && !showContoursTest10ft && !showUsfsTrails) return null
|
||||
|
||||
return (
|
||||
<div ref={panelRef} className="layer-control">
|
||||
<button
|
||||
className="layer-control-btn"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
title="Map layers"
|
||||
aria-label="Toggle map layers"
|
||||
>
|
||||
<Layers size={18} />
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="layer-control-popover">
|
||||
<div className="layer-control-header">Layers</div>
|
||||
|
||||
{showHillshade && (
|
||||
<label className="layer-control-item">
|
||||
<span className="layer-control-label">Hillshade</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="layer-control-toggle"
|
||||
checked={hillshade}
|
||||
onChange={(e) => setHillshade(e.target.checked)}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
|
||||
{showTraffic && (
|
||||
<label className="layer-control-item">
|
||||
<span className="layer-control-label">Traffic</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="layer-control-toggle"
|
||||
checked={traffic}
|
||||
onChange={(e) => setTraffic(e.target.checked)}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
|
||||
{showPublicLands && (
|
||||
<label className="layer-control-item">
|
||||
<span className="layer-control-label">Public Lands</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="layer-control-toggle"
|
||||
checked={publicLands}
|
||||
onChange={(e) => setPublicLands(e.target.checked)}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
|
||||
{showContours && (
|
||||
<label className="layer-control-item">
|
||||
<span className="layer-control-label">Contours</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="layer-control-toggle"
|
||||
checked={contours}
|
||||
onChange={(e) => setContours(e.target.checked)}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
|
||||
{showContoursTest && (
|
||||
<label className="layer-control-item">
|
||||
<span className="layer-control-label">Contours (Test)</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="layer-control-toggle"
|
||||
checked={contoursTest}
|
||||
onChange={(e) => setContoursTest(e.target.checked)}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
|
||||
{showContoursTest10ft && (
|
||||
<label className="layer-control-item">
|
||||
<span className="layer-control-label">Contours (Test 10ft)</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="layer-control-toggle"
|
||||
checked={contoursTest10ft}
|
||||
onChange={(e) => setContoursTest10ft(e.target.checked)}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
|
||||
{showUsfsTrails && (
|
||||
<label className="layer-control-item">
|
||||
<span className="layer-control-label">USFS Trails</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="layer-control-toggle"
|
||||
checked={usfsTrails}
|
||||
onChange={(e) => setUsfsTrails(e.target.checked)}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,6 +42,12 @@ const CONTOUR_TEST_10FT_LABEL = 'contour-test-10ft-label'
|
|||
const MEASURE_SOURCE = 'measure-source'
|
||||
const MEASURE_LINE_LAYER = 'measure-line-layer'
|
||||
const MEASURE_POINT_LAYER = 'measure-point-layer'
|
||||
const USFS_SOURCE = 'usfs-trails-source'
|
||||
const USFS_ROADS_LAYER = 'usfs-roads-layer'
|
||||
const USFS_TRAILS_LAYER = 'usfs-trails-layer'
|
||||
const USFS_ROADS_LABEL = 'usfs-roads-label'
|
||||
const USFS_TRAILS_LABEL = 'usfs-trails-label'
|
||||
|
||||
|
||||
// Highlight state - use data-driven expressions to target specific features
|
||||
const INTERACTIVE_LABEL_LAYERS = ['pois', 'places_subplace', 'places_locality', 'places_region', 'places_country']
|
||||
|
|
@ -813,6 +819,119 @@ function removeContoursTest10ft(map) {
|
|||
if (map.getLayer(CONTOUR_TEST_10FT_MINOR)) map.removeLayer(CONTOUR_TEST_10FT_MINOR)
|
||||
if (map.getSource(CONTOUR_TEST_10FT_SOURCE)) map.removeSource(CONTOUR_TEST_10FT_SOURCE)
|
||||
}
|
||||
/** Add USFS trails and roads vector tile overlay */
|
||||
function addUsfsTrails(map) {
|
||||
if (!map || map.getSource(USFS_SOURCE)) return
|
||||
|
||||
map.addSource(USFS_SOURCE, {
|
||||
type: "vector",
|
||||
url: "pmtiles:///tiles/usfs-trails-roads.pmtiles",
|
||||
})
|
||||
|
||||
// Insert below first symbol layer (above other overlays, below labels)
|
||||
let beforeId = undefined
|
||||
for (const layer of map.getStyle().layers) {
|
||||
if (layer.type === "symbol") {
|
||||
beforeId = layer.id
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const isDark = document.documentElement.getAttribute("data-theme") === "dark"
|
||||
const opMod = isDark ? 0.8 : 1.0
|
||||
|
||||
// Roads layer - solid khaki/tan line
|
||||
map.addLayer({
|
||||
id: USFS_ROADS_LAYER,
|
||||
type: "line",
|
||||
source: USFS_SOURCE,
|
||||
"source-layer": "roads",
|
||||
minzoom: 10,
|
||||
paint: {
|
||||
"line-color": isDark ? "#9a8b70" : "#b8a87a",
|
||||
"line-opacity": 0.65 * opMod,
|
||||
"line-width": ["interpolate", ["linear"], ["zoom"], 10, 1.0, 14, 2.0, 16, 3.0],
|
||||
},
|
||||
}, beforeId)
|
||||
|
||||
// Trails layer - dashed earth-tone brown
|
||||
map.addLayer({
|
||||
id: USFS_TRAILS_LAYER,
|
||||
type: "line",
|
||||
source: USFS_SOURCE,
|
||||
"source-layer": "trails",
|
||||
minzoom: 10,
|
||||
paint: {
|
||||
"line-color": isDark ? "#a88960" : "#8b7355",
|
||||
"line-opacity": 0.7 * opMod,
|
||||
"line-width": ["interpolate", ["linear"], ["zoom"], 10, 1.5, 14, 2.5, 16, 3.5],
|
||||
"line-dasharray": [2, 1.5],
|
||||
},
|
||||
}, beforeId)
|
||||
|
||||
// Road labels (zoom 12+)
|
||||
map.addLayer({
|
||||
id: USFS_ROADS_LABEL,
|
||||
type: "symbol",
|
||||
source: USFS_SOURCE,
|
||||
"source-layer": "roads",
|
||||
minzoom: 12,
|
||||
filter: ["has", "NAME"],
|
||||
layout: {
|
||||
"text-field": ["get", "NAME"],
|
||||
"text-size": 10,
|
||||
"text-font": ["Noto Sans Regular"],
|
||||
"symbol-placement": "line",
|
||||
"text-anchor": "center",
|
||||
"symbol-spacing": 300,
|
||||
"text-max-angle": 25,
|
||||
"text-allow-overlap": false,
|
||||
},
|
||||
paint: {
|
||||
"text-color": isDark ? "#c0b090" : "#6a5a40",
|
||||
"text-halo-color": isDark ? "#1a1a1a" : "#ffffff",
|
||||
"text-halo-width": 1.5,
|
||||
"text-opacity": 0.85,
|
||||
},
|
||||
})
|
||||
|
||||
// Trail labels (zoom 12+)
|
||||
map.addLayer({
|
||||
id: USFS_TRAILS_LABEL,
|
||||
type: "symbol",
|
||||
source: USFS_SOURCE,
|
||||
"source-layer": "trails",
|
||||
minzoom: 12,
|
||||
filter: ["has", "TRAIL_NAME"],
|
||||
layout: {
|
||||
"text-field": ["get", "TRAIL_NAME"],
|
||||
"text-size": 10,
|
||||
"text-font": ["Noto Sans Regular"],
|
||||
"symbol-placement": "line",
|
||||
"text-anchor": "center",
|
||||
"symbol-spacing": 300,
|
||||
"text-max-angle": 25,
|
||||
"text-allow-overlap": false,
|
||||
},
|
||||
paint: {
|
||||
"text-color": isDark ? "#c8a878" : "#5a4530",
|
||||
"text-halo-color": isDark ? "#1a1a1a" : "#ffffff",
|
||||
"text-halo-width": 1.5,
|
||||
"text-opacity": 0.85,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
/** Remove USFS trails/roads layers and source */
|
||||
function removeUsfsTrails(map) {
|
||||
if (!map) return
|
||||
if (map.getLayer(USFS_TRAILS_LABEL)) map.removeLayer(USFS_TRAILS_LABEL)
|
||||
if (map.getLayer(USFS_ROADS_LABEL)) map.removeLayer(USFS_ROADS_LABEL)
|
||||
if (map.getLayer(USFS_TRAILS_LAYER)) map.removeLayer(USFS_TRAILS_LAYER)
|
||||
if (map.getLayer(USFS_ROADS_LAYER)) map.removeLayer(USFS_ROADS_LAYER)
|
||||
if (map.getSource(USFS_SOURCE)) map.removeSource(USFS_SOURCE)
|
||||
}
|
||||
|
||||
/** Add boundary polygon layers with computed accent color (MapLibre rejects CSS vars in paint) */
|
||||
const BOUNDARY_FILL_LAYER = 'boundary-fill-layer'
|
||||
|
||||
|
|
@ -871,7 +990,7 @@ const MapView = forwardRef(function MapView(_, ref) {
|
|||
const watchIdRef = useRef(null)
|
||||
const currentThemeRef = useRef('dark')
|
||||
// Track which overlay layers are currently active (for theme swap re-add)
|
||||
const activeLayersRef = useRef({ hillshade: false, traffic: false, contours: false, contoursTest: false, contoursTest10ft: false })
|
||||
const activeLayersRef = useRef({ hillshade: false, traffic: false, contours: false, contoursTest: false, contoursTest10ft: false, usfsTrails: false })
|
||||
// Flag to suppress map-click when a stop pin was clicked
|
||||
const pinClickedRef = useRef(false)
|
||||
const highlightedFeatureRef = useRef(null) // { source, sourceLayer, id } for setFeatureState
|
||||
|
|
@ -1317,6 +1436,19 @@ const MapView = forwardRef(function MapView(_, ref) {
|
|||
removeContoursTest10ft(map)
|
||||
activeLayersRef.current.contoursTest10ft = false
|
||||
},
|
||||
addUsfsTrailsLayer() {
|
||||
const map = mapInstance.current
|
||||
if (!map) return
|
||||
addUsfsTrails(map)
|
||||
activeLayersRef.current.usfsTrails = true
|
||||
},
|
||||
removeUsfsTrailsLayer() {
|
||||
const map = mapInstance.current
|
||||
if (!map) return
|
||||
removeUsfsTrails(map)
|
||||
activeLayersRef.current.usfsTrails = false
|
||||
},
|
||||
|
||||
}))
|
||||
|
||||
// Initialize map
|
||||
|
|
@ -1446,6 +1578,55 @@ const MapView = forwardRef(function MapView(_, ref) {
|
|||
const { lng, lat } = e.lngLat
|
||||
const MARKER_RADIUS_PX = 14 // half of 28px preview marker
|
||||
|
||||
// Check for USFS trails/roads click (show info popup)
|
||||
const usfsLayers = [USFS_TRAILS_LAYER, USFS_ROADS_LAYER]
|
||||
const usfsFeatures = map.queryRenderedFeatures(e.point, { layers: usfsLayers })
|
||||
const usfsFeature = usfsFeatures.find(f => f.properties)
|
||||
if (usfsFeature && hasFeature('has_usfs_trails')) {
|
||||
const props = usfsFeature.properties
|
||||
const isTrail = usfsFeature.layer?.id === USFS_TRAILS_LAYER
|
||||
const name = isTrail ? (props.TRAIL_NAME || 'Unnamed Trail') : (props.NAME || 'Unnamed Road')
|
||||
const typeLabel = isTrail ? 'USFS Trail' : 'USFS Road'
|
||||
|
||||
// Build popup content
|
||||
let html = '<div style="font-size:12px;max-width:240px;line-height:1.4">'
|
||||
html += '<strong style="font-size:13px">' + name + '</strong>'
|
||||
html += '<div style="color:var(--text-secondary);font-size:11px;margin-bottom:4px">' + typeLabel + '</div>'
|
||||
|
||||
if (isTrail) {
|
||||
// Trail-specific info
|
||||
if (props.TRAIL_TYPE) html += '<div><b>Type:</b> ' + props.TRAIL_TYPE + '</div>'
|
||||
if (props.TRAIL_SURF) html += '<div><b>Surface:</b> ' + props.TRAIL_SURF + '</div>'
|
||||
if (props.GIS_MILES) html += '<div><b>Length:</b> ' + parseFloat(props.GIS_MILES).toFixed(1) + ' mi</div>'
|
||||
// Allowed uses
|
||||
const uses = []
|
||||
if (props.HIKER_PEDE === 'Y') uses.push('Hiking')
|
||||
if (props.BICYCLE_MA === 'Y') uses.push('Biking')
|
||||
if (props.MOTORCYCLE === 'Y') uses.push('Motorcycle')
|
||||
if (props.ATV_MANAGE === 'Y') uses.push('ATV')
|
||||
if (props.HORSE_MANA === 'Y') uses.push('Horse')
|
||||
if (uses.length > 0) html += '<div><b>Allowed:</b> ' + uses.join(', ') + '</div>'
|
||||
} else {
|
||||
// Road-specific info
|
||||
if (props.OPER_MAINT) html += '<div><b>Maintenance:</b> ' + props.OPER_MAINT + '</div>'
|
||||
if (props.SURFACE_TY) html += '<div><b>Surface:</b> ' + props.SURFACE_TY + '</div>'
|
||||
if (props.ROUTE_STAT) html += '<div><b>Status:</b> ' + props.ROUTE_STAT + '</div>'
|
||||
}
|
||||
html += '</div>'
|
||||
|
||||
// Remove existing popup
|
||||
if (popupRef.current) popupRef.current.remove()
|
||||
|
||||
const popup = new maplibregl.Popup({ offset: 10, closeButton: true })
|
||||
.setLngLat([lng, lat])
|
||||
.setHTML(html)
|
||||
.addTo(map)
|
||||
popupRef.current = popup
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Query rendered features at click point (label/POI priority)
|
||||
const labelLayers = ['pois', 'places_subplace', 'places_locality', 'places_region', 'places_country']
|
||||
const features = map.queryRenderedFeatures(e.point, { layers: labelLayers })
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ const FALLBACK_CONFIG = {
|
|||
has_contours_test: true,
|
||||
has_contours_test_10ft: false,
|
||||
has_address_book_write: false,
|
||||
has_usfs_trails: false,
|
||||
has_contacts: false,
|
||||
},
|
||||
defaults: {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue