(Re)Implementing the map chooser.

src/components/map/Map.tsx

@@ -23,7 +23,7 @@ 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';
+import MapTileProvider, { mapTileProviders } from '../map-tile-provider';
 
 const [getState, setState] = createSignal({
   lon: 0,
@@ -44,14 +44,10 @@ const Map: Component = () => {
 
   createEffect(() => {
     console.log({
-      caller: 'Map',
-      params: JSON.stringify({
-        provider: params.provider,
-        lon: params.lon,
-        lat: params.lat,
-        rotation: params.rotation,
-        zoom: params.zoom,
-      }),
+      caller: 'Map / setState',
+      params: {
+        ...params,
+      },
     });
     setState({
       provider: params.provider,
@@ -61,6 +57,14 @@ const Map: Component = () => {
       zoom: +params.zoom,
     });
     const map = getMap();
+
+    const layers = map?.getLayers();
+    const tileLayer = layers?.item(0) as TileLayer<any> | undefined;
+    if (tileLayer?.get('provider') !== params.provider) {
+      tileLayer?.set('provider', params.provider, true);
+      tileLayer?.setSource(mapTileProviders[params.provider].source);
+    }
+
     const view = map?.getView();
     view?.animate({
       center: [getState().lon, getState().lat],
@@ -128,61 +132,30 @@ const Map: Component = () => {
       console.log({
         caller: 'Map / changeListener',
         event,
-        params,
+        params: {
+          ...params,
+        },
         map,
       });
     };
 
+    const tileLayer = new TileLayer({
+      source: mapTileProviders[params.provider].source,
+    });
+    tileLayer.set('provider', params.provider, true);
+
     const olMap = new OlMap({
       view: new View({
         center: [+getState().lon, +getState().lat],
         zoom: +getState().zoom,
         rotation: +getState().rotation,
       }),
-      layers: [
-        new TileLayer({
-          source: mapTileProviders[params.provider].source,
-        }),
-        new VectorLayer({ source: new VectorSource() }),
-      ],
+      layers: [tileLayer, new VectorLayer({ source: new VectorSource() })],
       target: target,
       controls: new Collection<Control>([
         new Attribution({ collapsible: true }),
         new Rotate(),
         new ScaleLine({ bar: true }),
-        // // @ts-ignore
-        // new Control({
-        //   // @ts-ignore
-        //   element: (
-        //     <div>
-        //       <GetLocation />
-        //     </div>
-        //   ),
-        // }),
-        // new Control({
-        //   // @ts-ignore
-        //   element: (
-        //     <div>
-        //       <Back />
-        //     </div>
-        //   ),
-        // }),
-        // new Control({
-        //   // @ts-ignore
-        //   element: (
-        //     <div>
-        //       <Forward />
-        //     </div>
-        //   ),
-        // }),
-        // new Control({
-        //   // @ts-ignore
-        //   element: (
-        //     <div>
-        //       <GpxImport />
-        //     </div>
-        //   ),
-        // }),
       ]),
     });
     olMap.on(['moveend'], changeListener);
@@ -197,6 +170,7 @@ const Map: Component = () => {
       <Forward />
       <Back />
       <GpxImport />
+      <MapTileProvider />
       <AllGpxes map={getMap} />
     </div>
   );