Cleaning before switching to SoliJS

src/components/map/Map.css

@@ -1,17 +0,0 @@
-.ol-map {
-  position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-}
-.ol-control {
-  position: absolute;
-  background-color: rgba(255, 255, 255, 0.4);
-  border-radius: 4px;
-  padding: 2px;
-}
-.ol-full-screen {
-  top: 0.5em;
-  right: 0.5em;
-}

src/components/map/Map.tsx

@@ -1,189 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-
-import { atom, useAtom } from 'jotai';
-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';
-import Control from 'ol/control/Control';
-import OSM from 'ol/source/OSM';
-import { useGeographic as olUseGeographic } from 'ol/proj';
-
-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(
-// (get) => {
-//   const map = get(mapAtom);
-//   const view = map?.getView();
-//   return {
-//     center: view?.getCenter(),
-//     zoom: view?.getZoom(),
-//     rotation: view?.getRotation(),
-//   };
-// },
-// (get, set, state: any) => {
-//   const map = get(mapAtom);
-//   const view = map?.getView();
-//   view?.setCenter(state.center);
-//   view?.setZoom(state.zoom);
-//   view?.setRotation(state.rotation);
-// }
-//);
-
-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, map });
-      previousState.current = 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 });
-    }
-  }
-
-  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(() => {
-    console.log({ caller: 'Map / useEffect', target, getLocation });
-
-    const changeListener = (event: any) => {
-      const view = olMap?.getView();
-      const newState = {
-        center: view?.getCenter(),
-        zoom: view?.getZoom(),
-        rotation: view?.getRotation(),
-      };
-      setState(newState);
-
-      console.log({
-        caller: 'Map / changeListener',
-        event,
-        newState,
-        olMap,
-      });
-    };
-
-    const controls = new Collection([
-      new Attribution({ collapsible: true }),
-      new Rotate(),
-      new ScaleLine({ bar: true }),
-      new Control({ element: getLocation.current ?? undefined }),
-    ]);
-    const newSource = new VectorSource();
-    setSource(newSource);
-    const olMap = new OlMap({
-      view: new View(
-        state ?? {
-          center: [0, 0],
-          zoom: 1,
-        }
-      ),
-      layers: [
-        new TileLayer({
-          source: new OSM(),
-        }),
-        new VectorLayer({ source: newSource }),
-      ],
-      target: target.current ?? undefined,
-      controls,
-    });
-    olMap.on(['moveend'], changeListener);
-    setMap(olMap);
-  }, []);
-
-  return (
-    <>
-      <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>
-    </>
-  );
-};
-
-export default Map;

src/components/map/index.ts

@@ -1 +0,0 @@
-export { default, stateAtom } from './Map';