Merge pull request #17 from Bigismall/11-refactor-map-creation

Bigismall · Oct 26, 2024 · 6341ee9 · 6341ee9
2 parents 82dad8f + e86618f
commit 6341ee9
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 72 deletions.
diff --git a/src/Map.class.ts b/src/Map.class.ts
@@ -3,10 +3,10 @@ import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch';
 import { Message, MessageState } from './Message.type.ts';
 import { Observer } from './Observer.interface.ts';
 import { Publisher } from './Publisher.interface.ts';
-import { DEFAULT_MAP_TYPE, KEY_IMPORT_URL } from './constants';
+import { DEFAULT_MAP_TYPE, GOOGLE_MAPS_API_KEY, KEY_IMPORT_URL, MAX_ZOOM } from './constants';
 import { osmLayers } from './layers.ts';
-import { LayerName, MapConfig, MapOptions } from './types';
-import { getUrlParams, parseGoogleMapsUrl, setUrlParams } from './url.ts';
+import { LayerName, MapConfig, MapOptions, MapType } from './types';
+import { getMapOptions, getUrlParams, parseGoogleMapsUrl, setUrlParams } from './url.ts';
 import { log } from './utils/console.ts';
 
 abstract class MapFrame {
@@ -200,3 +200,25 @@ export class OsmFrame extends MapPublisherObserver {
     this.updatePosition();
   };
 }
+
+export class MapFactory {
+  public static create = (type: MapType, $mapElement: HTMLDivElement): MapObserver => {
+    const mapOptions = getMapOptions(getUrlParams());
+    const mapConfig = {
+      frame: true,
+      maxZoom: MAX_ZOOM,
+      type,
+    };
+
+    switch (type) {
+      case 'google':
+        return new GoogleMapsFrame($mapElement, mapOptions, { ...mapConfig, apiKey: GOOGLE_MAPS_API_KEY });
+      case 'wiki':
+        return new WikiMapiaFrame($mapElement, mapOptions, mapConfig);
+      case 'rail':
+        return new OpenRailwayMapFrame($mapElement, mapOptions, mapConfig);
+    }
+    // @ts-ignore
+    return null;
+  };
+}
diff --git a/src/main.ts b/src/main.ts
@@ -3,10 +3,10 @@ import { $, $$, hasMissingElements } from './utils/dom.ts';
 import 'leaflet/dist/leaflet.css';
 import 'leaflet-geosearch/dist/geosearch.css';
 
-import { DEFAULT_LAYER, DEFAULT_MAP_TYPE, GOOGLE_MAPS_API_KEY, MAX_ZOOM } from './constants.ts';
+import { MAX_ZOOM } from './constants.ts';
 import './styles/style.css';
 import { Axis } from './Axis.class.ts';
-import { GoogleMapsFrame, MapObserver, OpenRailwayMapFrame, OsmFrame, WikiMapiaFrame } from './Map.class.ts';
+import { MapFactory, OsmFrame } from './Map.class.ts';
 import { Scene } from './Scene.class.ts';
 import { DOMElement, DOMElements, MapType } from './types.ts';
 import { getMapOptions, getUrlParams, setUrlParams } from './url.ts';
