diff --git a/src/components/infos/Infos.tsx b/src/components/infos/Infos.tsx index 311d472..e10a01d 100644 --- a/src/components/infos/Infos.tsx +++ b/src/components/infos/Infos.tsx @@ -21,6 +21,9 @@ import { getTagValue, } from '../map-tile-provider/MapTileProvider'; import style from '../gpx/styles'; +import OsmFindAll from './OsmFindAll'; +import { eventNames } from 'pouchdb-browser'; +import { toLonLat } from 'ol/proj'; const Item = styled(Paper)(({ theme }) => ({ ...theme.typography.body2, @@ -30,6 +33,7 @@ const Item = styled(Paper)(({ theme }) => ({ })); const [open, setOpen] = createSignal(false); +const [location, setLocation] = createSignal(); let selectedFeatures: Feature[] = []; let vectorLayerFeatures: Feature[] = []; @@ -42,8 +46,10 @@ const level2Key = (feature: Feature) => export const clickHandler = (event: any) => { hierarchy = {}; + const pixel = [event.originalEvent.x, event.originalEvent.y]; const features = event.map.getFeaturesAtPixel(pixel, { hitTolerance: 30 }); + setLocation(toLonLat(event.map.getCoordinateFromPixel(pixel))); console.log({ caller: 'Infos.tsx / clickHandler', features, event }); selectedFeatures.map((feature) => { if (feature.set) { @@ -110,6 +116,7 @@ export const clickHandler = (event: any) => { features, hierarchy, vectorLayerFeatures, + location: location(), }); selectedFeatures.map((feature: Feature) => { const id = feature.get('id'); @@ -125,9 +132,7 @@ export const clickHandler = (event: any) => { // length, }); }); - if (selectedFeatures.length > 0 || vectorLayerFeatures.length > 0) { - setOpen(true); - } + setOpen(true); }; const FeaturesTree: Component<{ featuresHierarchy: any }> = ({ @@ -166,7 +171,12 @@ const Infos: Component<{}> = (props) => { subTree={ <> +
osm
+ + + } content={undefined} subTree={ <> diff --git a/src/components/infos/OsmFindAll.tsx b/src/components/infos/OsmFindAll.tsx new file mode 100644 index 0000000..3ca768b --- /dev/null +++ b/src/components/infos/OsmFindAll.tsx @@ -0,0 +1,99 @@ +import { IconButton } from '@suid/material'; +import { Coordinate } from 'ol/coordinate'; +import { Point } from 'ol/geom'; +import { Component, createSignal, For, Show } from 'solid-js'; +import OsmIcon from '../../icons/OpenStreetMap-logo.svg?component-solid'; +import Dialog from '../dialog'; +import Tree from '../tree'; + +interface Props { + location: Coordinate; +} + +const OsmFindAll: Component = (props) => { + const { location } = props; + const [osmResult, setOsmResult] = createSignal(false); + + const handleClick = async () => { + const query = `[out:json][timeout:25]; + ( + nwr(if:count_tags()>0)(around:50,${location[1]},${location[0]}); + ); + out body; + `; + const response = await fetch( + 'https://overpass-api.de/api/interpreter?contact=vdv@dyomedea.com', + { + method: 'POST', // *GET, POST, PUT, DELETE, etc. + mode: 'cors', // no-cors, *cors, same-origin + cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached + credentials: 'same-origin', // include, *same-origin, omit + headers: { + 'Content-Type': 'text/plain', + // 'Content-Type': 'application/x-www-form-urlencoded', + }, + redirect: 'follow', // manual, *follow, error + referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url + body: query, // body data type must match "Content-Type" header + } + ); + const osmJson = await response.json(); // parses JSON response into native JavaScript objects + console.log({ + caller: 'OsmFindAll / handleClick', + query, + osmJson, + }); + setOsmResult(osmJson); + }; + + const closeHandler = () => { + setOsmResult(false); + }; + + return ( + <> + + + + + + {(element) => ( + +
type: {element.type}
+ +
+ Coordinates: {element.lat}, {element.lon} +
+
+ + {(tag) => ( +
+ {tag}: {element.tags[tag]} +
+ )} +
+ + } + subTree={undefined} + >
+ )} + + } + >
+
+ + ); +}; + +export default OsmFindAll;