Skip to content

Commit ff1d9fa

Browse files
warm-coolguywarm-coolguy
authored
Merge branch 'main' into feature/stadtwald-layer-for-clerks
2 parents 51cb326 + 8dee461 commit ff1d9fa

File tree

3 files changed

+176
-1
lines changed

3 files changed

+176
-1
lines changed

‎packages/clients/meldemichel/API.md‎

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,8 +145,54 @@ A document rendering the map client could e.g. look like this:
145145
</html>
146146
```
147147

148-
## Rendering COMPLETE mode
148+
## Rendering COMPLETE mode (full page)
149149

150150
The `index.html` included in the package's `dist` folder has been prepared for this mode and must merely be hosted.
151151

152152
Please see the table in chapter `Basic usage` about configuration options.
153+
154+
## Rendering COMPLETE mode (embedded element)
155+
156+
To embed the COMPLETE mode map on any page, provide a div with an id like `meldemichel-map-client`; you may choose any id you like.
157+
158+
The following script tag can then be used to render the productive services of the Meldemichel map client.
159+
160+
```html
161+
<script type="module">
162+
// adjust path to where the client is
163+
import meldemichelMapClient from '../dist/client-meldemichel.js'
164+
165+
meldemichelMapClient.createMap({
166+
containerId: 'meldemichel-map-client', // the id you used
167+
mode: 'COMPLETE',
168+
afmUrl: `https://afm.hamburg.de/intelliform/forms/mml_melde_michel/standard/mml_melde_michel/index`,
169+
reportServiceId: '6059',
170+
configOverride: {
171+
// adjust path to where the client is
172+
stylePath: '../dist/style.css'
173+
}
174+
})
175+
</script>
176+
```
177+
178+
POLAR will rebuild the given div to contain a ShadowDOM that hosts the map. The outer div will change to have the id `meldemichel-map-client-wrapper` (resp. `${yourId}-wrapper`) and can be used to style the map's height and width with, for example:
179+
180+
```css
181+
#meldemichel-map-client-wrapper {
182+
/* "position: relative;" is the minimum required styling */
183+
position: relative;
184+
height: 400px;
185+
width: 100%;
186+
}
187+
```
188+
189+
To also serve users with JS disabled some content, this fragment is common:
190+
191+
```html
192+
<div id="meldemichel-map-client">
193+
<!-- Optional, if your page does not have its own <noscript> information -->
194+
<noscript>Please use a browser with active JavaScript to use the map client.</noscript>
195+
</div>
196+
```
197+
198+
For a complete example, you may also check [the running embedded scenario](https://dataport.github.io/polar/docs/meldemichel/example/complete_embedded.html) or its [source file](https://github.com/Dataport/polar/blob/main/packages/clients/meldemichel/example/complete_embedded.html).

‎packages/clients/meldemichel/example/complete_embedded.html‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
8+
/>
9+
<meta
10+
http-equiv="Cache-Control"
11+
content="no-cache, no-store, must-revalidate, max-age=0"
12+
/>
13+
<title>MML INTEGRATION TEST</title>
14+
<style>
15+
/* div with this id is created on `createMap` call to host shadow DOM */
16+
#polarstern-wrapper {
17+
position: relative;
18+
height: 400px;
19+
width: 100%;
20+
}
21+
22+
/* the following styling is purely for surrounding example content */
23+
html, body {
24+
margin: 0;
25+
padding: 0;
26+
font-family: sans-serif;
27+
}
28+
29+
header {
30+
padding: 0 2em;
31+
}
32+
33+
#hh-bug {
34+
height: 35px;
35+
width: 400px;
36+
margin-left: -280px;
37+
transform: skew(-35deg);
38+
background: #e10019;
39+
border-bottom-right-radius: 6px;
40+
margin-bottom: 1em;
41+
}
42+
43+
main {
44+
display: flex;
45+
flex-direction: column;
46+
gap: 2em;
47+
}
48+
49+
.blue-content {
50+
color: white;
51+
background: #1a4573;
52+
}
53+
54+
.padded-x {
55+
padding-right: 10vw;
56+
padding-left: 10vw;
57+
}
58+
59+
.padded-y {
60+
padding-top: 4em;
61+
padding-bottom: 4em;
62+
}
63+
64+
h2 {
65+
font-size: 38pt;
66+
}
67+
68+
p {
69+
font-size: 32px;
70+
}
71+
72+
footer {
73+
color: white;
74+
background: #003063;
75+
padding: 1em 5vw;
76+
}
77+
</style>
78+
</head>
79+
<body>
80+
<nav></nav>
81+
<header>
82+
<h1>Meldemichel-Einbindesimulation</h1>
83+
</header>
84+
<div id="hh-bug"></div>
85+
<main>
86+
<section class="blue-content padded-x padded-y">
87+
<h2>Blindtext</h2>
88+
<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.</p>
89+
</section>
90+
<section>
91+
<h2 class="padded-x">Aktuell gemeldete Schäden</h2>
92+
<!-- ID can be anything as long as it's used in .createMap, too -->
93+
<div id="polarstern"></div>
94+
</section>
95+
<section class="padded-x padded-y">
96+
<h2>Blindtext II.</h2>
97+
<p>Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.</p>
98+
</section>
99+
</main>
100+
<footer>At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</footer>
101+
<script type="module">
102+
import meldemichelMapClient from '../dist/client-meldemichel.js'
103+
104+
// toggle to switch between stage/prod layer and report system
105+
const stage = true
106+
107+
meldemichelMapClient.createMap({
108+
containerId: 'polarstern',
109+
mode: 'COMPLETE',
110+
afmUrl: `https://${
111+
stage ? 'stage.' : ''
112+
}afm.hamburg.de/intelliform/forms/mml_melde_michel/standard/mml_melde_michel/index`,
113+
reportServiceId: stage ? '6061' : '6059',
114+
configOverride: {
115+
stylePath: '../dist/style.css',
116+
attributions: {
117+
staticAttributions: [
118+
`<a href="https://github.com/Dataport/polar/blob/main/LEGALNOTICE.md">Legal Notice (Impressum)</a>`
119+
]
120+
}
121+
}
122+
})
123+
</script>
124+
</body>
125+
</html>

‎packages/clients/meldemichel/example/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@ <h1>Meldemichel Example Hub</h1>
3838
<a href="./complete.html">"COMPLETE" (Übersichtskarte)</a>
3939
</dt>
4040
<dd>Meldemichel Map Client rendered fullpage in mode COMPLETE.</dd>
41+
<dt>
42+
<a href="./complete_embedded.html">"COMPLETE_EMBEDDED" (Übersichtskarte eingebettet)</a>
43+
</dt>
44+
<dd>Meldemichel Map Client rendered as page element in mode COMPLETE.</dd>
4145
<dt>
4246
<a href="../dist/index.html"
4347
>"COMPLETE" (Übersichtskarte) – Production Mode Test</a

0 commit comments

Comments
 (0)