Merge pull request #54 from Bigismall:51-add-wide-map-option-to-url-p…

…arams

feat: add width parameter to URL handling and update map layout accordingly

src/Providers.ts

@@ -1,7 +1,7 @@
 import L from 'leaflet';
 import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch';
 import { MapObserver, MapPublisherObserver } from './Map.class.ts';
-import { DEFAULT_MAP_TYPE, KEY_IMPORT_URL } from './constants.ts';
+import { KEY_IMPORT_URL } from './constants.ts';
 import { osmLayers } from './layers.ts';
 import { LayerName, MapConfig, MapOptions, Message, MessageState } from './types.ts';
 import { getUrlParams, parseGoogleMapsUrl, setUrlParams } from './url.ts';
@@ -78,10 +78,9 @@ export class OsmFrame extends MapPublisherObserver {
       state: MessageState.MoveMap,
       data: this.getMapOptions(),
     });
-    const params = getUrlParams();
-    const type = params?.type ?? DEFAULT_MAP_TYPE;
+    const { type, width } = getUrlParams();
 
-    setUrlParams(this.getMapOptions(), this.currentLayer, type);
+    setUrlParams(this.getMapOptions(), this.currentLayer, type, width);
   };
 
   update(publication: Message) {
@@ -118,8 +117,8 @@ export class OsmFrame extends MapPublisherObserver {
 
     this.currentLayer = layer;
 
-    const { type } = getUrlParams();
-    setUrlParams(this.getMapOptions(), layer, type);
+    const { type, width } = getUrlParams();
+    setUrlParams(this.getMapOptions(), layer, type, width);
   }
 
   getMapOptions = (): MapOptions => ({

src/main.ts

@@ -33,6 +33,7 @@ window.addEventListener('load', () => {
   const urlParams = getUrlParams();
   const mapOptions = getMapOptions(urlParams);
   const mapType = urlParams.type;
+  const mapWidth = urlParams.width;
   const scene = new Scene();
   const axis = new Axis($elements.get('axis') as NodeListOf<HTMLElement>);
   let activeMap = MapFactory.create(mapType, $elements.get('map') as HTMLDivElement);
@@ -44,6 +45,9 @@ window.addEventListener('load', () => {
     type: 'osm',
   });
 
+  const $layout = $elements.get('layout') as HTMLElement;
+  $layout.classList.add(mapWidth === 'w50' ? 'w50' : 'w66');
+
   new ResizeObserver(() => {
     osm.getInstance().invalidateSize();
   }).observe(osm.$element);
@@ -56,7 +60,7 @@ window.addEventListener('load', () => {
     activeMap = MapFactory.create(mapType as MapType, $elements.get('map') as HTMLDivElement);
     osm.subscribe(activeMap);
     activeMap.render();
-    setUrlParams(activeMap.mapOptions, osm.getLayer(), mapType as MapType);
+    setUrlParams(activeMap.mapOptions, osm.getLayer(), mapType as MapType, mapWidth);
   });
 
   new RadioGroupClass($elements.get('layerTypeNav') as HTMLElement, urlParams.layer, (event) => {
@@ -67,11 +71,12 @@ window.addEventListener('load', () => {
     }
   });
 
-  new RadioGroupClass($elements.get('proportionNav') as HTMLElement, 'w50', (event) => {
+  new RadioGroupClass($elements.get('proportionNav') as HTMLElement, mapWidth, (event) => {
     const proportion = (event.target as HTMLInputElement).value;
     const $layout = $elements.get('layout') as HTMLElement;
     $layout.classList.remove('w50', 'w66');
     $layout.classList.add(proportion);
+    setUrlParams(activeMap.mapOptions, osm.getLayer(), mapType, proportion);
   });
 
   osm.subscribe(activeMap);

src/types.ts

@@ -28,6 +28,7 @@ export type UrlParams = {
   zoom: number;
   layer: LayerName;
   type: MapType;
+  width: string;
 };
 
 export enum MessageState {

src/url.ts

@@ -2,14 +2,14 @@ import { DEFAULT_CENTER, DEFAULT_LAYER, DEFAULT_MAP_TYPE, DEFAULT_ZOOM, MAX_ZOOM
 import { LayerName, MapOptions, MapType, UrlParams, isLayerName, isMapType } from './types.ts';
 import { log } from './utils/console.ts';
 
-export const setUrlParams = (options: MapOptions, layer: LayerName, type: MapType) => {
+export const setUrlParams = (options: MapOptions, layer: LayerName, type: MapType, width: string) => {
   const url = new URL(window.location.href);
   url.searchParams.set('lat', options.lat.toString().slice(0, 12));
   url.searchParams.set('lng', options.lng.toString().slice(0, 12));
   url.searchParams.set('z', options.zoom.toString());
   url.searchParams.set('l', layer);
   url.searchParams.set('t', type);
-
+  url.searchParams.set('w', width);
   window.history.pushState({}, '', url.toString());
 };
 
@@ -20,13 +20,15 @@ export const getUrlParams = (): UrlParams => {
   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;
+  const width = urlParams.get('w') ?? 'w50';
 
   return {
     lat,
     lng,
     zoom,
     layer,
     type,
+    width,
   };
 };