Merge pull request #4 from helsingborg-stad/refactor/options

refactor: options
helsingborg-stad · Feb 18, 2025 · c8fe7f7 · c8fe7f7
2 parents b23dc69 + e20cffe
commit c8fe7f7
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 80 deletions.
diff --git a/js/map.ts b/js/map.ts
@@ -3,31 +3,31 @@ import CreateMap from "./setupMap/createMap";
 import MapInitializer from "./setupMap/mapInitializer";
 import SetupTiles from "./setupMap/setupTiles";
 import { ConfigInterface } from './setupMap/config/configInterface';
+import { ConfigOptions } from './types';
 import { MapInterface } from './mapInterface';
 
 class Map implements MapInterface {
     private map: LeafletMap;
+    private options: ConfigOptions;
 
-    constructor(private config: ConfigInterface) {
-        this.map = new CreateMap(this.config.getId(), {
-            scrollWheelZoom: false,
-            keyboard: false,
-            attributionControl: false,
-        }).create();
+    constructor(config: ConfigInterface) {
+        this.options = config.getConfig();
+
+        this.map = new CreateMap(this.options).create();
 
         new MapInitializer(
-            this.config,
+            this.options,
             this.map,
-            new SetupTiles(this.map, this.config)
+            new SetupTiles(this.map, this.options)
         ).initialize();
     }
 
     public getMap(): LeafletMap {
         return this.map;
     }
 
-    public getConfig(): ConfigInterface {
-        return this.config;
+    public getOptions(): ConfigOptions {
+        return this.options;
     }
 }
 

diff --git a/js/mapInterface.ts b/js/mapInterface.ts
@@ -1,7 +1,7 @@
-import { ConfigInterface } from './setupMap/config/configInterface';
 import { Map as LeafletMap } from 'leaflet';
+import { ConfigOptions } from './types';
 
 export interface MapInterface {
     getMap(): LeafletMap;
-    getConfig(): ConfigInterface;
+    getOptions(): ConfigOptions;
 }
diff --git a/js/setupMap/config/config.ts b/js/setupMap/config/config.ts
@@ -1,37 +1,35 @@
-import { LatLngObject } from "../../types";
-import { ConfigInterface, Options, AttributionPosition, MapStyle } from "./configInterface";
+import { PartialConfigOptions, ConfigOptions } from "../../types";
+import { ConfigInterface } from "./configInterface";
 
 export class Config implements ConfigInterface {
-    constructor(private options: Options) {
-    }
-
-    public getId(): string {
-        return this.options.id;
-    }
-
-    public getMapStyle(): MapStyle {
-        return this.options.mapStyle ?? 'default';
-    }
-
-    public getStartPosition(): LatLngObject {
-        return this.options.startPosition && this.options.startPosition.lat && this.options.startPosition.lng ? 
-            this.options.startPosition : 
-            { lat: 59.32932, lng: 18.06858 };
-    }
-
-    public getInitialZoom(): number {
-        return this.options.initialZoom ?? 16;
-    }
-
-    public getMaxZoom(): number {
-        return this.options.maxZoom ?? 19;
-    }
-
-    public getMinZoom(): number {
-        return this.options.minZoom ?? 0;
-    }
-
-    public getAttributionPosition(): AttributionPosition {
-        return this.options.attributionPosition ?? 'bottomleft';
+    private options: ConfigOptions;
+    constructor(options: PartialConfigOptions) {
+        this.options = this.getOptions(options);
+    }
+
+    private getOptions(options: PartialConfigOptions): ConfigOptions {
+        return {
+            ...this.getDefaultOptions(),
+            ...options
+        }
+    }
+
+    private getDefaultOptions(): ConfigOptions {
+        return {
+            id: '',
+            mapStyle: 'default',
+            keyboard: false,
+            attributionPosition: 'bottomleft',
+            center: { lat: 59.32932, lng: 18.06858 },
+            zoom: 16,
+            maxZoom: 19,
+            minZoom: 0,
+            zoomControl: false,
+            scrollWheelZoom: false
+        }
+    }
+
+    public getConfig(): ConfigOptions {
+        return this.options;
     }
 }
diff --git a/js/setupMap/config/configInterface.ts b/js/setupMap/config/configInterface.ts
@@ -1,24 +1,5 @@
-import { LatLngObject, Nullable } from '../../types';
-
-export type MapStyle = "dark"|"pale"|"default"|"color";
-export type AttributionPosition = "topleft"|"topright"|"bottomleft"|"bottomright";
-
-export type Options = {
-    id: string;
-    mapStyle?: Nullable<MapStyle>;
-    startPosition?: Nullable<LatLngObject>;
-    initialZoom?: Nullable<number>;
-    maxZoom?: Nullable<number>
-    minZoom?: Nullable<number>
-    attributionPosition?: Nullable<AttributionPosition>
-}
+import { LatLngObject, MapStyle, AttributionPosition, ConfigOptions } from '../../types';
 
 export interface ConfigInterface {
-    getId(): string;
-    getMapStyle(): MapStyle;
-    getStartPosition(): LatLngObject;
-    getInitialZoom(): number;
-    getMaxZoom(): number;
-    getMinZoom(): number;
-    getAttributionPosition(): AttributionPosition;
+    getConfig(): ConfigOptions;
 }
diff --git a/js/setupMap/createMap.ts b/js/setupMap/createMap.ts
@@ -1,14 +1,19 @@
-import L, { Map as LeafletMap, MapOptions } from 'leaflet';
+import L, { Map as LeafletMap } from 'leaflet';
 import { CreateMapInterface } from './createMapInterface';
+import { ConfigOptions } from '../types';
 
 class CreateMap implements CreateMapInterface {
-    constructor(private id: string, private options: MapOptions = {}) {
+    constructor(private options: ConfigOptions) {
     }
 
     public create(): LeafletMap {  
         return L.map(
-            this.id,
-            this.options
+            this.options.id,
+            {
+                scrollWheelZoom: this.options.scrollWheelZoom,
+                keyboard: this.options.keyboard,
+                attributionControl: false
+            }
         );
     }
 }

diff --git a/js/setupMap/mapInitializer.ts b/js/setupMap/mapInitializer.ts
@@ -1,11 +1,12 @@
 import { Map as LeafletMap } from 'leaflet';
-import { ConfigInterface } from './config/configInterface';
 import { MapInitializerInterface } from './mapInitializerInterface';
 import { SetupTilesInterface } from './setupTilesInterface';
+import { ConfigOptions } from '../types';
+
 
 class MapInitializer implements MapInitializerInterface {
     constructor(
-        private config: ConfigInterface,
+        private config: ConfigOptions,
         private map: LeafletMap,
         private setupTiles: SetupTilesInterface,
     ) {
@@ -14,8 +15,8 @@ class MapInitializer implements MapInitializerInterface {
 
     public initialize(): void {
         this.map.setView(
-            [this.config.getStartPosition().lat, this.config.getStartPosition().lng],
-            this.config.getInitialZoom()
+            [this.config.center.lat, this.config.center.lng],
+            this.config.zoom
         );
 
         this.setupTiles.set();

diff --git a/js/setupMap/setupTiles.ts b/js/setupMap/setupTiles.ts
@@ -1,30 +1,30 @@
 import L, { ControlPosition, Map as LeafletMap } from 'leaflet';
-import { ConfigInterface } from './config/configInterface';
 import { Tiles } from './setupTilesInterface';
+import { ConfigOptions } from '../types';
 
 class SetupTiles {
     constructor(
         private map: LeafletMap,
-        private config: ConfigInterface
+        private config: ConfigOptions
     ) {
     }
 
     public set(): void {
         const tileLayer = this.getTileLayer();
         L.tileLayer(tileLayer.url, {
-            maxZoom: this.config.getMaxZoom(),
-            minZoom: this.config.getMinZoom(),
+            maxZoom: this.config.maxZoom,
+            minZoom: this.config.minZoom,
         }).addTo(this.map);
 
         L.control.attribution({
-            position: this.config.getAttributionPosition() as ControlPosition,
+            position: this.config.attributionPosition as ControlPosition,
         }).addAttribution(
             tileLayer.attribution
         ).setPrefix(false).addTo(this.map);
     }
 
     private getTileLayer(): Tiles {
-        switch (this.config.getMapStyle()) {
+        switch (this.config.mapStyle) {
             case 'dark':
                 return {
                     attribution:

diff --git a/js/types.ts b/js/types.ts
@@ -1,3 +1,21 @@
+export type MapStyle = "dark"|"pale"|"default"|"color";
+export type AttributionPosition = "topleft"|"topright"|"bottomleft"|"bottomright";
+
+export type ConfigOptions = {
+    id: string;
+    mapStyle: MapStyle;
+    keyboard: boolean;
+    attributionPosition: AttributionPosition;
+    center: LatLngObject;
+    zoom: number;
+    maxZoom: number;
+    minZoom: number;
+    zoomControl: boolean;
+    scrollWheelZoom: boolean;
+}
+
+export type PartialConfigOptions = { id: string } & Partial<Omit<ConfigOptions, 'id'>>;
+
 export type LatLngObject = {
     lat: number,
     lng: number