Basic mechanism to support different tile providers.

src/App.tsx

@@ -5,8 +5,8 @@ import Map from './components/map';
 const App: Component = () => {
   return (
     <Routes>
-      <Route path='/map/:lon/:lat/:zoom/:rotation' component={Map} />
+      <Route path='/map/:provider/:lon/:lat/:zoom/:rotation' component={Map} />
-      <Route path='/*' element={<Navigate href='/map/0/0/1/0' />} />
+      <Route path='/*' element={<Navigate href='/map/osm/0/0/2/0' />} />
     </Routes>
   );
 };

src/components/get-location/GetLocation.tsx

@@ -21,7 +21,7 @@ const GetLocation: Component = () => {
       console.log({ caller: 'GetLocation/onClickHandler', position });
       const state = getState();
       navigate(
-        `/map/${position.coords.longitude}/${position.coords.latitude}/${state.zoom}/${state.rotation}`
+        `/map/${state.provider}/${position.coords.longitude}/${position.coords.latitude}/${state.zoom}/${state.rotation}`
       );
       setCurrentLocation({
         lon: position.coords.longitude,

src/components/gpx/styles.ts

@@ -40,10 +40,11 @@ const textFill = new Fill({
 
 const wptTextStyle = (feature: Feature) =>
   new Text({
-    font: '12px Calibri,sans-serif',
+    font: '16px Calibri,sans-serif',
     text: feature.get('name'),
     fill: textFill,
     stroke: textStroke,
+    offsetY: -40,
   });
 
 const trtksegStyle = new Style({ stroke: trackStrokeStyle });

src/components/map-tile-provider/MapTileProvider.tsx

@@ -0,0 +1,64 @@
+import OSM from 'ol/source/OSM';
+import XYZ from 'ol/source/XYZ';
+import { Component } from 'solid-js';
+
+interface TileProvider {
+  name: string;
+  language: string;
+  source: XYZ;
+}
+
+type TileProviders = {
+  [key: string]: TileProvider;
+};
+
+export const mapTileProviders: TileProviders = {
+  osm: {
+    name: 'Open Street Map',
+    language: 'int',
+    source: new OSM(),
+  },
+  osmfr: {
+    name: 'Open Street Map France',
+    language: 'fr',
+    source: new XYZ({
+      minZoom: 0,
+      maxZoom: 20,
+      url: 'https://{a-c}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',
+    }),
+  },
+  otm: {
+    name: 'Open Topo Map',
+    language: 'int',
+    source: new XYZ({
+      minZoom: 0,
+      maxZoom: 20,
+      url: 'https://{a-c}.tile.opentopomap.org/{z}/{x}/{y}.png',
+    }),
+  },
+  cyclosm: {
+    name: 'CyclOSM',
+    language: 'int',
+    source: new XYZ({
+      minZoom: 0,
+      maxZoom: 19,
+      url: 'https://{a-c}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png',
+    }),
+  },
+  //https://b.tile.openstreetmap.fr/openriverboatmap/20/535762/382966.png
+  openriverboatmap: {
+    name: 'Open River Boat Map',
+    language: 'int',
+    source: new XYZ({
+      minZoom: 0,
+      maxZoom: 19,
+      url: 'https://{a-c}.tile.openstreetmap.fr/openriverboatmap/{z}/{x}/{y}.png',
+    }),
+  },
+};
+
+const MapTilesProvider: Component<{}> = (props) => {
+  return <div></div>;
+};
+
+export default MapTilesProvider;

src/components/map-tile-provider/index.ts

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

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() }),
       ],