Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

Playing with URL hashes

This commit is contained in:
Eric van der Vlist 2023-01-30 15:28:35 +01:00
parent 27a04f8a5d
commit c17f47bb67
2 changed files with 11 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/infos/Infos.tsx
View File

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

25
src/components/map/Map.tsx
View File

@ -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({