Importing OSM routes,

package-lock.json

@@ -30,6 +30,7 @@
         "lodash": "^4.17.21",
         "memoizee": "^0.4.15",
         "ol": "^7.1.0",
+        "osmtogeojson": "^3.0.0-beta.5",
         "pouchdb": "^8.0.0",
         "pouchdb-browser": "^8.0.0",
         "solid-js": "^1.3.12",
@@ -1310,6 +1311,18 @@
         "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
+    "node_modules/@mapbox/geojson-rewind": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
+      "integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==",
+      "dependencies": {
+        "get-stream": "^6.0.1",
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "geojson-rewind": "geojson-rewind"
+      }
+    },
     "node_modules/@mapbox/jsonlint-lines-primitives": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
@@ -1786,6 +1799,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.10",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
+      "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
+      "optional": true
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
@@ -2067,6 +2086,14 @@
       "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==",
       "dev": true
     },
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.3.tgz",
+      "integrity": "sha512-Lv2vySXypg4nfa51LY1nU8yDAGo/5YwF+EY/rUZgIbfvwVARcd67ttCM8SMsTeJy51YhHYavEq+FS6R0hW9PFQ==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -2527,6 +2554,41 @@
         "node": ">= 6"
       }
     },
+    "node_modules/concat-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
+      "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
+      "engines": [
+        "node >= 6.0"
+      ],
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.0.2",
+        "typedarray": "^0.0.6"
+      }
+    },
+    "node_modules/concat-stream/node_modules/readable-stream": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/concat-stream/node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
@@ -3612,6 +3674,18 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/geojson-numeric": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/geojson-numeric/-/geojson-numeric-0.2.1.tgz",
+      "integrity": "sha512-rvItMp3W7pe16o2EQTnRw54v6WHdiE4bYjUsdr3FZskFb6oPC7gjLe4zginP+Wd1B/HLl2acTukfn16Lmwn7lg==",
+      "dependencies": {
+        "concat-stream": "2.0.0",
+        "optimist": "~0.3.5"
+      },
+      "bin": {
+        "geojson-numeric": "geojson-numeric"
+      }
+    },
     "node_modules/geotiff": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.0.7.tgz",
@@ -3652,6 +3726,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -3763,6 +3848,38 @@
       "integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ==",
       "dev": true
     },
+    "node_modules/htmlparser2": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.5.1.tgz",
+      "integrity": "sha512-9ouaQ6sjVJZS4NhPC65zNm2JCJotiH6BVm6iFvI90hRcsIEISMrgjqMUrPpU9G1VS4vTspH4dyaqSRf6JLQPbg==",
+      "dependencies": {
+        "domelementtype": "1",
+        "domhandler": "2.2",
+        "domutils": "1.3",
+        "readable-stream": "1.1"
+      }
+    },
+    "node_modules/htmlparser2/node_modules/domelementtype": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
+    },
+    "node_modules/htmlparser2/node_modules/domhandler": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.2.1.tgz",
+      "integrity": "sha512-MFFBQFGkyTuNe3vL9WEw9JdlCwIoBYpOGESLeZAvc/jClYNsOl6P1KzevJbWg76GovdEycfR7/2/Ra7NnqtMKw==",
+      "dependencies": {
+        "domelementtype": "1"
+      }
+    },
+    "node_modules/htmlparser2/node_modules/domutils": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.3.0.tgz",
+      "integrity": "sha512-1UdPmldjSGewOuWE40YYFZB1Q4im4LZoCMXGYeTeLz3R9hvxrDYJPRcPHXR4yBbubQebgGNCY2hwpJxmAiUMzQ==",
+      "dependencies": {
+        "domelementtype": "1"
+      }
+    },
     "node_modules/http-proxy-agent": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
