@macrostrat/map-interface 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macrostrat/map-interface",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Map interface for Macrostrat",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -11,14 +11,14 @@
     "@macrostrat/hyper": "^2.2.1",
     "@macrostrat/mapbox-react": "^2.1.0",
     "@macrostrat/mapbox-utils": "^1.2.1",
-    "@macrostrat/ui-components": "^3.0.0",
+    "@macrostrat/ui-components": "^3.1.0",
     "@mapbox/tilebelt": "^1.0.2",
     "@turf/bbox": "^6.5.0",
     "chroma-js": "^2.4.2",
     "classnames": "^2.3.2",
     "d3-array": "^3.2.4",
     "d3-format": "^3.1.0",
-    "mapbox-gl": "^2.11.0",
+    "mapbox-gl": "^2.15.0",
     "transition-hook": "^1.5.2",
     "underscore": "^1.13.6",
     "use-resize-observer": "^9.1.0"

package/src/container.ts

@@ -15,10 +15,6 @@ import { Card } from "@blueprintjs/core";
 
 import { ReactNode } from "react";
 
-export function MapInterface() {
-  return h("div", "Hello world");
-}
-
 const h = hyper.styled(styles);
 
 type AnyElement = React.ReactNode | React.ReactElement | React.ReactFragment;
@@ -39,7 +35,6 @@ function _MapAreaContainer({
   mapControls = h(MapBottomControls),
   contextStackProps = null,
   detailStackProps = null,
-  mapPosition = null,
   fitViewport = true,
   ...rest
 }: {
@@ -56,7 +51,6 @@ function _MapAreaContainer({
   contextPanelOpen?: boolean;
   contextStackProps?: HTMLDivProps;
   detailStackProps?: HTMLDivProps;
-  mapPosition?: MapPosition;
   fitViewport?: boolean;
 }) {
   const _detailPanelOpen = detailPanelOpen ?? detailPanel != null;
@@ -88,7 +82,6 @@ function _MapAreaContainer({
       className: classNames("map-page", className, {
         "fit-viewport": fitViewport,
       }),
-      mapPosition,
     },
     [
       h("div.main-ui", { className: mainUIClassName, ...rest }, [
@@ -121,7 +114,6 @@ export const MapAreaContainer = (props) =>
 
 interface MapContainerProps {
   className?: string;
-  mapPosition?: MapPosition;
   children?: ReactNode;
 }
 

package/src/dev/main.module.sass

@@ -1,6 +1,6 @@
 .feature-panel
   position: relative
-  overflow-x: hidden
+  margin: 0 -1em
 
 .key-value
   display: inline-block
@@ -27,9 +27,6 @@
 
 .feature-group
   border-bottom: 1px solid var(--panel-rule-inner)
-  padding: 0 1em
-  margin-left: -1em
-  margin-right: -1em
   margin-bottom: 0.5em
   &:last-child
     border-bottom: none
@@ -38,7 +35,6 @@
   display: flex
   flex-direction: row
   align-items: baseline
-  padding: 0 1em
   h3
     margin-right: 0.5em
 

package/src/dev/map-page.ts

@@ -48,7 +48,7 @@ export function DevMapPage({
   headerElement?: React.ReactElement;
   transformRequest?: mapboxgl.TransformRequestFunction;
   title?: string;
-  style: mapboxgl.Style | string;
+  style?: mapboxgl.Style | string;
   children?: React.ReactNode;
   mapboxToken?: string;
   overlayStyle?: mapboxgl.Style | string;
@@ -131,8 +131,6 @@ export function DevMapPage({
     tile = { x: f._x, y: f._y, z: f._z };
   }
 
-  console.log("Style", actualStyle);
-
   return h(
     MapAreaContainer,
     {
@@ -163,7 +161,8 @@ export function DevMapPage({
         style: actualStyle,
         transformRequest,
         mapPosition,
-        projection: "globe",
+        projection: { name: "globe" },
+        mapboxToken,
       },
       [
         h(FeatureSelectionHandler, {

package/src/helpers.ts

@@ -66,6 +66,7 @@ export function MapPaddingManager({
     },
   });
 
+  // Ideally, we would not have to do this when we know the infobox is loaded
   useMapEaseToCenter(infoMarkerPosition, padding);
 
   return null;

package/src/map-view/index.ts

@@ -22,6 +22,7 @@ import {
   MapResizeManager,
 } from "../helpers";
 import "mapbox-gl/dist/mapbox-gl.css";
+import { getMapPadding } from "../utils";
 
 const h = hyper.styled({ ...styles, ...rootStyles });
 
@@ -30,14 +31,19 @@ type MapboxCoreOptions = Omit<mapboxgl.MapboxOptions, "container">;
 export interface MapViewProps extends MapboxCoreOptions {
   showLineSymbols?: boolean;
   children?: React.ReactNode;
+  mapboxToken?: string;
+  // Deprecated
   accessToken?: string;
   terrainSourceID?: string;
   enableTerrain?: boolean;
   infoMarkerPosition?: mapboxgl.LngLatLike;
-  //style: mapboxgl.Style | string;
-  //transformRequest?: mapboxgl.TransformRequestFunction;
   mapPosition?: MapPosition;
-  onMapLoad?: (map: mapboxgl.Map) => void;
+  initializeMap?: (
+    container: HTMLElement,
+    args: MapboxOptionsExt
+  ) => mapboxgl.Map;
+  onMapLoaded?: (map: mapboxgl.Map) => void;
+  onStyleLoaded?: (map: mapboxgl.Map) => void;
 }
 
 export interface MapboxOptionsExt extends MapboxCoreOptions {
@@ -83,6 +89,8 @@ export function MapView(props: MapViewProps) {
     mapPosition = defaultMapPosition,
     initializeMap = defaultInitializeMap,
     children,
+    mapboxToken,
+    // Deprecated
     accessToken,
     infoMarkerPosition,
     transformRequest,
@@ -95,8 +103,10 @@ export function MapView(props: MapViewProps) {
     terrainSourceID ??= "mapbox-3d-dem";
   }
 
-  if (accessToken != null) {
-    mapboxgl.accessToken = accessToken;
+  const _mapboxToken = mapboxToken ?? accessToken;
+
+  if (_mapboxToken != null) {
+    mapboxgl.accessToken = _mapboxToken;
   }
 
   const dispatch = useMapDispatch();
@@ -105,6 +115,9 @@ export function MapView(props: MapViewProps) {
   const parentRef = useRef<HTMLDivElement>();
 
   // Keep track of map position for reloads
+  useEffect(() => {
+    console.log("Map updated", mapRef.current);
+  }, [mapRef.current]);
 
   useEffect(() => {
     if (style == null) return;
@@ -119,6 +132,7 @@ export function MapView(props: MapViewProps) {
       mapPosition,
       ...rest,
     });
+    map.setPadding(getMapPadding(ref, parentRef), { animate: false });
     map.on("style.load", () => {
       onStyleLoaded?.(map);
       dispatch({ type: "set-style-loaded", payload: true });

package/src/map-view/main.module.sass

@@ -9,6 +9,9 @@
   bottom: 0
   left: 0
   right: 0
+  &:global(.mapboxgl-map)
+    // override the default mapbox position: relative in all cases
+    position: absolute
 
 /* Desktop styling is necessarily much more complicated than mobile
  to handle a two-column layout. */