feat init map

Author: NiclasNorin

package-lock.json

@@ -77,8 +77,8 @@
         "vite-plugin-simple-manifest": "^1.0.3"
     },
     "dependencies": {
+        "@helsingborg-stad/openstreetmap": "^0.53.4",
         "@splidejs/splide": "^4.1.4",
-        "leaflet": "^1.9.3",
         "material-symbols": "^0.34.1",
         "vite-config-factory": "^1.1.2"
     },
@@ -111,4 +111,4 @@
     "publishConfig": {
         "registry": "https://npm.pkg.github.com/"
     }
-}
+}

package.json

@@ -0,0 +1,31 @@
+import MapFactory from './mapFactory';
+
+export function initializeMaps() {
+	document.querySelectorAll('[data-js-map]').forEach((mapContainer) => {
+		const id = mapContainer.getAttribute('data-js-map');
+		const provider = mapContainer.getAttribute('data-js-map-provider');
+		const mapStyle = mapContainer.getAttribute('data-js-map-style');
+		const lat = mapContainer.getAttribute('data-js-map-lat');
+		const lng = mapContainer.getAttribute('data-js-map-lng');
+		const zoom = mapContainer.getAttribute('data-js-map-zoom');
+		const markers = mapContainer.getAttribute('data-js-map-markers');
+
+		if (!id || !provider || !lat || !lng) {
+			console.warn('Map element is missing required attributes: data-js-map and data-js-map-provider');
+			return;
+		}
+
+		const args: MapArgs = {
+			container: mapContainer as HTMLElement,
+			id: id,
+			lat: lat,
+			lng: lng,
+			style: mapStyle,
+			zoom: zoom,
+			markers: markers,
+		};
+
+		// Only provider supported for now is OpenStreetMap.
+		MapFactory.create(provider, args);
+	});
+}

source/components/map/index.ts

@@ -0,0 +1,32 @@
+class MapFactory {
+	private static providers: Record<string, any> = {};
+
+	/**
+	 * Creates a map instance for the specified provider using the provided arguments.
+	 * If the provider's factory has not been loaded yet, it dynamically imports
+	 * the module and initializes the factory before creating the map instance.
+	 *
+	 * @param provider - The name of the map provider (e.g., "openstreetmap").
+	 * @param args     - Configuration arguments required to create the map instance.
+	 * @returns A promise that resolves to the created map instance.
+	 */
+	public static async create(provider: string, args: MapArgs) {
+		const key = provider.toLowerCase();
+
+		if (!MapFactory.providers[key]) {
+			switch (key) {
+				case 'openstreetmap':
+				default: {
+					const module = await import(`./providers/openstreetmap/openstreetmapFactory`);
+
+					MapFactory.providers[key] = new module.default();
+					break;
+				}
+			}
+		}
+
+		return MapFactory.providers[key].create(args);
+	}
+}
+
+export default MapFactory;

source/components/map/script/mapFactory.ts

@@ -0,0 +1,9 @@
+type MapArgs = {
+	container: HTMLElement;
+	id: string;
+	lat: string;
+	lng: string;
+	zoom: string | null;
+	style: string | null;
+	markers: string | null;
+};

source/components/map/script/mapInterface.d.ts

