matt/navi
1
0
Fork 0
mirror of https://github.com/zvx-echo6/navi.git synced 2026-05-20 14:44:51 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix: direct namedTheme import fixes GeoJSON rendering, guard optional layer queries

Browse source 
Root cause: Vite's bundling of namedTheme through the registry re-export
broke MapLibre's Web Worker, silently preventing all GeoJSON rendering
(routes, boundaries, measure tool). Fixed by importing namedTheme
directly from protomaps-themes-base in MapView.jsx.

Also guards queryRenderedFeatures calls for optional overlay layers
(USFS trails, BLM roads) that may not exist in the current style.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Matt 2026-05-01 21:59:04 +00:00
commit 09369011ee
2 changed files with 647 additions and 655 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/MapView.jsx
View file

@ -2,8 +2,8 @@ import { useEffect, useRef, forwardRef, useImperativeHandle, useState } from 're
import maplibregl from 'maplibre-gl' import maplibregl from 'maplibre-gl'
import 'maplibre-gl/dist/maplibre-gl.css' import 'maplibre-gl/dist/maplibre-gl.css'
import { Protocol } from 'pmtiles' import { Protocol } from 'pmtiles'
import { layers } from 'protomaps-themes-base' import { layers, namedTheme } from 'protomaps-themes-base'
import { getTheme, getThemeColors, getThemeSprite, getOverlayConfig } from '../themes/registry' import { getTheme, getThemeSprite, getOverlayConfig } from '../themes/registry'
import { useStore } from '../store' import { useStore } from '../store'
import { decodePolyline } from '../utils/decode' import { decodePolyline } from '../utils/decode'
import { fetchReverse } from '../api' import { fetchReverse } from '../api'
@ -270,6 +270,10 @@ function buildStyle(themeName) {
const tileUrl = config?.tileset?.url || '/tiles/na.pmtiles' const tileUrl = config?.tileset?.url || '/tiles/na.pmtiles'
const attribution = config?.tileset?.attribution || 'Protomaps \u00a9 OSM' const attribution = config?.tileset?.attribution || 'Protomaps \u00a9 OSM'
// Use namedTheme directly for built-in themes, custom colors for others
const theme = getTheme(themeName)
const colors = theme.colors || namedTheme(themeName)
return { return {
version: 8, version: 8,
glyphs: 'https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf', glyphs: 'https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf',
@ -281,7 +285,7 @@ function buildStyle(themeName) {
attribution, attribution,
}, },
}, },
layers: layers('protomaps', getThemeColors(themeName), { lang: 'en' }), layers: layers('protomaps', colors, { lang: 'en' }),
} }
} }
@ -1906,8 +1910,10 @@ const MapView = forwardRef(function MapView(_, ref) {
const MARKER_RADIUS_PX = 14 // half of 28px preview marker const MARKER_RADIUS_PX = 14 // half of 28px preview marker
// Check for USFS trails/roads click (show info popup) // Check for USFS trails/roads click (show info popup)
const usfsLayers = [USFS_TRAILS_HIT, USFS_ROADS_HIT] const usfsLayers = [USFS_TRAILS_HIT, USFS_ROADS_HIT].filter(id => map.getLayer(id))
const usfsFeatures = map.queryRenderedFeatures(e.point, { layers: usfsLayers }) const usfsFeatures = usfsLayers.length > 0
? map.queryRenderedFeatures(e.point, { layers: usfsLayers })
: []
const usfsFeature = usfsFeatures.find(f => f.properties) const usfsFeature = usfsFeatures.find(f => f.properties)
if (usfsFeature && hasFeature('has_usfs_trails')) { if (usfsFeature && hasFeature('has_usfs_trails')) {
const props = usfsFeature.properties const props = usfsFeature.properties
@ -1953,8 +1959,10 @@ const MapView = forwardRef(function MapView(_, ref) {
} }
// Check for BLM routes click (show info popup) // Check for BLM routes click (show info popup)
const blmLayers = [BLM_ROUTES_HIT] const blmLayers = [BLM_ROUTES_HIT].filter(id => map.getLayer(id))
const blmFeatures = map.queryRenderedFeatures(e.point, { layers: blmLayers }) const blmFeatures = blmLayers.length > 0
? map.queryRenderedFeatures(e.point, { layers: blmLayers })
: []
const blmFeature = blmFeatures.find(f => f.properties) const blmFeature = blmFeatures.find(f => f.properties)
if (blmFeature && hasFeature("has_blm_trails")) { if (blmFeature && hasFeature("has_blm_trails")) {
const props = blmFeature.properties const props = blmFeature.properties

16
src/themes/registry.js
View file

@ -16,7 +16,6 @@
* fontImports: string[] - URLs for font CSS imports (empty for system fonts) * fontImports: string[] - URLs for font CSS imports (empty for system fonts)
*/ */
import { namedTheme } from 'protomaps-themes-base'
import cleanTheme from './clean.js' import cleanTheme from './clean.js'
import cyberpunkTheme from './cyberpunk.js' import cyberpunkTheme from './cyberpunk.js'
@ -518,21 +517,6 @@ export function getTheme(id) {
return themes[id] || themes.dark return themes[id] || themes.dark
} }
/**
* Get the color flavor for a theme
* For built-in themes, calls namedTheme(). For custom themes, returns colors directly.
* @param {string} id - Theme ID
* @returns {object} Flavor object for use with protomaps layers()
*/
export function getThemeColors(id) {
const theme = getTheme(id)
if (theme.colors === null) {
// Built-in theme - use namedTheme from protomaps-themes-base
return namedTheme(id)
}
return theme.colors
}
/** /**
* Get the sprite URL for a theme * Get the sprite URL for a theme
* Built-in themes use their own sprites. Custom themes fall back to * Built-in themes use their own sprites. Custom themes fall back to