|
4 | 4 | <meta charset="utf-8"> |
5 | 5 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
6 | 6 | <title>Authoring example 1</title> |
7 | | - <script type="module" src="https://maps4html.org/web-map-doc/dist/mapml-viewer.js" crossorigin></script> |
| 7 | + <script type="module" src="https://unpkg.com/@maps4html/mapml@latest/dist/mapml.js" crossorigin></script> |
8 | 8 | <link rel="preconnect" href="https://geogratis.gc.ca" crossorigin> |
9 | 9 | <style> |
10 | 10 | html { |
|
20 | 20 | height: 150px; |
21 | 21 | max-width: 100%; |
22 | 22 | } |
23 | | - /* Pre-style to avoid FOUC of inline layer- and fallback content. */ |
| 23 | + /* Pre-style to avoid FOUC of inline map-layer and fallback content. */ |
24 | 24 | mapml-viewer:not(:defined) > * { |
25 | 25 | display: none; |
26 | 26 | } |
27 | 27 | /* Ensure inline layer content is hidden if custom elements isn't supported, |
28 | 28 | or if javascript is disabled. This needs to be defined separately from the above, |
29 | 29 | because the `:not(:defined)` selector invalidates the entire declaration |
30 | 30 | in browsers that do not support it. */ |
31 | | - layer- { |
| 31 | + map-layer { |
32 | 32 | display: none; |
33 | 33 | } |
34 | 34 | </style> |
35 | 35 | <noscript> |
36 | 36 | <style> |
37 | 37 | /* Ensure fallback content (children of the map element) is displayed if |
38 | 38 | custom elements is supported but javascript is disabled. */ |
39 | | - mapml-viewer:not(:defined) > :not(layer-) { |
| 39 | + mapml-viewer:not(:defined) > :not(map-layer) { |
40 | 40 | display: initial; |
41 | 41 | } |
42 | 42 | </style> |
|
45 | 45 | <body> |
46 | 46 | <mapml-viewer projection="OSMTILE" zoom="11" lat="48.8566" lon="2.3522"> |
47 | 47 | <map-caption>Paris, the City of Lights</map-caption> |
48 | | - <layer- label="OpenStreetMap" checked> |
| 48 | + <map-layer label="OpenStreetMap" checked> |
49 | 49 | <link rel="license" title="© OpenStreetMap contributors CC BY-SA" href="https://www.openstreetmap.org/copyright"></link> |
50 | 50 | <map-extent units="OSMTILE" checked> |
51 | 51 | <map-input name="z" type="zoom" value="18" min="0" max="18"></map-input> |
52 | 52 | <map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144" ></map-input> |
53 | 53 | <map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144" ></map-input> |
54 | 54 | <map-link rel="tile" tref="https://tile.openstreetmap.org/{z}/{x}/{y}.png" ></map-link> |
55 | 55 | </map-extent> |
56 | | - </layer-> |
| 56 | + </map-layer> |
57 | 57 | </mapml-viewer> |
58 | 58 | </body> |
59 | 59 | </html> |
0 commit comments