Skip to content

Commit 5fa14d5

Browse files
Peter Rushforthprushforth
Peter Rushforth
authored and
prushforth
committed
cleanup
1 parent 9ffba2e commit 5fa14d5

File tree

3 files changed

+150
-133
lines changed

3 files changed

+150
-133
lines changed

‎ToDo‎

Lines changed: 0 additions & 115 deletions
This file was deleted.

‎index.html‎

Lines changed: 140 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,43 +5,169 @@
55
<meta name="viewport" content="width=device-width,initial-scale=1">
66
<title>index-map.html</title>
77
<script type="module" src="dist/mapml.js"></script>
8-
<style>
8+
<style>
9+
html,
10+
body {
11+
height: 100%;
12+
}
13+
* {
14+
margin: 0;
15+
padding: 0;
16+
}
17+
918
/* Specifying the `:defined` selector is recommended to style the map
1019
element, such that styles don't apply when fallback content is in use
1120
(e.g. when scripting is disabled or when custom/built-in elements isn't
1221
supported in the browser). */
13-
mapml-viewer:defined {
22+
mapml-viewer:defined {
1423
/* Responsive map. */
15-
max-width: 100%;
24+
max-width: 100%;
1625

1726
/* Full viewport. */
18-
width: 100%;
19-
height: auto;
20-
aspect-ratio: 16/9;
27+
width: 100%;
28+
height: 50%;
2129

2230
/* Remove default (native-like) border. */
23-
border: none;
31+
border: none;
2432

2533
vertical-align: middle;
26-
}
34+
}
2735

36+
/* Pre-style to avoid FOUC of inline map-layer and fallback content. */
37+
mapml-viewer:not(:defined) > * {
38+
display: none;
39+
}
40+
2841
/* Pre-style to avoid Layout Shift. */
2942
mapml-viewer:not(:defined) {
3043
display: inline-block;
3144
contain: size;
3245
contain-intrinsic-size: 304px 154px;
3346
}
3447

48+
/* Specifying the `:defined` selector is recommended to style the map
49+
element, such that styles don't apply when fallback content is in use
50+
(e.g. when scripting is disabled or when custom/built-in elements isn't
51+
supported in the browser). */
52+
map[is="web-map"]:defined {
53+
/* Responsive map. */
54+
max-width: 100%;
55+
56+
/* Full viewport. */
57+
width: 100%;
58+
height: 50%;
59+
60+
/* Remove default (native-like) border. */
61+
border: none;
62+
63+
vertical-align: middle;
64+
}
65+
66+
/* Pre-style to avoid Layout Shift. */
67+
map[is="web-map"]:not(:defined) {
68+
display: inline-block;
69+
contain: size;
70+
contain-intrinsic-size: 304px 154px;
71+
}
72+
73+
/* Pre-style to avoid FOUC of inline map-layer and fallback content. */
74+
map[is="web-map"]:not(:defined) + img[usemap],
75+
map[is="web-map"]:not(:defined) > :not(area):not(.mapml-web-map) {
76+
display: none;
77+
}
78+
79+
/* Ensure inline layer content is hidden if custom/built-in elements isn't
80+
supported, or if javascript is disabled. This needs to be defined separately
81+
from the above, because the `:not(:defined)` selector invalidates the entire
82+
declaration in browsers that do not support it. */
3583
map-layer {
3684
display: none;
3785
}
38-
</style>
39-
86+
</style>
87+
<noscript>
88+
<style>
89+
/* Ensure fallback content (children of the map element) is displayed if
90+
custom/built-in elements is supported but javascript is disabled. */
91+
mapml-viewer:not(:defined) > :not(map-layer) {
92+
display: initial;
93+
}
94+
95+
/* "Reset" the properties used to pre-style (to avoid Layout Shift) if
96+
custom/built-in elements is supported but javascript is disabled. */
97+
mapml-viewer:not(:defined) {
98+
display: initial;
99+
contain: initial;
100+
contain-intrinsic-size: initial;
101+
}
102+
/* Ensure client-side image map fallbacks are displayed if custom/built-in
103+
elements is supported but javascript is disabled. */
104+
map[is="web-map"]:not(:defined) + img[usemap] {
105+
display: initial;
106+
}
107+
108+
/* "Reset" the properties used to pre-style (to avoid Layout Shift) if
109+
custom/built-in elements is supported but javascript is disabled. */
110+
map[is="web-map"]:not(:defined) {
111+
display: initial;
112+
contain: initial;
113+
contain-intrinsic-size: initial;
114+
}
115+
</style>
116+
</noscript>
40117
</head>
41118
<body>
42-
43-
<mapml-viewer projection="CBMTILE" zoom="3" lat="62.91647746195149" lon="-88.76632070546334" controls="" controlslist="geolocation">
44-
<map-layer label="Canadian Provinces and Territories" src="http://localhost:8080/geoserver/nrcan/wms?LAYERS=provinces-en&BBOX=-2465257.292723763%2C-883189.0600199443%2C3078646.820419571%2C3952792.698494108&HEIGHT=768&WIDTH=669&SRS=MapML%3ACBMTILE&STYLES=provinces&FORMAT=text%2Fmapml&TRANSPARENT=true&format_options=mapml-wms-format%3Aimage%2Fpng%3Bmapmlusemultiextents%3Afalse%3Bmapmlusetiles%3Afalse%3Bmapmlusefeatures%3Atrue%3Bmapmlskipattributes%3Afalse%3B&SERVICE=WMS&REQUEST=GetMap&VERSION=1.3.0" checked=""></map-layer>
45-
</mapml-viewer>
119+
120+
<mapml-viewer projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls controlslist="geolocation">
121+
<map-layer data-testid="osm-layer" label="OpenStreetMap" checked >
122+
<map-link rel="license" title="© OpenStreetMap contributors CC BY-SA" href="https://www.openstreetmap.org/copyright"></map-link>
123+
<map-extent units="OSMTILE" checked="checked">
124+
<map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
125+
<map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
126+
<map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
127+
<map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
128+
</map-extent>
129+
</map-layer>
130+
<map-layer label="Restaurants" checked="">
131+
<map-meta name="extent" content="top-left-easting=-8433179, top-left-northing=5689316, bottom-right-easting=-8420968, bottom-right-northing=5683139"></map-meta>
132+
<map-extent units="OSMTILE" checked="">
133+
<map-select id="restaurants" name="cusine">
134+
<map-option value="restaurants" selected="selected">All cuisines</map-option>
135+
<map-option value="african">African</map-option>
136+
<map-option value="asian">Asian</map-option>
137+
<map-option value="cajun">Cajun</map-option>
138+
<map-option value="indian">Indian</map-option>
139+
<map-option value="italian">Italian</map-option>
140+
<map-option value="mexican">Mexican</map-option>
141+
</map-select>
142+
<map-link media="(11 < map-zoom <= 18)" tref="https://maps4html.org/experiments/shared/restaurants/{cusine}.mapml" rel="features"></map-link>
143+
</map-extent>
144+
</map-layer>
145+
</mapml-viewer>
146+
<map is="web-map" projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls controlslist="geolocation">
147+
<map-layer data-testid="osm-layer" label="OpenStreetMap" checked >
148+
<map-link rel="license" title="© OpenStreetMap contributors CC BY-SA" href="https://www.openstreetmap.org/copyright"></map-link>
149+
<map-extent units="OSMTILE" checked="checked">
150+
<map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
151+
<map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
152+
<map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
153+
<map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png"></map-link>
154+
</map-extent>
155+
</map-layer>
156+
<map-layer label="Restaurants" checked="">
157+
<map-meta name="extent" content="top-left-easting=-8433179, top-left-northing=5689316, bottom-right-easting=-8420968, bottom-right-northing=5683139"></map-meta>
158+
<map-extent units="OSMTILE" checked="">
159+
<map-select id="restaurants" name="cusine">
160+
<map-option value="restaurants" selected="selected">All cuisines</map-option>
161+
<map-option value="african">African</map-option>
162+
<map-option value="asian">Asian</map-option>
163+
<map-option value="cajun">Cajun</map-option>
164+
<map-option value="indian">Indian</map-option>
165+
<map-option value="italian">Italian</map-option>
166+
<map-option value="mexican">Mexican</map-option>
167+
</map-select>
168+
<map-link tref="https://maps4html.org/experiments/shared/restaurants/{cusine}.mapml" rel="features"></map-link>
169+
</map-extent>
170+
</map-layer>
171+
</map>
46172
</body>
47173
</html>

