Bugfix for map-interface package

Author: davenquinn

packages/map-interface/CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file. The format
 is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this
 project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.3.2] - 2025-06-26
+
+Bugfix for DevMapPage when applying custom styles
+
 ## [1.3.1] - 2025-06-25
 
 Small improvements to types and styles

packages/map-interface/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/map-interface",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Map interface for Macrostrat",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

packages/map-interface/src/dev/map-page.ts

@@ -67,7 +67,8 @@ export function MapInspectorV2({
     mapboxgl.accessToken = mapboxToken;
   }
 
-  style ??= useBasicMapStyle({ styleType });
+  const basicStyle = useBasicMapStyle({ styleType });
+  style ??= basicStyle;
 
   const [isOpen, setOpen] = useState(false);
 

packages/map-interface/src/dev/tile-extent.ts

@@ -1,6 +1,6 @@
-import { useMapConditionalStyle, useMapRef } from "@macrostrat/mapbox-react";
+import { useMapStyleOperator } from "@macrostrat/mapbox-react";
 import { tileToGeoJSON } from "@mapbox/tilebelt";
-import { useCallback } from "react";
+import { setGeoJSON } from "@macrostrat/mapbox-utils";
 
 type TileIndex = { x: number; y: number; z: number };
 
@@ -11,36 +11,35 @@ export function TileExtentLayer({
   tile: TileIndex | null;
   color?: string;
 }) {
-  const styleCallback = useCallback(
-    (map, val: TileIndex) => {
+  useMapStyleOperator(
+    (map) => {
       const style = map.getStyle();
       if (style.layers == null) return;
       style.layers = style.layers.filter((l) => l.id != "tile-extent");
-      if (val == null) {
+      if (tile == null) {
         return map.setStyle(style);
       }
-      const { x, y, z } = val;
+      const { x, y, z } = tile;
       const extent = tileToGeoJSON([x, y, z]);
-      const source = {
-        type: "geojson",
-        data: extent,
-      };
-      const layer = {
+
+      setGeoJSON(map, "tile-extent", extent as any);
+
+      if (map.getLayer("tile-extent") != null) {
+        // If the layer already exists, we can just update it
+        map.removeLayer("tile-extent");
+      }
+
+      map.addLayer({
         id: "tile-extent",
         type: "line",
         source: "tile-extent",
         paint: {
           "line-color": color,
           "line-width": 2,
         },
-      };
-      style.sources["tile-extent"] = source;
-      style.layers.push(layer);
-      map.setStyle(style);
+      });
     },
-    [color],
+    [color, tile],
   );
-  const map = useMapRef();
-  useMapConditionalStyle(map, tile, styleCallback);
   return null;
 }