Basic info dialog

src/components/map/Map.tsx

@@ -1,5 +1,5 @@
 import { Component, createEffect, createSignal, onMount } from 'solid-js';
-import { createStore, produce, unwrap } from 'solid-js/store';
+import { createStore } from 'solid-js/store';
 import { useParams, useNavigate } from '@solidjs/router';
 import OlMap from 'ol/Map';
 import View from 'ol/View';
@@ -11,7 +11,6 @@ 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 DragRotate from 'ol/interaction/DragRotate';
 
@@ -35,9 +34,7 @@ import KeyboardPan from 'ol/interaction/KeyboardPan';
 import KeyboardZoom from 'ol/interaction/KeyboardZoom';
 import MouseWheelZoom from 'ol/interaction/MouseWheelZoom';
 import DragZoom from 'ol/interaction/DragZoom';
-import Select from 'ol/interaction/Select';
-import Layer from 'ol/layer/Layer';
-import { selectedStyle } from './selectedStyle';
+import Infos, { clickHandler } from '../infos';
 
 const [getState, setState] = createSignal({
   lon: 0,
@@ -133,6 +130,7 @@ const Map: Component = () => {
         //      name: 'current location',
         style: style,
       });
+      feature.set('type', 'current-location');
       feature.setStyle(style);
       source.addFeature(feature);
       //    source.changed();
@@ -146,28 +144,6 @@ const Map: Component = () => {
     }
   });
 
-  let selectedFeatures: Feature[] = [];
-
-  const clickHandler = (event: any) => {
-    const pixel = [event.originalEvent.x, event.originalEvent.y];
-    const features = event.map.getFeaturesAtPixel(pixel, { hitTolerance: 30 });
-    console.log({
-      caller: 'clickHandler',
-      event,
-      features,
-      tree: unwrap(tree),
-    });
-    selectedFeatures.map((feature) => feature.set('isSelected', false));
-    selectedFeatures = features;
-    features.map((feature) => {
-      const id = feature.get('id');
-      feature.set('isSelected', true);
-      console.log({ caller: 'clickHandler / feature', event, feature, id });
-      const branch = tree[id];
-      if (branch?.updateHandler) branch.updateHandler(feature);
-    });
-  };
-
   onMount(() => {
     olUseGeographic();
 
@@ -243,6 +219,7 @@ const Map: Component = () => {
       <GpxImport />
       <MapTileProvider />
       <AllGpxes map={getMap} />
+      <Infos />
     </div>
   );
 };