Using a button as a map control

site/src/components/examples/CustomControl.jsx

@@ -0,0 +1,48 @@
+import Map from '../../../../lib/Map.js';
+import OSM from '../../../../lib/source/OSM.js';
+import React, {useCallback, useState} from 'react';
+import TileLayer from '../../../../lib/layer/WebGLTile.js';
+import View from '../../../../lib/View.js';
+
+function MapButton(props) {
+  return <button {...props}>⛶ reset view</button>;
+}
+
+const initialViewState = {center: [0, 0], zoom: 1};
+
+function CustomControl() {
+  const [viewState, setViewState] = useState(initialViewState);
+
+  const onViewChange = useCallback(event => {
+    const view = event.target;
+    setViewState({
+      center: view.getCenter(),
+      zoom: view.getZoom(),
+    });
+  }, []);
+
+  const onButtonClick = useCallback(() => {
+    setViewState(initialViewState);
+  }, []);
+
+  return (
+    <div style={{position: 'relative', height: '100%'}}>
+      <Map>
+        <View
+          center={viewState.center}
+          zoom={viewState.zoom}
+          onChange={onViewChange}
+        />
+        <TileLayer>
+          <OSM />
+        </TileLayer>
+      </Map>
+      <MapButton
+        style={{position: 'absolute', top: '10px', right: '10px'}}
+        onClick={onButtonClick}
+      />
+    </div>
+  );
+}
+
+export default CustomControl;

site/src/content/examples/custom-control.mdx

@@ -0,0 +1,12 @@
+---
+title: 'Custom Control'
+level: 1
+description: |
+  This example demonstrates how a regular React component can be used as a map control.
+  The `<Map>` and `<MapButton>` components are rendered to the same parent element,
+  and the map button is styled to render at the top right of the map.
+---
+
+import CustomControl from '../../components/examples/CustomControl.jsx';
+
+<CustomControl client:only="react" />