‎test/e2e/layers/templatedFeaturesCleanup.test.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { test, expect, chromium } from '@playwright/test';
22

3-
test.describe('Templated features cleanup test' , () => {
3+
test.describe('Templated features cleanup test', () => {
44
let page;
55
let context;
66
test.beforeAll(async function () {
@@ -18,21 +18,27 @@ test.describe('Templated features cleanup test' , () => {
1818
test('Templated <map-link rel="features"> renderer cleans up after itself', async () => {
1919
await page.waitForTimeout(1000);
2020
const link = page.getByTestId('test-link');
21-
let svgCount = await link.evaluate((l) => l._templatedLayer._container.querySelectorAll('svg').length);
21+
let svgCount = await link.evaluate(
22+
(l) => l._templatedLayer._container.querySelectorAll('svg').length
23+
);
2224
const viewer = page.getByTestId('map');
2325
await page.getByLabel('Zoom in').click();
2426
await page.getByLabel('Zoom in').click();
2527
await page.getByLabel('Zoom in').click();
2628
await page.getByLabel('Zoom in').click();
2729
await page.waitForTimeout(1000);
28-
svgCount = await link.evaluate((l) => l._templatedLayer._container.querySelectorAll('svg').length);
30+
svgCount = await link.evaluate(
31+
(l) => l._templatedLayer._container.querySelectorAll('svg').length
32+
);
2933
expect(svgCount).toEqual(1);
3034
await page.getByLabel('Interactive map').press('ArrowLeft');
3135
await page.getByLabel('Interactive map').press('ArrowLeft');
3236
await page.getByLabel('Interactive map').press('ArrowLeft');
3337
await page.getByLabel('Reload').click();
3438
await page.waitForTimeout(1000);
35-
svgCount = await link.evaluate((l) => l._templatedLayer._container.querySelectorAll('svg').length);
39+
svgCount = await link.evaluate(
40+
(l) => l._templatedLayer._container.querySelectorAll('svg').length
41+
);
3642
expect(svgCount).toEqual(1);
3743
});
3844
});

0 commit comments

Comments
 (0)