Updated focus button for bounds

Author: davenquinn

packages/map-interface/src/location-panel/header.ts

@@ -7,6 +7,7 @@ import {
   LocationFocusButton,
   useFocusState,
   isCentered,
+  BoundsFocusButton,
 } from "@macrostrat/mapbox-react";
 
 const h = hyper.styled(styles);
@@ -66,28 +67,37 @@ function CopyLinkButton({ itemName, children, onClick, ...rest }) {
 }
 
 export interface InfoDrawerHeaderProps {
-  onClose: () => void;
-  position: mapboxgl.LngLat;
+  onClose?: () => void;
+  position?: mapboxgl.LngLat;
   zoom?: number;
   elevation?: number;
   showCopyPositionButton?: boolean;
+  bounds?: mapboxgl.LngLatBounds;
 }
 
 export function InfoDrawerHeader(props: InfoDrawerHeaderProps) {
   const {
     onClose,
     position,
+    bounds,
     zoom = 7,
     elevation,
     showCopyPositionButton,
     children,
   } = props;
 
-  return h("header.location-panel-header", [
-    h.if(position != null)(PositionButton, {
+  let leftButton = null;
+  if (bounds != null) {
+    leftButton = h(BoundsFocusButton, { bounds });
+  } else if (position != null) {
+    leftButton = h(PositionButton, {
       position,
       showCopyLink: showCopyPositionButton,
-    }),
+    });
+  }
+
+  return h("header.location-panel-header", [
+    leftButton,
     children,
     h("div.spacer"),
     h.if(position != null)(LngLatCoords, {

packages/map-interface/stories/map-details-panel.stories.ts

@@ -31,12 +31,13 @@ function DetailPanelMap(props) {
 }
 
 export function PositionInformation(props) {
-  const { position, onClose, title, children, ...rest } = props;
+  const { position, bounds, onClose, title, children, ...rest } = props;
 
   const detailPanel = h(
     LocationPanel,
     {
       position,
+      bounds,
       title,
       onClose,
     },
@@ -48,6 +49,7 @@ export function PositionInformation(props) {
     {
       ...rest,
       detailPanel,
+      bounds,
     },
     [
       h.if(position != null)(MapMarker, {
@@ -136,7 +138,7 @@ export const WithBounds: Story = {
     bounds,
     position: null,
     mapPosition: null,
-    title: "New York City",
+    title: "Where it all happens",
     onClose() {
       console.log("Close");
     },

packages/mapbox-react/src/focus-state.ts

@@ -451,3 +451,43 @@ export function LocationFocusButton({
     [_isCentered ? null : h("span.recenter-label", "Recenter")]
   );
 }
+
+export function BoundsFocusButton({
+  bounds,
+  className,
+  easeDuration = 800,
+  focusState = null,
+  ...rest
+}) {
+  const map = useMapRef();
+
+  const center = [(bounds[0] + bounds[2]) / 2, (bounds[1] + bounds[3]) / 2];
+
+  const defaultFocusState = useFocusState({ lat: center[1], lng: center[0] });
+  focusState ??= defaultFocusState;
+  const _isCentered = isCentered(focusState);
+
+  return h(
+    Button,
+    {
+      minimal: true,
+      icon: "detection",
+      onClick() {
+        if (focusState == PositionFocusState.CENTERED) {
+          map.current?.resetNorth();
+        } else {
+          let opts = { duration: easeDuration };
+          map.current?.fitBounds(bounds, opts);
+        }
+      },
+      className: classNames(
+        "recenter-button",
+        className,
+        classNameForFocusState(focusState)
+      ),
+      intent: intentForFocusState(focusState),
+      ...rest,
+    },
+    [_isCentered ? null : h("span.recenter-label", "Recenter")]
+  );
+}