Basic mechanism to support different tile providers.

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