PPLR data maps: the Globe/Mercator toggle works on MapLibre too

Three views called map.setProjection(projection.value) with the bare name ('globe'|'mercator'),
unguarded, including inside style.load handlers. Mapbox takes the name; MapLibre 5 takes a
specification object ({ type }), so under provider=maplibre the toggle did nothing or threw
mid-restyle. setProjectionFor(map, name) passes the engine's shape and is guarded; all six call
sites use it. Found by the engine-asymmetric API sweep (universal-props matrix, new column).
Headless: a fake-map unit test (MapLibre gets {type}, Mapbox the string, a throw is swallowed,
null/empty no-op) 5/5; BUNDLE=pplr-data-maps builds. Plugin-local: pplrData.js has no other consumer.
needs eyes: PPLR Religion view with ?provider=maplibre: the 🌐/🗺 button switches globe and mercator.

plugin-designs/pplr-data-maps/src/utils/pplrData.js

@@ -86,6 +86,18 @@ export function whenGeojsonDrawn(map, timeoutMs = 45000) {
   })
 }
 
+// Switch projection on EITHER engine. The argument shape is engine-specific: Mapbox takes the name
+// ('globe'), MapLibre 5 takes a specification object ({ type: 'globe' }). The views passed the bare
+// string, so under provider=maplibre the Globe/Mercator toggle did nothing (or threw inside a
+// style.load handler). Guarded: a style that cannot take the projection must not break the view.
+export function setProjectionFor(map, name) {
+  if (!map || !name) return
+  try {
+    const ml = typeof window !== 'undefined' ? window.maplibregl : null
+    map.setProjection(ml && ml.Map && map instanceof ml.Map ? { type: name } : name)
+  } catch (_) { /* the style does not support it: keep the current projection */ }
+}
+
 // Verification handle (the gospel-resources __grState contract): what the ACTIVE view's map
 // actually did, so a check can assert "loaded" rather than inferring it from missing requests.
 // window.__pplrMap() -> { engine, loaded, styleLayers, pplrLayers }

plugin-designs/pplr-data-maps/src/views/pplr-language-families.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { dataUrl, glFor, exposeMap, whenGeojsonDrawn } from '../utils/pplrData.js'
+import { dataUrl, glFor, exposeMap, whenGeojsonDrawn, setProjectionFor } from '../utils/pplrData.js'
 /**
  * pplr-language-families.vue — PG pins colored by PPLR ethnolinguistic family.
  *
@@ -361,7 +361,7 @@ const detailColor = computed(() => {
 // ── Projection / basemap ──────────────────────────────────────────────────────
 function toggleProjection() {
   projection.value = projection.value === 'globe' ? 'mercator' : 'globe'
-  if (map.value) map.value.setProjection(projection.value)
+  if (map.value) setProjectionFor(map.value, projection.value)
 }
 
 function setBasemap(key) {
@@ -371,7 +371,7 @@ function setBasemap(key) {
   showBasemap.value = false
   const style = BASEMAPS.find(b => b.key === key)?.url
   if (!style || !map.value) return
-  map.value.once('style.load', () => { setupLayers(); map.value.setProjection(projection.value) })
+  map.value.once('style.load', () => { setupLayers(); setProjectionFor(map.value, projection.value) })
   // diff:false suppresses Mapbox's "Unimplemented: setSprite" warning between
   // dark-v11 and light-v11. We re-add layers in setupLayers anyway.
   map.value.setStyle(resolveNamedStyle(style, mapProvider).style, { diff: false })

plugin-designs/pplr-data-maps/src/views/pplr-religion.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { dataUrl, glFor, exposeMap, whenGeojsonDrawn } from '../utils/pplrData.js'
+import { dataUrl, glFor, exposeMap, whenGeojsonDrawn, setProjectionFor } from '../utils/pplrData.js'
 /**
  * pplr-religion.vue — PG pins colored by primary religion.
  *
@@ -44,7 +44,7 @@ function reload() { window.location.reload() }
 
 function toggleProjection() {
   projection.value = projection.value === 'globe' ? 'mercator' : 'globe'
-  if (map.value) map.value.setProjection(projection.value)
+  if (map.value) setProjectionFor(map.value, projection.value)
 }
 
 function toggleTheme() {
@@ -58,7 +58,7 @@ function setBasemap(key) {
   showBasemap.value = false
   const style = BASEMAPS.find(b => b.key === key)?.url
   if (!style || !map.value) return
-  map.value.once('style.load', () => { setupLayers(); map.value.setProjection(projection.value) })
+  map.value.once('style.load', () => { setupLayers(); setProjectionFor(map.value, projection.value) })
   // diff:false suppresses Mapbox's "Unimplemented: setSprite" warning between
   // dark-v11 and light-v11. We re-add layers in setupLayers anyway.
   map.value.setStyle(resolveNamedStyle(style, mapProvider).style, { diff: false })

plugin-designs/pplr-data-maps/src/views/pplr-rop-tree.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { dataUrl, glFor, exposeMap } from '../utils/pplrData.js'
+import { dataUrl, glFor, exposeMap, setProjectionFor } from '../utils/pplrData.js'
 /**
  * pplr-rop-tree.vue — ROP hierarchy: Affinity Bloc → Cluster → People Group → PGIC.
  *
@@ -298,7 +298,7 @@ function flyToNode(node) {
 // ── Projection / basemap ──────────────────────────────────────────────────────
 function toggleProjection() {
   projection.value = projection.value === 'globe' ? 'mercator' : 'globe'
-  if (map.value) map.value.setProjection(projection.value)
+  if (map.value) setProjectionFor(map.value, projection.value)
 }
 
 function setBasemap(key) {
@@ -308,7 +308,7 @@ function setBasemap(key) {
   showBasemap.value = false
   const style = BASEMAPS.find(b => b.key === key)?.url
   if (!style || !map.value) return
-  map.value.once('style.load', () => { setupLayers(); map.value.setProjection(projection.value) })
+  map.value.once('style.load', () => { setupLayers(); setProjectionFor(map.value, projection.value) })
   // diff:false skips Mapbox's "try-to-diff-the-style" path which logs an
   // "Unimplemented: setSprite" warning whenever sprite sheets differ between
   // dark-v11 and light-v11. We re-add all our layers in setupLayers anyway,