MapML.js/test/e2e/layers/clientTemplatedTileLayer.html at a08fca64553cb9b8994226f90ebe02219e626d26 · Maps4HTML/MapML.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Client Tiles</title>
  <meta charset="UTF-8">
  <script type="module" src="mapml-viewer.js"></script>
  <style>
    html {
      height: 100%
    }

    body {
      height: inherit
    }

    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <mapml-viewer width="500" height="500" projection="WGS84" zoom="0" lat="59.87304909" lon="-53.22587225" controls>

    <layer- label="Inline Templated Tile" checked>
      <map-meta name="zoom" content="min=0,max=5"></map-meta>
      <map-extent units="WGS84" checked hidden>
        <map-input name="zoomLevel" type="zoom" min="1" max="1" value="0" ></map-input>
        <map-input name="row" type="location" axis="row" units="tilematrix" min="0" max="1" ></map-input>
        <map-input name="col" type="location" axis="column" units="tilematrix" min="0" max="1" ></map-input>

        <map-link rel='tile' type='text/mapml' title='Tiles for ne_10m_admin_0_countries (as MapML)' ></map-link>

      </map-extent>
    </layer->
  </mapml-viewer>
  <script>
    let layer = document.querySelector("body > mapml-viewer > layer- > map-extent > map-link");
    layer.addEventListener("map-tileloadstart", (e) => {
      let cust = document.createElement("P");
      cust.textContent = `${e.detail.x}${e.detail.y}${e.detail.zoom}`;
      e.detail.appendTile(cust);
    });
  </script>
</body>

</html>