|
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