diff --git a/docs/api-reference/maplibre/globe-control.md b/docs/api-reference/maplibre/globe-control.md new file mode 100644 index 000000000..c1a999882 --- /dev/null +++ b/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 + + ; +} +``` + +## 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) diff --git a/modules/react-maplibre/src/components/globe-control.ts b/modules/react-maplibre/src/components/globe-control.ts new file mode 100644 index 000000000..419c2592e --- /dev/null +++ b/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); diff --git a/modules/react-maplibre/src/types/lib.ts b/modules/react-maplibre/src/types/lib.ts index 34a9b5c07..40b36a372 100644 --- a/modules/react-maplibre/src/types/lib.ts +++ b/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}; }