feat: Add GlobeControl for maplibre (#2554)

Author: yuiseki

docs/api-reference/maplibre/globe-control.md

@@ -0,0 +1,44 @@
+# GlobeControl
+
+React component that wraps maplibre-gl's [GlobeControl](https://maplibre.org/maplibre-gl-js/docs/API/classes/GlobeControl/) class.
+
+```tsx
+import * as React from 'react';
+import {Map, GlobeControl} from 'react-map-gl/maplibre';
+import 'maplibre-gl/dist/maplibre-gl.css';
+
+function App() {
+  return <Map
+    initialViewState={{
+      longitude: -100,
+      latitude: 40,
+      zoom: 3.5
+    }}
+    mapStyle="https://demotiles.maplibre.org/style.json"
+  >
+    <GlobeControl />
+  </Map>;
+}
+```
+
+## Properties
+
+### Reactive Properties
+
+#### `style`: CSSProperties {#style}
+
+CSS style override that applies to the control's container.
+
+### Other Properties
+
+The properties in this section are not reactive. They are only used when the component first mounts.
+
+#### `position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {#position}
+
+Default: `'top-right'`
+
+Placement of the control relative to the map.
+
+## Source
+
+[globe-control.ts](https://github.com/visgl/react-map-gl/tree/9.0-release/modules/react-maplibre/src/components/globe-control.ts)

modules/react-maplibre/src/components/globe-control.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { useEffect, memo } from "react";
+import { applyReactStyle } from "../utils/apply-react-style";
+import { useControl } from "./use-control";
+import { ControlPosition } from "../types/lib";
+
+export type GlobeControlProps = {
+  /** Placement of the control relative to the map. */
+  position?: ControlPosition;
+  /** CSS style override, applied to the control's container */
+  style?: React.CSSProperties;
+};
+
+function _GlobeControl(props: GlobeControlProps) {
+  const ctrl = useControl(({ mapLib }) => new mapLib.GlobeControl(props), {
+    position: props.position,
+  });
+
+  useEffect(() => {
+    applyReactStyle(ctrl._container, props.style);
+  }, [props.style]);
+
+  return null;
+}
+
+export const GlobeControl = memo(_GlobeControl);

modules/react-maplibre/src/types/lib.ts

@@ -18,7 +18,8 @@ import type {
   TerrainControl,
   TerrainSpecification,
   LogoControl,
-  LogoControlOptions
+  LogoControlOptions,
+  GlobeControl,
 } from 'maplibre-gl';
 
 export type {
@@ -43,6 +44,7 @@ export type {
   TerrainControl as TerrainControlInstance,
   LogoControl as LogoControlInstance,
   LogoControlOptions,
+  GlobeControl as GlobeControlInstance,
   CustomLayerInterface
 } from 'maplibre-gl';
 
@@ -73,4 +75,6 @@ export interface MapLib {
   TerrainControl: {new (options: TerrainSpecification): TerrainControl};
 
   LogoControl: {new (options: LogoControlOptions): LogoControl};
+
+  GlobeControl: {new (options: any): GlobeControl};
 }