An an example for two-way marker position binding

Nicolapps · Sep 9, 2023 · 0fe8225 · 0fe8225
1 parent 6f45234
commit 0fe8225
Showing 1 changed file with 65 additions and 1 deletion.
diff --git a/src/stories/Marker.stories.tsx b/src/stories/Marker.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryFn } from '@storybook/react';
 
 import Map from '../components/Map';
 import Marker from '../components/Marker';
-import { CoordinateRegion, FeatureVisibility } from '../util/parameters';
+import { Coordinate, CoordinateRegion, FeatureVisibility } from '../util/parameters';
 
 // @ts-ignore
 const token = import.meta.env.STORYBOOK_MAPKIT_JS_TOKEN!;
@@ -88,6 +88,70 @@ export const TwoWayBindingSelected = () => {
 };
 TwoWayBindingSelected.storyName = 'Two-Way Binding for `selected`';
 
+export const MoveableMarker = () => {
+  const [latitude, setLatitude] = useState(46.20738751546706);
+  const [longitude, setLongitude] = useState(6.155891756231);
+
+  const idLatitude = useId();
+  const idLongitude = useId();
+
+  const initialRegion: CoordinateRegion = useMemo(() => ({
+    centerLatitude: 46.20738751546706,
+    centerLongitude: 6.155891756231,
+    latitudeDelta: 0.01,
+    longitudeDelta: 0.01,
+  }), []);
+
+  return (
+    <>
+      <Map token={token} initialRegion={initialRegion}>
+        <Marker
+          latitude={latitude}
+          longitude={longitude}
+          title="Tap and hold to move"
+          draggable
+          enabled
+          onDragEnd={(coordinate) => {
+            setLatitude(coordinate.latitude);
+            setLongitude(coordinate.longitude);
+          }}
+        />
+      </Map>
+
+      <div className="map-overlay map-overlay-top">
+        <div className="map-overlay-box map-overlay-inputs">
+          <label
+            className="form-group"
+            htmlFor={idLatitude}
+          >
+            Latitude
+            <input
+              id={idLatitude}
+              type="text"
+              className="input"
+              value={latitude}
+              onChange={(e) => setLatitude(Number(e.target.value))}
+            />
+          </label>
+          <label
+            className="form-group"
+            htmlFor={idLongitude}
+          >
+            Longitude
+            <input
+              id={idLatitude}
+              type="text"
+              className="input"
+              value={longitude}
+              onChange={(e) => setLongitude(Number(e.target.value))}
+            />
+          </label>
+        </div>
+      </div>
+    </>
+  );
+};
+
 export const MarkerClustering = () => {
   const clusteringIdentifier = 'id';
   const [selected, setSelected] = useState<number | null>(null);