@@ -0,0 +1,113 @@
+import type { CreateMarkerInterface, CreatePopupInterface, IconOptions, MarkerInterface } from '@helsingborg-stad/openstreetmap';
+import type { CreateMarker, MarkerConfig } from './openstreetmapInterface';
+
+class Marker implements CreateMarker {
+	/**
+	 * @param markerCreator - Factory used to create map marker instances.
+	 * @param popupCreator  - Factory used to create popup instances bound to markers.
+	 */
+	constructor(
+		private markerCreator: CreateMarkerInterface,
+		private popupCreator: CreatePopupInterface,
+	) {}
+
+	/**
+	 * Creates a map marker at the position defined in options. When a content
+	 * string is provided, a popup is bound to the marker and click listeners
+	 * are attached to toggle the highlighted icon state.
+	 *
+	 * @param options - Configuration for the marker's position, icon, color, and popup content.
+	 * @returns The created MarkerInterface instance.
+	 */
+	public create(options: MarkerConfig): MarkerInterface {
+		const marker = this.markerCreator.create({
+			position: { lat: options.lat, lng: options.lng },
+			...this.getIconOptions(this.getMarkerContent(options)),
+		});
+
+		if (options.content) {
+			const popup = this.popupCreator.create();
+			popup.bindTo(marker);
+			popup.setContent(options.content);
+
+			this.addClickListener(marker, options);
+		}
+
+		return marker;
+	}
+
+	/**
+	 * Attaches popupopen and popupclose event listeners to the marker so that
+	 * its icon switches to the highlighted state while the popup is open and
+	 * reverts to the default state when the popup closes.
+	 *
+	 * @param marker  - The marker to attach listeners to.
+	 * @param options - Marker configuration used to regenerate the icon HTML.
+	 */
+	private addClickListener(marker: MarkerInterface, options: MarkerConfig) {
+		marker.addListener('popupopen', () => {
+			marker.setIcon(this.getIconOptions(this.getHighlightedMarkerContent(options)));
+		});
+
+		marker.addListener('popupclose', () => {
+			marker.setIcon(this.getIconOptions(this.getMarkerContent(options)));
+		});
+	}
+
+	/**
+	 * Builds an IconOptions object with a fixed 32×32 size and a centred
+	 * horizontal anchor at [16, 2].
+	 *
+	 * @param html - The HTML string to use as the icon's visual content.
+	 * @returns An IconOptions object ready to pass to the marker creator.
+	 */
+	private getIconOptions(html: string): IconOptions {
+		return {
+			html: html,
+			iconSize: [32, 32],
+			iconAnchor: [16, 2],
+		};
+	}
+
+	/**
+	 * Generates the HTML string for the highlighted (active/open-popup) marker
+	 * icon, rendered as a white circle with a coloured border and icon.
+	 *
+	 * @param options - Marker configuration supplying colour and icon values.
+	 * @returns An HTML string representing the highlighted marker icon.
+	 */
+	private getHighlightedMarkerContent(options: MarkerConfig): string {
+		const [color, icon] = this.getColorAndIcon(options);
+
+		return `<span style="background-color: white; border: solid 2px ${color}; color: ${color}; font-size: 20px; padding: 4px; border-radius: 50%;" data-material-symbol="${icon}" class="interactive-map__highlighted-marker material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined material-symbols--filled"></span>`;
+	}
+
+	/**
+	 * Generates the HTML string for the default marker icon, rendered as a
+	 * solid coloured circle with a white icon.
+	 *
+	 * @param options - Marker configuration supplying colour and icon values.
+	 * @returns An HTML string representing the default marker icon.
+	 */
+	private getMarkerContent(options: MarkerConfig): string {
+		const [color, icon] = this.getColorAndIcon(options);
+
+		return `<span style="background-color: ${color}; border: solid 2px ${color}; color: white; font-size: 20px; padding: 4px; border-radius: 50%;" data-material-symbol="${icon}" class="material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined material-symbols--filled"></span>`;
+	}
+
+	/**
+	 * Extracts the colour and icon name from the marker options, falling back
+	 * to the default colour (#E04A39) and icon (location_on) when not provided.
+	 *
+	 * @param options - Marker configuration that may contain colour and icon overrides.
+	 * @returns A tuple of [color, icon] strings.
+	 */
+	private getColorAndIcon(options: MarkerConfig): [string, string] {
+		const color = options.color ?? '#E04A39';
+		const icon = options.icon ?? 'location_on';
+
+		return [color, icon];
+	}
+}
+
+export default Marker;

source/components/map/script/providers/openstreetmap/marker.ts

@@ -0,0 +1,40 @@
+import { CreateAttribution, CreateMap, CreateMarker, CreatePopup, CreateTileLayer, type MapInterface, TilesHelper } from '@helsingborg-stad/openstreetmap';
+import Marker from './marker';
+import type { OpenstreetmapArgs } from './openstreetmapInterface';
+
+class Openstreetmap {
+	private map!: MapInterface;
+
+	/**
+	 * Creates an Openstreetmap instance and initializes the map.
+	 *
+	 * @param openstreetmapArgs - Verified configuration for the map.
+	 */
+	constructor(private openstreetmapArgs: OpenstreetmapArgs) {
+		this.createMap();
+	}
+
+	/**
+	 * Creates the map instance, attaches the tile layer, attribution, and
+	 * renders all configured markers onto the map.
+	 */
+	private createMap() {
+		this.map = new CreateMap({
+			id: this.openstreetmapArgs.id,
+			center: { lat: this.openstreetmapArgs.lat, lng: this.openstreetmapArgs.lng },
+			zoom: this.openstreetmapArgs.zoom,
+		}).create();
+
+		const { url, attribution } = new TilesHelper().getDefaultTiles(this.openstreetmapArgs.style);
+		const markerCreator = new Marker(new CreateMarker(), new CreatePopup());
+		new CreateTileLayer().create().setUrl(url).addTo(this.map);
+		new CreateAttribution().create().setPrefix(attribution).addTo(this.map);
+
+		for (const markerConfig of this.openstreetmapArgs.markers) {
+			const marker = markerCreator.create(markerConfig);
+			marker.addTo(this.map);
+		}
+	}
+}
+
+export default Openstreetmap;