Dataport · dopenguin · Mar 3, 2026 · Mar 3, 2026 · Mar 3, 2026
@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<title>Generic POLAR client</title>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+		<meta name="viewport"
+			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate, max-age=0" />
+		<link rel="stylesheet" href="@polar/polar/polar.css" />
+		<script type="module" defer src="index.js"></script>
+		<style>
+			/* style just for example page, not directly related to POLAR */
+			:root {
+				--not-quite-white: #f2f3f4;
+				--map-height: 600px;
+			}
+
+			body {
+				font-family: sans-serif;
+				padding: 2em;
+				background: var(--not-quite-white);
+				color: var(--eigengrau);
+			}
+
+			h1 {
+				margin-bottom: 0.5em;
+			}
+
+			h2 {
+				margin: 0.5em 0;
+			}
+
+			p {
+				margin: 0.2em 0;
+			}
+
+			#language-switcher {
+				outline: solid black;
+			}
+
+			.polarstern {
+				width: 90vw;
+				max-width: 100%;
+				height: var(--map-height);
+				margin-top: 10px;
+				margin-bottom: 10px;
+			}
+		</style>
+	</head>
+
+	<body>
+		<h1>POLAR map client</h1>
+		<label id="language-switcher-label">
+			Language in map client:
+			<select id="language-switcher">
+				<option value="en">English</option>
+				<option value="de">German</option>
+			</select>
+		</label>
+		<button id="color-scheme-switcher">Switch to dark mode</button>
+		<h2>Demo application</h2>
+		<div style="display: flex; justify-content: center;">
+			<div id="polarstern" class="polarstern"></div>
+		</div>
+	</body>
+</html>
@@ -0,0 +1,176 @@
+import { updateState } from '@polar/polar'
+import { createMap } from '@polar/polar/client'
+import { toMerged } from 'es-toolkit'
+
+const basemapId = '23420'
+const basemapGreyId = '23421'
+const reports = '6059'
+const hamburgBorder = '1693'
+
+let colorScheme = 'light'
+
+// arbitrary condition for testing
+const isEvenId = (mmlid) => Number(mmlid.slice(-1)) % 2 === 0
+
+// NOTE: This function is only usable if the layer is clustered
+const isReportSelectable = (feature) =>
+	feature
+		.get('features')
+		.reduce(
+			(accumulator, current) => isEvenId(current.get('mmlid')) || accumulator,
+			false
+		)
+
+const map = await createMap(
+	'polarstern',
+	'https://geoportal-hamburg.de/lgv-config/services-internet.json',
+	{
+		colorScheme,
+		startCenter: [565874, 5934140],
+		layers: [
+			{
+				id: basemapId,
+				visibility: true,
+				type: 'background',
+				name: 'Basemap.de (Farbe)',
+			},
+			{
+				id: basemapGreyId,
+				type: 'background',
+				name: 'Basemap.de (Grau)',
+				maxZoom: 6,
+			},
+			{
+				id: hamburgBorder,
+				visibility: true,
+				hideInMenu: true,
+				type: 'mask',
+				name: 'Stadtgrenze Hamburg',
+			},
+			{
+				id: reports,
+				type: 'mask',
+				name: 'Anliegen (MML)',
+				visibility: false,
+			},
+		],
+		layout: 'nineRegions',
+		checkServiceAvailability: true,
+		markers: {
+			layers: [
+				{
+					id: reports,
+					defaultStyle: {
+						stroke: '#FFFFFF',
+						fill: '#005CA9',
+					},
+					hoverStyle: {
+						stroke: '#46688E',
+						fill: '#8BA1B8',
+					},
+					selectionStyle: {
+						stroke: '#FFFFFF',
+						fill: '#E10019',
+					},
+					unselectableStyle: {
+						stroke: '#FFFFFF',
+						fill: '#333333',
+					},
+					isSelectable: isReportSelectable,
+				},
+			],
+			clusterClickZoom: true,
+		},
+		scale: {
+			showScaleSwitcher: true,
+		},
+		addressSearch: {
+			searchMethods: [
+				{
+					queryParameters: {
+						searchStreets: true,
+						searchHouseNumbers: true,
+					},
+					type: 'mpapi',
+					url: 'https://geodienste.hamburg.de/HH_WFS_GAGES?service=WFS&request=GetFeature&version=2.0.0',
+				},
+			],
+			minLength: 3,
+			waitMs: 300,
+			focusAfterSearch: true,
+			groupProperties: {
+				defaultGroup: {
+					limitResults: 5,
+				},
+			},
+		},
+		pins: {
+			coordinateSources: [{ plugin: 'addressSearch', key: 'chosenAddress' }],
+			boundary: {
+				layerId: hamburgBorder,
+			},
+			movable: 'drag',
+			style: {
+				fill: '#FF0019',
+			},
+			toZoomLevel: 7,
+		},
+		reverseGeocoder: {
+			url: 'https://geodienste.hamburg.de/HH_WPS',
+			coordinateSources: [
+				{
+					plugin: 'pins',
+					key: 'coordinate',
+				},
+			],
+			addressTarget: {
+				plugin: 'addressSearch',
+				key: 'selectResult',
+			},
+			zoomTo: 7,
+		},
+		geoLocation: {
+			checkLocationInitially: false,
+			keepCentered: false,
+			showTooltip: true,
+			zoomLevel: 7,
+		},
+	},
+	[
+		'addressSearch',
+		'fullscreen',
+		'geoLocation',
+		'iconMenu',
+		'layerChooser',
+		'loadingIndicator',
+		'pins',
+		'reverseGeocoder',
+		'scale',
+		'toast',
+	],
+	(serviceRegister) =>
+		serviceRegister.map((entry) =>
+			entry.id === reports ? toMerged(entry, { clusterDistance: 20 }) : entry
+		)
+)
+
+/* simple language switcher attached for demo purposes;
+ * language switching is considered a global concern and
+ * should be handled by the leading application */
+document
+	.getElementById('language-switcher')
+	?.addEventListener('change', (event) => {
+		const target = event.target
+		const { value } = target
+		updateState(map, 'core', 'language', value)
+		target[0].innerHTML = value === 'en' ? 'English' : 'Englisch'
+		target[1].innerHTML = value === 'en' ? 'German' : 'Deutsch'
+	})
+
+document
+	.getElementById('color-scheme-switcher')
+	?.addEventListener('click', ({ target }) => {
+		target.innerHTML = `Switch to ${colorScheme} mode`
+		colorScheme = colorScheme === 'light' ? 'dark' : 'light'
+		updateState(map, 'core', 'colorScheme', colorScheme)
+	})
@@ -0,0 +1,23 @@
+{
+	"extends": [
+		"@vue/tsconfig/tsconfig.dom.json",
+		"@vue/tsconfig/tsconfig.lib.json",
+		"../../tsconfig.settings.json"
+	],
+	"compilerOptions": {
+		"types": [
+			"vitest/importMeta",
+			"vitest/jsdom",
+			"../../src/@types/vite-env.d.ts",
+			"../../src/@types/i18next.d.ts",
+			"../../src/@types/pinia.d.ts",
+			"../../src/@types/shims-masterportalapi.d.ts",
+			"../../src/@types/virtual-kern-extra-icons.d.ts"
+		],
+		"lib": ["ESNext", "DOM", "DOM.Iterable"],
+		"paths": {
+			"@polar/polar": ["../../src/core/index.ts"],
+			"@polar/polar/client": ["../../src/client.ts"]
+		}
+	}
+}
@@ -92,7 +92,7 @@
 		colorScheme,
 		startCenter: [565874, 5934140],
 		layers: [
 			// TODO: Add internalization to snowbox
 			{
 				id: basemapId,
 				visibility: true,
@@ -204,6 +204,7 @@
 	services
 )
 
+const additionalMaps = []
 document.getElementById('secondMap').addEventListener('click', async () => {
 	const secondMap = createMapElement(
 		{
@@ -227,9 +228,14 @@
 			layoutTag: 'TOP_RIGHT',
 		})
 	)
+	additionalMaps.push(secondMap)
 })
 document.getElementById('secondMapClean').addEventListener('click', () => {
-	document.getElementById('secondMapContainer').innerText = ''
+	additionalMaps.forEach((map, i) => {
+		map.remove()
+		delete additionalMaps[i]
+	})
+	additionalMaps.length = 0
 })
 
 addPlugin(
@@ -336,7 +342,7 @@
 			},
 		],
 		menus: [
 			// TODO: Delete the mock plugins including the components once the correct plugins have been implemented
 			[
 				{
 					plugin: pluginFullscreen({}),

@@ -21,6 +21,10 @@
 			"default": "./dist/polar.js"
 		},
 		"./polar.css": "./dist/polar.css",
+		"./client": {
+			"types": "./dist/client.d.ts",
+			"default": "./dist/client.js"
+		},
 		"./store": {
 			"types": "./dist/store.d.ts",
 			"default": "./dist/store.js"