From ce32014896cb65c0154d38d3c52046ce0b76eb8b Mon Sep 17 00:00:00 2001
From: Ubuntu <zvx@recon-vm.echo6.co>
Date: Mon, 20 Apr 2026 06:12:55 +0000
Subject: [PATCH] fix: use correct protomaps-themes-base v4 API for layer
 generation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

layersWithCustomTheme() expects a Theme object as its second argument,
not a string key. Passing "dark" (string) caused all layer paint
properties to be empty objects — rendering tiles invisibly on black
background. Switched to layers(source, namedTheme("dark"), {lang:"en"})
which is the canonical v4 API. Added v4 sprite URL for POI icons.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/App.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 8400376..e710478 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react'
 import maplibregl from 'maplibre-gl'
 import 'maplibre-gl/dist/maplibre-gl.css'
 import { Protocol } from 'pmtiles'
-import { layersWithCustomTheme } from 'protomaps-themes-base'
+import { layers, namedTheme } from 'protomaps-themes-base'
 
 export default function App() {
   const mapContainer = useRef(null)
@@ -16,6 +16,7 @@ export default function App() {
       style: {
         version: 8,
         glyphs: 'https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf',
+        sprite: 'https://protomaps.github.io/basemaps-assets/sprites/v4/dark',
         sources: {
           protomaps: {
             type: 'vector',
@@ -23,7 +24,7 @@ export default function App() {
             attribution: '<a href="https://protomaps.com">Protomaps</a> | <a href="https://openstreetmap.org">OSM</a>',
           },
         },
-        layers: layersWithCustomTheme('protomaps', 'dark'),
+        layers: layers('protomaps', namedTheme('dark'), { lang: 'en' }),
       },
       center: [-114.5, 44.0],
       zoom: 6,