a

src/App.tsx

@@ -1,8 +1,9 @@
 import { IconCurrentLocation } from '@tabler/icons-react';
 import { Geolocation } from 'ol';
-import { useMemo, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { GikadaiMap } from './GikadaiMap';
-import type { SimpleGeometry } from 'ol/geom';
+import { Point, type SimpleGeometry } from 'ol/geom';
+import { Map as OlMap } from 'ol';
 
 import classes from './App.module.css';
 
@@ -26,6 +27,18 @@ interface Building {
 
 function App() {
   const [building, setBuilding] = useState<Building>();
+  /* const [currentPosition, setCurrentPosition] = useState();
+
+  geolocation.on('change:position', () => {
+    const coordinates = geolocation.getPosition();
+    currentPositionFeature.setGeometry(
+      coordinates ? new Point(coordinates) : undefined,
+    );
+  }); */
+
+  const tracking = useRef<boolean>(false);
+
+  const mapref = useRef<React.MutableRefObject<OlMap | undefined>>();
 
   const gikadaiMap = useMemo(
     () => (
@@ -44,6 +57,8 @@ function App() {
           }
         }}
         geolocation={geolocation}
+        tracking={tracking}
+        ref={mapref}
       />
     ),
     [],
@@ -59,6 +74,13 @@ function App() {
           if (!geolocation.getTracking()) {
             geolocation.setTracking(true);
           }
+          tracking.current = true;
+          const coordinates = geolocation.getPosition();
+          if (tracking.current && coordinates) {
+            mapref.current?.current
+              ?.getView()
+              .fit(new Point(coordinates), { duration: 500 });
+          }
         }}
       >
         <IconCurrentLocation size={32} />

src/GikadaiMap.tsx

@@ -11,7 +11,7 @@ import { Vector as VectorLayer } from 'ol/layer';
 import { transform } from 'ol/proj';
 import { Vector as VectorSource } from 'ol/source';
 import { Circle, Fill, RegularShape, Stroke, Style, Text } from 'ol/style';
-import { useEffect, useRef } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 
 import streets from './assets/78.json';
 import buildingspolygon from './assets/546.json';
@@ -87,25 +87,22 @@ currentPositionFeature.setStyle(
 
 const accuracyFeature = new Feature();
 
-export function GikadaiMap({
-  onClick,
-  geolocation,
-}: {
-  onClick: (event: MapBrowserEvent<UIEvent>) => void;
-  geolocation: Geolocation;
-}) {
+export const GikadaiMap = forwardRef(function MyInput(
+  {
+    onClick,
+    geolocation,
+    tracking,
+  }: {
+    onClick: (event: MapBrowserEvent<UIEvent>) => void;
+    geolocation: Geolocation;
+    tracking: React.MutableRefObject<boolean>;
+  },
+  ref,
+) {
   const container = useRef<HTMLDivElement>(null);
+  //const tracking = useRef<boolean>(false);
 
-  geolocation.on('change:position', () => {
-    const coordinates = geolocation.getPosition();
-    currentPositionFeature.setGeometry(
-      coordinates ? new Point(coordinates) : undefined,
-    );
-  });
-
-  geolocation.on('change:accuracyGeometry', () => {
-    accuracyFeature.setGeometry(geolocation.getAccuracyGeometry() ?? undefined);
-  });
+  const mapref = useRef<OlMap>();
 
   useEffect(() => {
     const map = new OlMap({
@@ -194,24 +191,55 @@ export function GikadaiMap({
       map.setTarget(container.current);
     }
 
+    geolocation.on('change:position', () => {
+      const coordinates = geolocation.getPosition();
+      currentPositionFeature.setGeometry(
+        coordinates ? new Point(coordinates) : undefined,
+      );
+
+      if (tracking.current && coordinates) {
+        map.getView().fit(new Point(coordinates), { duration: 500 });
+      }
+    });
+
+    geolocation.on('change:accuracyGeometry', () => {
+      accuracyFeature.setGeometry(
+        geolocation.getAccuracyGeometry() ?? undefined,
+      );
+    });
+
+    map.on('pointerdrag', (e) => {
+      console.log(e);
+      tracking.current = false;
+    });
+
+    map.on('click', (e) => {
+      console.log(e);
+      tracking.current = false;
+    });
+
     map.on('click', (e: MapBrowserEvent<UIEvent>) => {
       console.log(
         new Point(e.coordinate)
           .transform('EPSG:3857', 'EPSG:4326')
           .getCoordinates(),
       );
       /* console.log(e.)
-      const feature = map.forEachFeatureAtPixel(e.pixel, (feature) => {
-        return feature;
-      }); */
+        const feature = map.forEachFeatureAtPixel(e.pixel, (feature) => {
+          return feature;
+        }); */
 
       onClick(e);
     });
 
+    mapref.current = map;
+
     return () => {
       map.dispose();
     };
-  }, [onClick]);
+  }, [onClick, geolocation, tracking]);
+
+  useImperativeHandle(ref, () => mapref, []);
 
   return (
     <div
@@ -222,4 +250,4 @@ export function GikadaiMap({
       ref={container}
     />
   );
-}
+});