@@ -24,49 +24,15 @@ window.addEventListener('load', () => {
     return;
   }
 
-  const getActivateMap = (type: MapType) => {
-    let currentMap: MapObserver;
-    const mapOptions = getMapOptions(getUrlParams());
-    const $mapElement = $elements.get('map') as HTMLDivElement;
-
-    switch (type) {
-      case 'google':
-        currentMap = new GoogleMapsFrame($mapElement, mapOptions, {
-          apiKey: GOOGLE_MAPS_API_KEY,
-          maxZoom: MAX_ZOOM,
-          frame: true,
-          type,
-        });
-        break;
-      case 'wiki':
-        currentMap = new WikiMapiaFrame($mapElement, mapOptions, {
-          maxZoom: MAX_ZOOM,
-          frame: true,
-          type,
-        });
-        break;
-      case 'rail':
-        currentMap = new OpenRailwayMapFrame($mapElement, mapOptions, {
-          maxZoom: MAX_ZOOM,
-          frame: true,
-          type,
-        });
-        break;
-    }
-    // @ts-ignore
-    return currentMap;
-  };
-
   const urlParams = getUrlParams();
-  const mapType = urlParams?.type ?? DEFAULT_MAP_TYPE;
   const mapOptions = getMapOptions(urlParams);
-
+  const mapType = urlParams.type;
   const scene = new Scene();
   const axis = new Axis($elements.get('axis') as NodeListOf<HTMLElement>);
-  let activeMap = getActivateMap(mapType);
+  let activeMap = MapFactory.create(mapType, $elements.get('map') as HTMLDivElement);
 
   const osm = new OsmFrame($elements.get('osm') as HTMLIFrameElement, mapOptions, {
-    layer: urlParams?.layer ?? DEFAULT_LAYER,
+    layer: urlParams.layer,
     maxZoom: MAX_ZOOM,
     frame: false,
     type: 'osm',
@@ -85,18 +51,15 @@ window.addEventListener('load', () => {
 
       osm.unsubscribe(activeMap);
       activeMap.destroy();
-      activeMap = getActivateMap(layer as MapType);
+      activeMap = MapFactory.create(layer as MapType, $elements.get('map') as HTMLDivElement);
       osm.subscribe(activeMap);
       activeMap.render();
-
       setUrlParams(activeMap.mapOptions, osm.getLayer(), layer as MapType);
     });
   });
 
   osm.subscribe(activeMap);
-
   scene.subscribe(osm);
   scene.subscribe(axis);
-
   activeMap.render();
 });
diff --git a/src/url.ts b/src/url.ts
@@ -13,38 +13,28 @@ export const setUrlParams = (options: MapOptions, layer: LayerName, type: MapTyp
   window.history.pushState({}, '', url.toString());
 };
 
-export const getUrlParams = (): UrlParams | null => {
+export const getUrlParams = (): UrlParams => {
   const urlParams = new URLSearchParams(window.location.search);
-  const lat = urlParams.get('lat');
-  const lng = urlParams.get('lng');
-  const zoom = Number.parseFloat(urlParams.get('z') ?? DEFAULT_ZOOM.toString());
+  const lat = Number.parseFloat(urlParams.get('lat') ?? DEFAULT_CENTER[0].toString());
+  const lng = Number.parseFloat(urlParams.get('lng') ?? DEFAULT_CENTER[1].toString());
+  const zoom = Math.min(Number.parseFloat(urlParams.get('z') ?? DEFAULT_ZOOM.toString()), MAX_ZOOM);
   const layer = isLayerName(urlParams.get('l') ?? '') ? (urlParams.get('l') as LayerName) : DEFAULT_LAYER;
   const type = isMapType(urlParams.get('t') ?? '') ? (urlParams.get('t') as MapType) : DEFAULT_MAP_TYPE;
 
-  if (lat && lng) {
-    return {
-      lat: Number.parseFloat(lat),
-      lng: Number.parseFloat(lng),
-      zoom: zoom > MAX_ZOOM ? MAX_ZOOM : zoom,
-      layer: layer,
-      type: type,
-    };
-  }
-  return null;
+  return {
+    lat,
+    lng,
+    zoom,
+    layer,
+    type,
+  };
 };
 
-export const getMapOptions = (urlParams: UrlParams | null): MapOptions =>
-  urlParams
-    ? {
-        zoom: urlParams.zoom,
-        lat: urlParams.lat,
-        lng: urlParams.lng,
-      }
-    : {
-        zoom: DEFAULT_ZOOM,
-        lat: DEFAULT_CENTER[0],
-        lng: DEFAULT_CENTER[1],
-      };
+export const getMapOptions = (urlParams: UrlParams): MapOptions => ({
+  zoom: urlParams.zoom,
+  lat: urlParams.lat,
+  lng: urlParams.lng,
+});
 
 // https://www.google.com/maps/@54.3854942,18.3370827,15.95z?entry=ttu
 export const parseGoogleMapsUrl = (url: string): MapOptions => {