Skip to content

Commit 36fd533

Browse files
prushforthprushforth
committed
[AUTO] Sync MapML Build
1 parent bb4efcd commit 36fd533

File tree

5 files changed

+107
-92
lines changed

5 files changed

+107
-92
lines changed

‎src/dist/index.html

Lines changed: 92 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525

2626
/* Full viewport. */
2727
width: 100%;
28-
height: 100%;
28+
height: 50%;
2929

3030
/* Remove default (native-like) border. */
3131
border: none;
@@ -45,13 +45,44 @@
4545
contain-intrinsic-size: 304px 154px;
4646
}
4747

48-
/* Ensure inline layer content is hidden if custom/built-in elements isn't
49-
supported, or if javascript is disabled. This needs to be defined separately
50-
from the above, because the `:not(:defined)` selector invalidates the entire
51-
declaration in browsers that do not support it. */
52-
layer- {
53-
display: none;
54-
}
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 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. */
83+
layer- {
84+
display: none;
85+
}
5586
</style>
5687
<noscript>
5788
<style>
@@ -68,6 +99,19 @@
6899
contain: initial;
69100
contain-intrinsic-size: initial;
70101
}
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+
}
71115
</style>
72116
</noscript>
73117
</head>
@@ -84,20 +128,46 @@
84128
</map-extent>
85129
</layer->
86130
<layer- label="Restaurants" checked="">
87-
<map-meta name="extent" content="top-left-easting=-8433179, top-left-northing=5689316, bottom-right-easting=-8420968, bottom-right-northing=5683139"></map-meta>
88-
<map-extent units="OSMTILE" checked="">
89-
<map-select id="restaurants" name="cusine">
90-
<map-option value="restaurants" selected="selected">All cuisines</map-option>
91-
<map-option value="african">African</map-option>
92-
<map-option value="asian">Asian</map-option>
93-
<map-option value="cajun">Cajun</map-option>
94-
<map-option value="indian">Indian</map-option>
95-
<map-option value="italian">Italian</map-option>
96-
<map-option value="mexican">Mexican</map-option>
97-
</map-select>
98-
<map-link tref="https://maps4html.org/experiments/shared/restaurants/{cusine}.mapml" rel="features"></map-link>
99-
</map-extent>
100-
</layer->
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 tref="https://maps4html.org/experiments/shared/restaurants/{cusine}.mapml" rel="features"></map-link>
143+
</map-extent>
144+
</layer->
101145
</mapml-viewer>
146+
<map is="web-map" projection="OSMTILE" zoom="14" lat="45.406314" lon="-75.6883335" controls controlslist="geolocation">
147+
<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+
</layer->
156+
<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+
</layer->
171+
</map>
102172
</body>
103173
</html>

‎src/dist/mapml-viewer.js

Lines changed: 14 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/dist/mapml-viewer.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/dist/web-map.js

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

‎src/dist/web-map.js.map

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)