Expose core to plugins via engine-agnostic map:* APIs

configure/src/components/Panel/Modals/NewMissionModal/NewMissionModal.js

@@ -118,7 +118,6 @@ const MAP_ENGINES = [
 
 const MODAL_NAME = "newMission";
 const NewMissionModal = (props) => {
-  const {} = props;
   const c = useStyles();
 
   const modal = useSelector((state) => state.core.modal[MODAL_NAME]);
@@ -155,6 +154,7 @@ const NewMissionModal = (props) => {
 
     const config = {
       msv: {
+        view: [39, -98, 4],
         radius: {
           major: planetRadius.major,
           minor: planetRadius.minor,
@@ -163,7 +163,7 @@ const NewMissionModal = (props) => {
       },
     };
 
-    if (selectedEngine === "deckgl" && basemapProvider !== "none" && basemapStyle) {
+    if (basemapProvider !== "none" && basemapStyle) {
       config.msv.basemap = {
         provider: basemapProvider,
         style: basemapStyle,
@@ -313,7 +313,7 @@ const NewMissionModal = (props) => {
         <Typography className={c.subtitle2}>
           {`Choose the rendering engine for this mission's 2D map. This cannot be changed after the mission is created.`}
         </Typography>
-        {selectedEngine === "deckgl" && (
+        {selectedEngine !== "" && (
           <>
             <FormControl className={c.planetDropdown} variant="filled">
               <InputLabel>Basemap</InputLabel>
@@ -322,13 +322,13 @@ const NewMissionModal = (props) => {
                 onChange={(e) => setBasemapProvider(e.target.value)}
                 label="Basemap"
               >
-                <MenuItem value="none">None (transparent background)</MenuItem>
+                <MenuItem value="none">None (no basemap)</MenuItem>
                 <MenuItem value="maplibre">MapLibre GL (open-source)</MenuItem>
                 <MenuItem value="mapbox">Mapbox GL (requires access token)</MenuItem>
               </Select>
             </FormControl>
             <Typography className={c.subtitle2}>
-              {`Optional vector-tile basemap rendered beneath deck.gl layers. Can be changed later.`}
+              {`Optional vector-tile basemap rendered beneath map layers. Can be changed later.`}
             </Typography>
             {basemapProvider !== "none" && (
               <>

configure/src/metaconfigs/tab-ui-config.json

@@ -76,7 +76,7 @@
         {
           "field": "msv.basemap.provider",
           "name": "Provider",
-          "description": "Renders a vector-tile basemap beneath deck.gl layers using MapboxOverlay. Has no effect on Leaflet-engine missions. 'maplibre' is open-source and requires no token. 'mapbox' requires an access token.",
+          "description": "Renders a vector-tile basemap beneath map layers using MapLibre or Mapbox GL. Works with both Leaflet and deck.gl engine missions. 'maplibre' is open-source and requires no token. 'mapbox' requires an access token.",
           "type": "dropdown",
           "options": ["none", "maplibre", "mapbox"],
           "default": "none",

src/essence/Basics/MapEngines/Adapters/DeckGLAdapter.ts

@@ -113,6 +113,8 @@ interface BasemapInstance {
     off(type: string, handler: (...args: unknown[]) => void): unknown
     /** Recalculate the map size from its container element. */
     resize(): void
+    /** Switch the map to a different style URL at runtime. */
+    setStyle(styleUrl: string): unknown
 }
 
 /**
@@ -324,6 +326,12 @@ export class DeckGLAdapter implements IMapEngine<Deck, Layer, PickingInfo> {
         return this._basemap
     }
 
+    setBasemapStyle(styleUrl: string): void {
+        if (this._basemap) {
+            this._basemap.setStyle(styleUrl)
+        }
+    }
+
     getContainer(): HTMLElement {
         return this._container
     }
@@ -823,9 +831,11 @@ export class DeckGLAdapter implements IMapEngine<Deck, Layer, PickingInfo> {
             },
             onClick: (info: PickingInfo) => {
                 this._featureClickHandler?.(pickInfoToResult(info))
+                this._emitClick(info)
             },
             onHover: (info: PickingInfo) => {
                 this._featureHoverHandler?.(pickInfoToResult(info))
+                this._emitMouseMove(info)
             },
         } as any)
     }
@@ -890,9 +900,11 @@ export class DeckGLAdapter implements IMapEngine<Deck, Layer, PickingInfo> {
             layers: [],
             onClick: (info: PickingInfo) => {
                 this._featureClickHandler?.(pickInfoToResult(info))
+                this._emitClick(info)
             },
             onHover: (info: PickingInfo) => {
                 this._featureHoverHandler?.(pickInfoToResult(info))
+                this._emitMouseMove(info)
             },
         })
 
@@ -988,6 +1000,34 @@ export class DeckGLAdapter implements IMapEngine<Deck, Layer, PickingInfo> {
     private _emitEvent(name: string, data?: unknown): void {
         this._eventListeners.get(name)?.forEach((h) => h(data as PickingInfo))
     }
+
+    private _emitClick(info: PickingInfo): void {
+        if (!info?.coordinate) return
+        this._eventListeners.get('click')?.forEach(
+            (h) => h(this._buildNormalizedPointerEvent(info) as unknown as PickingInfo)
+        )
+    }
+
+    private _emitMouseMove(info: PickingInfo): void {
+        if (!info?.coordinate) return
+        this._eventListeners.get('mousemove')?.forEach(
+            (h) => h(this._buildNormalizedPointerEvent(info) as unknown as PickingInfo)
+        )
+    }
+
+    private _buildNormalizedPointerEvent(info: PickingInfo): Record<string, unknown> {
+        const lat = info.coordinate![1]
+        const lng = info.coordinate![0]
+        return {
+            lat,
+            lng,
+            latlng: { lat, lng },
+            containerPoint:
+                info.x != null && info.y != null
+                    ? { x: info.x, y: info.y }
+                    : undefined,
+        }
+    }
 }
 
 export default DeckGLAdapter

src/essence/Basics/MapEngines/Adapters/DeckGLHelpers.ts

@@ -191,6 +191,29 @@ function getPropValue(object: unknown, path: string | undefined): unknown {
  *
  * @throws {Error} If `options.type` is not a supported layer type.
  */
+function _toRgba(
+    input: unknown,
+    fallback: [number, number, number, number]
+): [number, number, number, number] {
+    if (Array.isArray(input) && input.length >= 3) {
+        const [r, g, b, a] = input as number[]
+        return [r, g, b, a ?? 255]
+    }
+    if (typeof input === 'string') {
+        let s = input.trim()
+        if (s.startsWith('#')) s = s.slice(1)
+        if (s.length === 3) s = s.split('').map((c) => c + c).join('')
+        if (s.length === 6 || s.length === 8) {
+            const r = parseInt(s.slice(0, 2), 16)
+            const g = parseInt(s.slice(2, 4), 16)
+            const b = parseInt(s.slice(4, 6), 16)
+            const a = s.length === 8 ? parseInt(s.slice(6, 8), 16) : 255
+            if (!isNaN(r) && !isNaN(g) && !isNaN(b)) return [r, g, b, a]
+        }
+    }
+    return fallback
+}
+
 export function buildDeckLayer(id: string, options: LayerOptions): Layer {
     const resolvedType = DECKGL_TYPE_ALIAS[options.type ?? ''] ?? options.type
     switch (resolvedType) {

src/essence/Basics/MapEngines/Adapters/LeafletAdapter.ts

@@ -22,6 +22,7 @@ import {
     FitBoundsOptions,
     MapInitOptions,
     ProjectionOptions,
+    BasemapOptions,
 } from '../types/view'
 import { LayerOptions, TileLayerOptions, MarkerOptions } from '../types/layers'
 import { IMapEngineMarkers } from '../IMapEngineMarkers'
@@ -39,6 +40,7 @@ import {
     QueryFeaturesOptions,
 } from '../types/events'
 import { MapEngineType } from '../types/engine'
+import { MAPBOX_STATIC_TILE_OPTIONS, OSM_FALLBACK_TILE } from './LeafletHelpers'
 
 // Leaflet is loaded globally via window.L
 declare const L: any
@@ -79,6 +81,9 @@ export default class LeafletAdapter implements IMapEngine<any, any, any>, IMapEn
      */
     private _initOptions: MapInitOptions | null = null
 
+    private _basemapLayer: any = null
+    private _basemapAccessToken: string | undefined
+
     /**
      * Initialize the Leaflet map instance
      */
@@ -154,6 +159,10 @@ export default class LeafletAdapter implements IMapEngine<any, any, any>, IMapEn
         if (attributionControl) {
             attributionControl.remove()
         }
+
+        if (options.basemap && options.basemap.provider && options.basemap.provider !== 'none') {
+            this._initBasemapTileLayer(options.basemap)
+        }
     }
 
     /**
@@ -247,6 +256,8 @@ export default class LeafletAdapter implements IMapEngine<any, any, any>, IMapEn
     destroy(): void {
         if (!this._map) return
 
+        this._removeBasemapLayer()
+
         this._eventHandlers.forEach((handler, eventName) => {
             this._map.off(eventName, handler)
         })
@@ -268,6 +279,10 @@ export default class LeafletAdapter implements IMapEngine<any, any, any>, IMapEn
         return this._map
     }
 
+    getBasemap(): any {
+        return this._basemapLayer
+    }
+
     /**
      * Get the container element
      */
@@ -939,4 +954,66 @@ export default class LeafletAdapter implements IMapEngine<any, any, any>, IMapEn
         }
         return null
     }
+
+    // ========================================
+    // BASEMAP TILE LAYER METHODS
+    // ========================================
+
+    private _initBasemapTileLayer(basemap: BasemapOptions): void {
+        this._basemapAccessToken = basemap.accessToken
+        const spec = this._resolveBasemapTileSpec(basemap)
+        this._basemapLayer = L.tileLayer(spec.url, spec.options)
+        this._basemapLayer.addTo(this._map)
+        this._basemapLayer.bringToBack()
+
+        const specMinZoom = (spec.options as { minZoom?: number }).minZoom
+        if (typeof specMinZoom === 'number' && specMinZoom > this._map.getMinZoom()) {
+            this._map.setMinZoom(specMinZoom)
+        }
+    }
+
+    setBasemapStyle(styleUrl: string): void {
+        if (!this._map) return
+        const spec = this._resolveBasemapTileSpec({
+            style: styleUrl,
+            accessToken: this._basemapAccessToken,
+        })
+        this._removeBasemapLayer()
+        this._basemapLayer = L.tileLayer(spec.url, spec.options)
+        this._basemapLayer.addTo(this._map)
+        this._basemapLayer.bringToBack()
+    }
+
+    private _removeBasemapLayer(): void {
+        if (this._basemapLayer && this._map) {
+            this._map.removeLayer(this._basemapLayer)
+        }
+        this._basemapLayer = null
+    }
+
+    private _resolveBasemapTileSpec(basemap: Omit<BasemapOptions, 'provider'>): {
+        url: string
+        options: Record<string, unknown>
+    } {
+        const style = basemap.style || ''
+
+        const mapboxMatch = style.match(/^mapbox:\/\/styles\/([^/]+)\/(.+)$/)
+        if (mapboxMatch) {
+            const [, user, styleId] = mapboxMatch
+            const token = basemap.accessToken || this._basemapAccessToken || ''
+            return {
+                url: `https://api.mapbox.com/styles/v1/${user}/${styleId}/tiles/{z}/{x}/{y}?access_token=${token}`,
+                options: { ...MAPBOX_STATIC_TILE_OPTIONS },
+            }
+        }
+
+        if (style.includes('{z}') && style.includes('{x}') && style.includes('{y}')) {
+            return { url: style, options: {} }
+        }
+
+        return {
+            url: OSM_FALLBACK_TILE.url,
+            options: { ...OSM_FALLBACK_TILE.options },
+        }
+    }
 }

src/essence/Basics/MapEngines/Adapters/LeafletHelpers.ts

@@ -86,6 +86,28 @@ export function buildLeafletMarker(id: string, options: MarkerOptions): any {
     return marker
 }
 
+/**
+ * Mapbox Static Tiles API returns 512px tiles. `zoomOffset: -1` corrects
+ * Leaflet's 256-px-tile zoom math; `minZoom: 1` follows because Leaflet zoom 0
+ * would request URL zoom -1 (404). These are protocol-level coupling, not
+ * mission-tunable defaults.
+ */
+export const MAPBOX_STATIC_TILE_OPTIONS = {
+    tileSize: 512,
+    zoomOffset: -1,
+    minZoom: 1,
+    attribution: '© Mapbox © OpenStreetMap',
+} as const
+
+/** OSM fallback used when no Mapbox style or {z}/{x}/{y} template is provided. */
+export const OSM_FALLBACK_TILE = {
+    url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+    options: {
+        subdomains: 'abc',
+        attribution: '© OpenStreetMap contributors',
+    },
+} as const
+
 // ─── Private helpers ──────────────────────────────────────────────────────────
 
 /**