Basic info dialog

src/components/infos/Infos.module.css

@@ -0,0 +1,26 @@
+.control {
+  opacity: 1;
+  position: fixed !important;
+  top: 0px;
+  margin-left: calc(100% - 70px) !important;
+  z-index: 1;
+}
+
+.title {
+  background-color: rgba(14, 116, 144, 0.7);
+  color: white;
+  clear: both;
+}
+
+.title-text {
+  float: left;
+}
+
+.close {
+  float: right;
+}
+
+.body {
+  padding: 20px;
+  background-color: rgba(255, 255, 255, 0.7);
+}

src/components/infos/Infos.tsx

@@ -0,0 +1,76 @@
+import { Dialog, DialogTitle, IconButton } from '@suid/material';
+import { Feature } from 'ol';
+import { Geometry } from 'ol/geom';
+import { Component, createSignal, For } from 'solid-js';
+import { unwrap } from 'solid-js/store';
+import CloseIcon from '@suid/icons-material/Close';
+import { tree } from '../map';
+import style from './Infos.module.css';
+import { Paper, Stack } from '@suid/material';
+import styled from '@suid/material/styles/styled';
+
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  padding: theme.spacing(1),
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+}));
+
+const [open, setOpen] = createSignal(false);
+
+let selectedFeatures: Feature[] = [];
+
+export const clickHandler = (event: any) => {
+  const pixel = [event.originalEvent.x, event.originalEvent.y];
+  const features = event.map.getFeaturesAtPixel(pixel, { hitTolerance: 30 });
+  console.log({
+    caller: '<Infos/> / clickHandler',
+    event,
+    features,
+    tree: unwrap(tree),
+  });
+  selectedFeatures.map((feature) => feature.set('isSelected', false));
+  selectedFeatures = features;
+  features.map((feature: Feature<Geometry>) => {
+    const id = feature.get('id');
+    feature.set('isSelected', true);
+    console.log({
+      caller: '<Infos/> / clickHandler / feature',
+      event,
+      feature,
+      id,
+    });
+    const branch = tree[id];
+    if (branch?.updateHandler) branch.updateHandler(feature);
+  });
+  if (features.length > 0) {
+    setOpen(true);
+  }
+};
+
+const Infos: Component<{}> = (props) => {
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <Dialog onClose={handleClose} open={open()} class={style.dialog}>
+      <DialogTitle class={style.title}>
+        <div class={style['title-text']}>Nearby</div>
+        <IconButton onClick={handleClose} class={style.close}>
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+      <Stack spacing={1}>
+        <For each={selectedFeatures}>
+          {(feature) => <Item>{feature.get('type')}</Item>}
+        </For>
+      </Stack>
+    </Dialog>
+  );
+};
+
+export default Infos;

src/components/infos/index.ts

@@ -0,0 +1 @@
+export { default, clickHandler } from './Infos';

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>
   );
 };