Merge pull request #13 from Bigismall/6-add-railway-map-provider

Bigismall · Oct 24, 2024 · df37a7c · df37a7c
2 parents 41bcccd + 11d19d3
commit df37a7c
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 24 deletions.
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta name="description" content="Dual map - synchronize views of different map types side by side. Compare data from different sources."/>
     <title>Dual Map</title>
     <script type="module" src="/src/main.ts"></script>
     <link rel="icon" type="image/svg+xml"

diff --git a/src/Axis.class.ts b/src/Axis.class.ts
@@ -1,7 +1,7 @@
 import { Message, MessageState } from './Message.type.ts';
 import { Observer } from './Observer.interface.ts';
-import { log } from './console.ts';
 import { HIDDEN_CLASS, KEY_AXIS } from './constants.ts';
+import { log } from './utils/console.ts';
 
 export class Axis implements Observer {
   constructor(private axis: NodeListOf<HTMLElement>) {}

diff --git a/src/Map.class.ts b/src/Map.class.ts
@@ -3,11 +3,11 @@ 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 { log } from './console.ts';
 import { HIDDEN_CLASS, KEY_IMPORT_URL, LayerName } from './constants';
 import { osmLayers } from './layers.ts';
 import { MapConfig, MapOptions } from './types';
 import { parseGoogleMapsUrl, setUrlParams } from './url.ts';
+import { log } from './utils/console.ts';
 
 abstract class MapFrame {
   public $parent: HTMLElement | null = null;
@@ -32,6 +32,13 @@ abstract class MapFrame {
     $frame.loading = 'lazy';
     $frame.classList.add('layout__frame');
     $frame.title = 'Map';
+
+    if (this.config.type === 'rail') {
+      // Very custom solution for OpenRailwayMap
+      $frame.style.marginLeft = '-300px';
+      $frame.style.width = `calc(100% + 300px)`;
+    }
+
     return $frame;
   }
 

diff --git a/src/dom.ts b/src/dom.ts
diff --git a/src/main.ts b/src/main.ts
@@ -1,62 +1,59 @@
-import { $, $$ } from './dom.ts';
+import { $, $$, hasMissingElements } from './utils/dom.ts';
 
 import 'leaflet/dist/leaflet.css';
 import 'leaflet-geosearch/dist/geosearch.css';
 
 import { DEFAULT_LAYER, GOOGLE_MAPS_API_KEY, MAX_ZOOM } from './constants.ts';
-import './style.css';
+import './styles/style.css';
 import { Axis } from './Axis.class.ts';
 import { GoogleMapsFrame, MapObserver, OpenRailwayMapFrame, OsmFrame, WikiMapiaFrame } from './Map.class.ts';
 import { Scene } from './Scene.class.ts';
-import { log } from './console.ts';
-import { MapType } from './types.ts';
+import { DOMElement, DOMElements, MapType } from './types.ts';
 import { getMapOptions, getUrlParams } from './url.ts';
 
 window.addEventListener('load', () => {
-  const $elements = new Map<string, Element | NodeListOf<HTMLElement> | null>([
+  const $elements: DOMElements = new Map<string, DOMElement>([
     ['osm', $('.js-osm')],
     ['map', $('.js-map')],
     ['axis', $$('.axis')],
     ['mapType', $$('input[name="map-type"]')],
   ]);
 
-  //TODO OPENRAILWAYMAP has padding that needs to be removed
-
-  const $missingElements = Array.from($elements.values()).filter(($element) => $element === null);
-
-  if ($missingElements.length > 0) {
+  if (hasMissingElements($elements)) {
     window.alert('Some elements are missing');
-    $missingElements.map(log);
     return;
   }
 
-  //FIXME: Use factory pattern - in issue #6
   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($elements.get('map') as HTMLDivElement, mapOptions, {
+        currentMap = new GoogleMapsFrame($mapElement, mapOptions, {
           apiKey: GOOGLE_MAPS_API_KEY,
           maxZoom: MAX_ZOOM,
           frame: true,
+          type: 'google',
         });
-
         break;
       case 'wiki':
-        currentMap = new WikiMapiaFrame($elements.get('map') as HTMLDivElement, mapOptions, {
+        currentMap = new WikiMapiaFrame($mapElement, mapOptions, {
           maxZoom: MAX_ZOOM,
           frame: true,
+          type: 'wiki',
         });
         break;
       case 'rail':
-        currentMap = new OpenRailwayMapFrame($elements.get('map') as HTMLDivElement, mapOptions, {
+        currentMap = new OpenRailwayMapFrame($mapElement, mapOptions, {
           maxZoom: MAX_ZOOM,
           frame: true,
+          type: 'rail',
         });
         break;
     }
+    // @ts-ignore
     return currentMap;
   };
 
@@ -71,6 +68,7 @@ window.addEventListener('load', () => {
     layer: urlParams?.layer ?? DEFAULT_LAYER,
     maxZoom: MAX_ZOOM,
     frame: false,
+    type: 'osm',
   });
 
   new ResizeObserver(() => {

diff --git a/src/style.css → src/styles/style.css b/src/style.css → src/styles/style.css
@@ -106,10 +106,10 @@ header {
 }
 
 .axis__vertical {
-  top: 0;
+  top: 2rem;
   left: 0;
   width: 1px;
-  height: 100vh;
+  height: calc(100vh - 2rem);
 }
 
 .axis__vertical--left {
@@ -145,6 +145,7 @@ header {
   display: none;
 }
 .map-choice input:checked + label {
+  color: var(--color--slate-50, #eff1f4);
   background-color: var(--color-red-450, #ee402e);
 }
 

diff --git a/src/types.ts b/src/types.ts
@@ -11,13 +11,17 @@ export type MapConfig = {
   layer?: LayerName;
   maxZoom: number;
   frame: boolean;
+  type: MapType;
 };
 
-export type MapType = 'wiki' | 'google' | 'rail';
+export type MapType = 'wiki' | 'google' | 'rail' | 'osm';
 
 export type UrlParams = {
   lat: number;
   lng: number;
   zoom: number;
   layer: LayerName;
 };
+
+export type DOMElement = Element | NodeListOf<HTMLElement> | null;
+export type DOMElements = Map<string, DOMElement>;
diff --git a/src/url.ts b/src/url.ts
@@ -1,6 +1,6 @@
-import { log } from './console';
 import { DEFAULT_CENTER, DEFAULT_LAYER, DEFAULT_ZOOM, type LayerName, MAX_ZOOM } from './constants';
 import { MapOptions, UrlParams } from './types.ts';
+import { log } from './utils/console.ts';
 
 export const setUrlParams = (options: MapOptions, layer: LayerName) => {
   const url = new URL(window.location.href);

diff --git a/src/console.ts → src/utils/console.ts b/src/console.ts → src/utils/console.ts
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
@@ -0,0 +1,9 @@
+import { DOMElements } from '../types.ts';
+
+export const $: typeof document.querySelector = document.querySelector.bind(document);
+export const $$: typeof document.querySelectorAll = document.querySelectorAll.bind(document);
+
+// Missing elements method
+
+export const hasMissingElements = ($elements: DOMElements): boolean =>
+  Array.from($elements.values()).filter(($element) => $element === null).length > 0;