Basic interfacs to query OSM data.

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<Geometry>) => {
     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={
             <>
               <Tree
-                title='osm'
+                title={
+                  <>
+                    <div>osm</div>
+                    <OsmFindAll location={location()} />
+                  </>
+                }
                 content={undefined}
                 subTree={
                   <>

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> = (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 (
+    <>
+      <IconButton onClick={handleClick}>
+        <OsmIcon width={24} height={24} viewBox='0 0 240 240' />
+      </IconButton>
+      <Dialog
+        open={!!osmResult()}
+        title='OsmObjects'
+        closeHandler={closeHandler}
+      >
+        <Tree
+          title='OSMData'
+          content={undefined}
+          subTree={
+            <For each={osmResult().elements}>
+              {(element) => (
+                <Tree
+                  title={element.id}
+                  content={
+                    <>
+                      <div>type: {element.type}</div>
+                      <Show when={element.type === 'node'}>
+                        <div>
+                          Coordinates: {element.lat}, {element.lon}
+                        </div>
+                      </Show>
+                      <For each={Object.keys(element.tags)}>
+                        {(tag) => (
+                          <div>
+                            {tag}: {element.tags[tag]}
+                          </div>
+                        )}
+                      </For>
+                    </>
+                  }
+                  subTree={undefined}
+                ></Tree>
+              )}
+            </For>
+          }
+        ></Tree>
+      </Dialog>
+    </>
+  );
+};
+
+export default OsmFindAll;