ShowLocation component.

src/components/map/Map.tsx

@@ -6,6 +6,9 @@ import { atomWithHash } from 'jotai-location';
 import OlMap from 'ol/Map';
 import View from 'ol/View';
 import TileLayer from 'ol/layer/Tile';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import Feature from 'ol/Feature';
 import Attribution from 'ol/control/Attribution';
 import Rotate from 'ol/control/Rotate';
 import ScaleLine from 'ol/control/ScaleLine';
@@ -17,13 +20,17 @@ import { isEqual } from 'lodash';
 
 import './Map.css';
 import Collection from 'ol/Collection';
+import { Circle, Fill, Stroke, Style, Icon } from 'ol/style';
 import GetLocation from '../get-location';
+import ShowLocation, { locationAtom } from '../show-location';
+import { Point } from 'ol/geom';
 
 export interface MapProperties {}
 
 olUseGeographic();
 
 const mapAtom = atom<OlMap | null>(null);
+const sourceAtom = atom<VectorSource | null>(null);
 
 export const stateAtom = atomWithHash<any>('map', null);
 //atom(
@@ -47,24 +54,69 @@ export const stateAtom = atomWithHash<any>('map', null);
 
 export const Map: React.FC<MapProperties> = (props: MapProperties) => {
   const [map, setMap] = useAtom(mapAtom);
+  const [source, setSource] = useAtom(sourceAtom);
   const [state, setState] = useAtom(stateAtom);
+  const [location] = useAtom(locationAtom);
 
   const target = useRef<HTMLDivElement>(null);
   const getLocation = useRef<HTMLDivElement>(null);
+  const showLocation = useRef<SVGSVGElement>(null);
 
   const previousState = useRef<any>(null);
 
   if (state && map) {
     if (!isEqual(state, previousState.current)) {
-      console.log({ caller: 'Map / updateView', state });
+      console.log({ caller: 'Map / updateView', state, map });
       previousState.current = state;
-      map.getView().animate(state);
+      const view = map.getView();
+      //   view.beginInteraction();
+      // const view = new View(state);
+      // map.setView(view);
+      // map.renderSync();
+      // view.setCenter(state.center);
+      // view.setZoom(state.zoom);
+      // view.setRotation(state.rotation);
+      // view.resolveConstraints();
+      //  view.endInteraction();
+      //  map.setView(view);
+      // map.getView().animate(state);
+      // view.endInteraction();
+      view.animate({ ...state, duration: 500 });
     }
-    // const view = map.getView();
-    // view.setCenter(state.center);
-    // view.setZoom(state.zoom);
-    // view.setRotation(state.rotation);
-    // map.renderSync();
+  }
+
+  if (source && location && showLocation.current) {
+    console.log({ caller: 'Map / updateLocation', location, source, map });
+    source.clear(true);
+    const point = new Point(location);
+    const style = new Style({
+      image: new Icon({
+        //      size: [20, 20],
+        imgSize: [24, 24],
+        declutterMode: 'declutter',
+        src: `data:image/svg+xml;utf8,${encodeURI(
+          showLocation.current.outerHTML
+        )}`,
+      }),
+    });
+    const feature = new Feature({
+      geometry: point,
+      //      labelPoint: point,
+      //      name: 'current location',
+      style: style,
+    });
+    feature.setStyle(style);
+    source.addFeature(feature);
+//    source.changed();
+    console.log({
+      caller: 'Map / updateLocation',
+      location,
+      source,
+      map,
+      style,
+      feature,
+      showLocation: showLocation.current,
+    });
   }
 
   useEffect(() => {
@@ -93,6 +145,8 @@ export const Map: React.FC<MapProperties> = (props: MapProperties) => {
       new ScaleLine({ bar: true }),
       new Control({ element: getLocation.current ?? undefined }),
     ]);
+    const newSource = new VectorSource();
+    setSource(newSource);
     const olMap = new OlMap({
       view: new View(
         state ?? {
@@ -104,11 +158,12 @@ export const Map: React.FC<MapProperties> = (props: MapProperties) => {
         new TileLayer({
           source: new OSM(),
         }),
+        new VectorLayer({ source: newSource }),
       ],
       target: target.current ?? undefined,
       controls,
     });
-    olMap.on(['change', 'moveend'], changeListener);
+    olMap.on(['moveend'], changeListener);
     setMap(olMap);
   }, []);
 
@@ -117,6 +172,15 @@ export const Map: React.FC<MapProperties> = (props: MapProperties) => {
       <div ref={getLocation}>
         <GetLocation />
       </div>
+      <svg
+        ref={showLocation}
+        xmlns='http://www.w3.org/2000/svg'
+        width={24}
+        height={24}
+        version='1.1'
+      >
+        <ShowLocation />
+      </svg>
       <div ref={target} className='ol-map'></div>
     </>
   );