Skip to content

Commit f43286a

Browse files
dopenguindopenguin
committed
refactor: add generic client including an example
Also, add information on what to do on teardown.
1 parent 19c724e commit f43286a

File tree

16 files changed

+423
-677
lines changed

16 files changed

+423
-677
lines changed

‎examples/generic/index.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>Generic POLAR client</title>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<meta name="viewport"
7+
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
8+
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate, max-age=0" />
9+
<link rel="stylesheet" href="@polar/polar/polar.css" />
10+
<script type="module" defer src="index.js"></script>
11+
<style>
12+
/* style just for example page, not directly related to POLAR */
13+
:root {
14+
--not-quite-white: #f2f3f4;
15+
--map-height: 600px;
16+
}
17+
18+
body {
19+
font-family: sans-serif;
20+
padding: 2em;
21+
background: var(--not-quite-white);
22+
color: var(--eigengrau);
23+
}
24+
25+
h1 {
26+
margin-bottom: 0.5em;
27+
}
28+
29+
h2 {
30+
margin: 0.5em 0;
31+
}
32+
33+
p {
34+
margin: 0.2em 0;
35+
}
36+
37+
#language-switcher {
38+
outline: solid black;
39+
}
40+
41+
.polarstern {
42+
width: 90vw;
43+
max-width: 100%;
44+
height: var(--map-height);
45+
margin-top: 10px;
46+
margin-bottom: 10px;
47+
}
48+
</style>
49+
</head>
50+
51+
<body>
52+
<h1>POLAR map client</h1>
53+
<label id="language-switcher-label">
54+
Language in map client:
55+
<select id="language-switcher">
56+
<option value="en">English</option>
57+
<option value="de">German</option>
58+
</select>
59+
</label>
60+
<button id="color-scheme-switcher">Switch to dark mode</button>
61+
<h2>Demo application</h2>
62+
<div style="display: flex; justify-content: center;">
63+
<div id="polarstern" class="polarstern"></div>
64+
</div>
65+
</body>
66+
</html>

