Playing with URL hashes

src/components/infos/Infos.tsx

@@ -1,10 +1,8 @@
-import { Button, Grid, IconButton } from '@suid/material';
+import { Button, IconButton } from '@suid/material';
 import { Feature } from 'ol';
 import { Geometry } from 'ol/geom';
-import { getLength } from 'ol/sphere';
 import { Component, createSignal, For, Show } from 'solid-js';
 import { useI18n } from '@solid-primitives/i18n';
-import EditIcon from '@suid/icons-material/Edit';
 import TravelExploreIcon from '@suid/icons-material/TravelExplore';
 import AddLocationAltIcon from '@suid/icons-material/AddLocationAlt';
 import OpenInNewIcon from '@suid/icons-material/OpenInNew';
@@ -22,9 +20,7 @@ import {
 } from '../map-tile-provider/MapTileProvider';
 import style from '../gpx/styles';
 import OsmFindAll from './OsmFindAll';
-import { eventNames } from 'pouchdb-browser';
 import { toLonLat } from 'ol/proj';
-import { getMap } from '../map';
 
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
@@ -48,7 +44,7 @@ const level2Key = (feature: Feature) =>
 export const clickHandler = (event: any) => {
   hierarchy = {};
 
-  const map = event.map || getMap();
+  const map = event.map;
   const pixel = [event.originalEvent.x, event.originalEvent.y];
   const features = map.getFeaturesAtPixel(pixel, { hitTolerance: 30 });
   setLocation(toLonLat(map.getCoordinateFromPixel(pixel)));

src/components/map/Map.tsx

@@ -1,5 +1,5 @@
 import { Component, createEffect, createSignal, onMount } from 'solid-js';
-import { useParams, useNavigate } from '@solidjs/router';
+import { useParams, useNavigate, useLocation } from '@solidjs/router';
 import OlMap from 'ol/Map';
 import View from 'ol/View';
 import TileLayer from 'ol/layer/Tile';
@@ -17,7 +17,7 @@ import 'ol/ol.css';
 import './Map.css';
 import { Collection } from 'ol';
 import { Point } from 'ol/geom';
-import { Style, Icon, Circle, Fill } from 'ol/style';
+import { Style, Icon } from 'ol/style';
 import GetLocation, { getCurrentLocation } from '../get-location';
 import ShowLocationIcon from '../get-location/ShowLocationIcon.svg';
 import { Back, Forward } from '../back-forward';
@@ -32,8 +32,6 @@ import PinchZoom from 'ol/interaction/PinchZoom';
 import KeyboardPan from 'ol/interaction/KeyboardPan';
 import KeyboardZoom from 'ol/interaction/KeyboardZoom';
 import MouseWheelZoom from 'ol/interaction/MouseWheelZoom';
-import Cluster from 'ol/source/Cluster.js';
-import * as olExtent from 'ol/extent';
 import DragZoom from 'ol/interaction/DragZoom';
 import Infos, { clickHandler } from '../infos';
 import GpxDialog from '../gpx-dialog';
@@ -43,14 +41,7 @@ import { debounce } from 'lodash';
 
 import { AndroidFullScreen } from '@awesome-cordova-plugins/android-full-screen';
 import Account from '../account';
-import OsmFetch from '../osm-fetch';
-import VectorTileLayer from 'ol/layer/VectorTile';
-import VectorTileSource from 'ol/source/VectorTile.js';
-import MVT from 'ol/format/MVT.js';
-import style from '../gpx/styles';
-import ClusterableVectorTileSourceProxy from '../../lib/ClusterableVectorTileSourceProxy';
 import { Overlays } from '../overlays/Overlays';
-import { WindowSharp } from '@suid/icons-material';
 
 const [getState, setState] = createSignal({
   lon: 0,
@@ -68,10 +59,16 @@ const [getMap, setMap] = createSignal<OlMap | null>(null);
 
 export { getMap };
 
+const useHash = () => useLocation().hash;
+
 const Map: Component = () => {
   const navigate = useNavigate();
   const params = useParams();
 
+  createEffect(() => {
+    console.log({ caller: 'Map / createEffect', hash: useHash() });
+  });
+
   // See https://stackoverflow.com/questions/71288670/how-to-make-fullscreen-ionic-capacitor-app
   AndroidFullScreen.isImmersiveModeSupported()
     .then(() => AndroidFullScreen.immersiveMode())
@@ -99,12 +96,8 @@ const Map: Component = () => {
       navigate(
         `/map/${getState().provider}/${lon}/${lat}/${zoom}/${
           getState().rotation
-        }`
+        }#mark=fromIntent`
       );
-      clickHandler({
-        map: false,
-        originalEvent: { x: window.innerWidth / 2, y: window.innerHeight / 2 },
-      });
     });
   } else {
     console.log({