Importing OSM routes,

src/components/gpx/styles.ts

@@ -117,6 +117,16 @@ const rteStrokeSel = new Stroke({
   width: 3,
 });
 
+const routeStroke = new Stroke({
+  color: '#d221db',
+  width: 4,
+});
+
+const routeStrokeSel = new Stroke({
+  color: '#ae21db',
+  width: 3,
+});
+
 const circleFill = new Fill({
   color: 'rgba(255,255,255,0.4)',
 });
@@ -248,6 +258,18 @@ const styles = {
       return new Style({ stroke: isSelected ? rteStrokeSel : rteStroke });
     }, memoizeOptions),
   },
+  route: {
+    getParameters: (feature: Feature) => {
+      return {
+        isSelected: feature.get('isSelected') ?? false,
+      };
+    },
+    getStyle: memoize((params: any) => {
+      console.log({ caller: 'getStyle', params });
+      const { isSelected } = params;
+      return new Style({ stroke: isSelected ? routeStrokeSel : routeStroke });
+    }, memoizeOptions),
+  },
 };
 
 export const style = (feature: Feature) => {

src/components/map/Map.tsx

@@ -41,6 +41,7 @@ import { debounce } from 'lodash';
 
 import { AndroidFullScreen } from '@awesome-cordova-plugins/android-full-screen';
 import Account from '../account';
+import OsmFetch from '../osm-fetch';
 
 const [getState, setState] = createSignal({
   lon: 0,
@@ -265,6 +266,7 @@ const Map: Component = () => {
   return (
     // @ts-ignore
     <div class='ol-map' ref={target}>
+      <OsmFetch map={getMap} />
       <GetLocation />
       <Forward />
       <Back />

src/components/osm-fetch/OsmFetch.module.css

@@ -0,0 +1,8 @@
+.control {
+    opacity: 1;
+    position: fixed !important;
+    top: 0px;
+    margin-left: calc(100% - 230px) !important;
+    z-index: 1;
+  }
+  

src/components/osm-fetch/OsmFetch.tsx

@@ -0,0 +1,81 @@
+import { IconButton, SvgIcon } from '@suid/material';
+import { Component, createEffect } from 'solid-js';
+import style from './OsmFetch.module.css';
+import { style as olStyle } from '../gpx/styles';
+
+import OsmIcon from '../../icons/OpenStreetMap-logo.svg?component-solid';
+import { Map } from 'ol';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import osmtogeojson from 'osmtogeojson';
+import { getBottomLeft, getBottomRight, getTopRight } from 'ol/extent';
+import GeoJSON from 'ol/format/GeoJSON';
+
+interface Props {
+  map: () => Map;
+}
+
+const OsmFetch: Component<Props> = ({ map }) => {
+  const vectorSource = new VectorSource();
+  const vectorLayer = new VectorLayer({
+    source: vectorSource,
+    style: olStyle,
+    declutter: true,
+  });
+  createEffect(() => map()?.addLayer(vectorLayer));
+
+  const handleClick = async () => {
+    const view = map().getView();
+    const extent = view.calculateExtent();
+    const sw = getBottomLeft(extent);
+    const ne = getTopRight(extent);
+
+    const query = `[out:json][timeout:25];
+    (
+      relation["route"="hiking"]["network"="nwn"](${sw[1]}, ${ne[0]}, ${ne[1]}, ${sw[0]});
+    );
+    out body;
+    >;
+    out skel qt;`;
+
+    console.log({ caller: 'OsmFetch / handleClick', query, extent });
+
+    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
+    const geoJson = osmtogeojson(osmJson, {});
+    console.log({
+      caller: 'OsmFetch / handleClick / osmJson',
+      osmJson,
+      geoJson,
+    });
+    const features = new GeoJSON().readFeatures(geoJson);
+    vectorSource.addFeatures(features);
+  };
+
+  return (
+    <>
+      <div class={style.control}>
+        <IconButton onClick={handleClick}>
+          <OsmIcon width={24} height={24} viewBox='0 0 240 240' />
+        </IconButton>
+      </div>
+    </>
+  );
+};
+
+export default OsmFetch;

src/components/osm-fetch/index.ts

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