‎examples/generic/index.js‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
import { updateState } from '@polar/polar'
2+
import { createMap } from '@polar/polar/client'
3+
import { toMerged } from 'es-toolkit'
4+
5+
const basemapId = '23420'
6+
const basemapGreyId = '23421'
7+
const reports = '6059'
8+
const hamburgBorder = '1693'
9+
10+
let colorScheme = 'light'
11+
12+
// arbitrary condition for testing
13+
const isEvenId = (mmlid) => Number(mmlid.slice(-1)) % 2 === 0
14+
15+
// NOTE: This function is only usable if the layer is clustered
16+
const isReportSelectable = (feature) =>
17+
feature
18+
.get('features')
19+
.reduce(
20+
(accumulator, current) => isEvenId(current.get('mmlid')) || accumulator,
21+
false
22+
)
23+
24+
const map = await createMap(
25+
'polarstern',
26+
'https://geoportal-hamburg.de/lgv-config/services-internet.json',
27+
{
28+
colorScheme,
29+
startCenter: [565874, 5934140],
30+
layers: [
31+
{
32+
id: basemapId,
33+
visibility: true,
34+
type: 'background',
35+
name: 'Basemap.de (Farbe)',
36+
},
37+
{
38+
id: basemapGreyId,
39+
type: 'background',
40+
name: 'Basemap.de (Grau)',
41+
maxZoom: 6,
42+
},
43+
{
44+
id: hamburgBorder,
45+
visibility: true,
46+
hideInMenu: true,
47+
type: 'mask',
48+
name: 'Stadtgrenze Hamburg',
49+
},
50+
{
51+
id: reports,
52+
type: 'mask',
53+
name: 'Anliegen (MML)',
54+
visibility: false,
55+
},
56+
],
57+
layout: 'nineRegions',
58+
checkServiceAvailability: true,
59+
markers: {
60+
layers: [
61+
{
62+
id: reports,
63+
defaultStyle: {
64+
stroke: '#FFFFFF',
65+
fill: '#005CA9',
66+
},
67+
hoverStyle: {
68+
stroke: '#46688E',
69+
fill: '#8BA1B8',
70+
},
71+
selectionStyle: {
72+
stroke: '#FFFFFF',
73+
fill: '#E10019',
74+
},
75+
unselectableStyle: {
76+
stroke: '#FFFFFF',
77+
fill: '#333333',
78+
},
79+
isSelectable: isReportSelectable,
80+
},
81+
],
82+
clusterClickZoom: true,
83+
},
84+
scale: {
85+
showScaleSwitcher: true,
86+
},
87+
addressSearch: {
88+
searchMethods: [
89+
{
90+
queryParameters: {
91+
searchStreets: true,
92+
searchHouseNumbers: true,
93+
},
94+
type: 'mpapi',
95+
url: 'https://geodienste.hamburg.de/HH_WFS_GAGES?service=WFS&request=GetFeature&version=2.0.0',
96+
},
97+
],
98+
minLength: 3,
99+
waitMs: 300,
100+
focusAfterSearch: true,
101+
groupProperties: {
102+
defaultGroup: {
103+
limitResults: 5,
104+
},
105+
},
106+
},
107+
pins: {
108+
coordinateSources: [{ plugin: 'addressSearch', key: 'chosenAddress' }],
109+
boundary: {
110+
layerId: hamburgBorder,
111+
},
112+
movable: 'drag',
113+
style: {
114+
fill: '#FF0019',
115+
},
116+
toZoomLevel: 7,
117+
},
118+
reverseGeocoder: {
119+
url: 'https://geodienste.hamburg.de/HH_WPS',
120+
coordinateSources: [
121+
{
122+
plugin: 'pins',
123+
key: 'coordinate',
124+
},
125+
],
126+
addressTarget: {
127+
plugin: 'addressSearch',
128+
key: 'selectResult',
129+
},
130+
zoomTo: 7,
131+
},
132+
geoLocation: {
133+
checkLocationInitially: false,
134+
keepCentered: false,
135+
showTooltip: true,
136+
zoomLevel: 7,
137+
},
138+
},
139+
[
140+
'addressSearch',
141+
'fullscreen',
142+
'geoLocation',
143+
'iconMenu',
144+
'layerChooser',
145+
'loadingIndicator',
146+
'pins',
147+
'reverseGeocoder',
148+
'scale',
149+
'toast',
150+
],
151+
(serviceRegister) =>
152+
serviceRegister.map((entry) =>
153+
entry.id === reports ? toMerged(entry, { clusterDistance: 20 }) : entry
154+
)
155+
)
156+
157+
/* simple language switcher attached for demo purposes;
158+
* language switching is considered a global concern and
159+
* should be handled by the leading application */
160+
document
161+
.getElementById('language-switcher')
162+
?.addEventListener('change', (event) => {
163+
const target = event.target
164+
const { value } = target
165+
updateState(map, 'core', 'language', value)
166+
target[0].innerHTML = value === 'en' ? 'English' : 'Englisch'
167+
target[1].innerHTML = value === 'en' ? 'German' : 'Deutsch'
168+
})
169+
170+
document
171+
.getElementById('color-scheme-switcher')
172+
?.addEventListener('click', ({ target }) => {
173+
target.innerHTML = `Switch to ${colorScheme} mode`
174+
colorScheme = colorScheme === 'light' ? 'dark' : 'light'
175+
updateState(map, 'core', 'colorScheme', colorScheme)
176+
})

‎examples/generic/tsconfig.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"extends": [
3+
"@vue/tsconfig/tsconfig.dom.json",
4+
"@vue/tsconfig/tsconfig.lib.json",
5+
"../../tsconfig.settings.json"
6+
],
7+
"compilerOptions": {
8+
"types": [
9+
"vitest/importMeta",
10+
"vitest/jsdom",
11+
"../../src/@types/vite-env.d.ts",
12+
"../../src/@types/i18next.d.ts",
13+
"../../src/@types/pinia.d.ts",
14+
"../../src/@types/shims-masterportalapi.d.ts",
15+
"../../src/@types/virtual-kern-extra-icons.d.ts"
16+
],
17+
"lib": ["ESNext", "DOM", "DOM.Iterable"],
18+
"paths": {
19+
"@polar/polar": ["../../src/core/index.ts"],
20+
"@polar/polar/client": ["../../src/client.ts"]
21+
}
22+
}
23+
}

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@
2121
"default": "./dist/polar.js"
2222
},
2323
"./polar.css": "./dist/polar.css",
24+
"./client": {
25+
"types": "./dist/client.d.ts",
26+
"default": "./dist/client.js"
27+
},
2428
"./store": {
2529
"types": "./dist/store.d.ts",
2630
"default": "./dist/store.js"

0 commit comments

Comments
 (0)