@@ -4592,6 +4709,26 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jsonparse": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-0.0.5.tgz",
+      "integrity": "sha512-fw7Q/8gFR8iSekUi9I+HqWIap6mywuoe7hQIg3buTVjuZgALKj4HAmm0X6f+TaL4c9NJbvyFQdaI2ppr5p6dnQ==",
+      "engines": [
+        "node >= 0.2.0"
+      ]
+    },
+    "node_modules/JSONStream": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-0.8.0.tgz",
+      "integrity": "sha512-PiV28BpoUorz9kKFwRbD7+wg0t/k0ITHKn0DgCU44YZ/GaGAZRPt9q5PzoifC85gE55SEPIdMu0Labfxevj8cw==",
+      "dependencies": {
+        "jsonparse": "0.0.5",
+        "through": "~2.2.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/kleur": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
@@ -5212,6 +5349,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/optimist": {
+      "version": "0.3.7",
+      "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.3.7.tgz",
+      "integrity": "sha512-TCx0dXQzVtSCg2OgY/bO9hjM9cV4XYx09TVK+s3+FhkjT6LovsLe+pPMzpWf+6yXK/hUizs2gUoTw3jHM0VaTQ==",
+      "dependencies": {
+        "wordwrap": "~0.0.2"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
@@ -5229,6 +5374,36 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/osm-polygon-features": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/osm-polygon-features/-/osm-polygon-features-0.9.2.tgz",
+      "integrity": "sha512-5zNEFCq+G6X2TDkqbKYLF1+GtWVCCLA8zX+FVhSogsiTRsGquyaGRy5cYNW4BE3ci0MKOLvNTkFNsjsCNtgz0A=="
+    },
+    "node_modules/osmtogeojson": {
+      "version": "3.0.0-beta.5",
+      "resolved": "https://registry.npmjs.org/osmtogeojson/-/osmtogeojson-3.0.0-beta.5.tgz",
+      "integrity": "sha512-izvaUWnunrYvMB4LB0ZN15O1+g90c628yHS4SeSR3daVSBF9vdTHL7iVHfg0wEr1uEYjQ+lMJHCiYFusL5yKVg==",
+      "dependencies": {
+        "@mapbox/geojson-rewind": "0.5.2",
+        "@xmldom/xmldom": "0.8.3",
+        "concat-stream": "2.0.0",
+        "geojson-numeric": "0.2.1",
+        "htmlparser2": "3.5.1",
+        "JSONStream": "0.8.0",
+        "optimist": "~0.3.5",
+        "osm-polygon-features": "^0.9.1",
+        "tiny-osmpbf": "^0.1.0"
+      },
+      "bin": {
+        "osmtogeojson": "osmtogeojson"
+      },
+      "engines": {
+        "node": ">=0.5"
+      },
+      "optionalDependencies": {
+        "@types/geojson": "^7946.0"
+      }
+    },
     "node_modules/pako": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
@@ -6114,6 +6289,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/through": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.2.7.tgz",
+      "integrity": "sha512-JIR0m0ybkmTcR8URann+HbwKmodP+OE8UCbsifQDYMLD5J3em1Cdn3MYPpbEd5elGDwmP98T+WbqP/tvzA5Mjg=="
+    },
     "node_modules/through2": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
@@ -6155,6 +6335,20 @@
         "next-tick": "1"
       }
     },
+    "node_modules/tiny-inflate": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
+      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw=="
+    },
+    "node_modules/tiny-osmpbf": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-osmpbf/-/tiny-osmpbf-0.1.0.tgz",
+      "integrity": "sha512-Sl0xuDdM0+bnrYPhTAWnQ5eui8+2cpYCnsBxq0EFR1/IgmfB7+FiC23I8aa7tdP4AjaWvBUMK34kfXdY6C1LCQ==",
+      "dependencies": {
+        "pbf": "^3.0.4",
+        "tiny-inflate": "^1.0.2"
+      }
+    },
     "node_modules/tinybench": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.3.1.tgz",
@@ -6273,6 +6467,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA=="
+    },
     "node_modules/typescript": {
       "version": "4.9.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
@@ -6735,6 +6934,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/wordwrap": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
+      "integrity": "sha512-1tMA907+V4QmxV7dbRvb4/8MaRALK6q9Abid3ndMYnbyo8piisCmeONVqVSXqQA3KaP4SLt5b7ud6E2sqP8TFw==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",

package.json

@@ -46,6 +46,7 @@
     "lodash": "^4.17.21",
     "memoizee": "^0.4.15",
     "ol": "^7.1.0",
+    "osmtogeojson": "^3.0.0-beta.5",
     "pouchdb": "^8.0.0",
     "pouchdb-browser": "^8.0.0",
     "solid-js": "^1.3.12",

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';