Basic mechanism to support different tile providers.

src/components/map/Map.tsx

@@ -23,12 +23,14 @@ import ShowLocationIcon from '../get-location/ShowLocationIcon.svg';
 import { Back, Forward } from '../back-forward';
 import GpxImport from '../gpx-import';
 import AllGpxes from '../all-gpxes';
+import { mapTileProviders } from '../map-tile-provider';
 
 const [getState, setState] = createSignal({
   lon: 0,
   lat: 0,
   rotation: 0,
   zoom: 0,
+  provider: 'osm',
 });
 
 export { getState };
@@ -39,10 +41,20 @@ const Map: Component = () => {
   const navigate = useNavigate();
 
   let target: HTMLDivElement;
-  console.log({ caller: 'Map', center: params.center });
 
   createEffect(() => {
+    console.log({
+      caller: 'Map',
+      params: JSON.stringify({
+        provider: params.provider,
+        lon: params.lon,
+        lat: params.lat,
+        rotation: params.rotation,
+        zoom: params.zoom,
+      }),
+    });
     setState({
+      provider: params.provider,
       lon: +params.lon,
       lat: +params.lat,
       rotation: +params.rotation,
@@ -108,7 +120,7 @@ const Map: Component = () => {
       const center = view?.getCenter();
       if (center) {
         navigate(
-          `/map/${center[0]}/${
+          `/map/${getState().provider}/${center[0]}/${
             center[1]
           }/${view?.getZoom()}/${view?.getRotation()}`
         );
@@ -129,7 +141,7 @@ const Map: Component = () => {
       }),
       layers: [
         new TileLayer({
-          source: new OSM(),
+          source: mapTileProviders[params.provider].source,
         }),
         new VectorLayer({ source: new VectorSource() }),
       ],