Maplat/index.html at master · code4history/Maplat · 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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Maplat UI デモ - @maplat/ui</title>
  <link rel="stylesheet" href="./demo/demo-shell.css">
  <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css" rel="stylesheet" integrity="sha384-yMryWNNBRLW/F2CV1w06DGkYId9vjirkhvpIE5mQgs7ujjh0nQ7NxKwQsxb9sq0J" crossorigin="anonymous">
  <link rel="icon" type="image/png" sizes="196x196" href="pwa/sample/favicon-196.png">

  <meta name="msapplication-square70x70logo" content="pwa/sample/mstile-icon-128.png">
  <meta name="msapplication-square150x150logo" content="pwa/sample/mstile-icon-270.png">
  <meta name="msapplication-square310x310logo" content="pwa/sample/mstile-icon-558.png">
  <meta name="msapplication-wide310x150logo" content="pwa/sample/mstile-icon-558-270.png">
</head>
<body class="c4h-app">
  <header class="c4h-header">
    <h1>@maplat/ui デモ - Maplat</h1>
    <div class="c4h-control-row">
      <label>
        地図セット:
        <select id="app-select">
          <option value="sample">sample（ぷらっと館林）</option>
          <option value="sample_old">盛岡</option>
        </select>
      </label>
      <div class="c4h-divider"></div>
      <label>
        言語:
        <select id="lang-select">
          <option value="ja">ja</option>
          <option value="en">en</option>
        </select>
      </label>
    </div>
    <span id="status" class="c4h-status">読み込み中…</span>
  </header>

  <div class="c4h-note">地図セットと言語を選ぶと URL クエリ付きで再読み込みします。</div>

  <!-- POI のテンプレートの対比（sample の地図セット）。警告の欄は Core のテンプレートの警告だけを写す（demo/dev.ts） -->
  <div id="template-warning" class="c4h-note" data-testid="template-warning" hidden>
    テンプレートの警告: <span id="template-warning-text"></span>
  </div>
  <details id="template-demo" class="c4h-note">
    <summary>POI のメディアとテンプレートの対比</summary>
    <p>ボタンで地図をその POI の位置へ寄せ、地図の中央のマーカーを押すと吹き出しが開きます
      （テンプレートはマーカーを描くときに評価されます）。</p>
    <div>
      <button type="button" data-goto-poi="139.539,36.251">(a) スライダー: media で指定</button>
      <button type="button" data-goto-poi="139.5385,36.2505">(b) スライダー: テンプレートで指定（新しい記法）</button>
      <button type="button" data-goto-poi="139.538,36.25">(c) テンプレート: 旧い記法</button>
    </div>
    <p>(b) の poiTemplate（Nunjucks）:</p>
    <pre id="template-source-nunjucks" style="white-space: pre-wrap;"></pre>
    <p>(c) の poiTemplate（lodash の旧い記法。評価されない）:</p>
    <pre id="template-source-legacy" style="white-space: pre-wrap;"></pre>
  </details>

  <div class="c4h-panels">
    <div class="c4h-panel" style="width: 100%; height: calc(100vh - 210px); min-height: 320px;">
      <div id="map_div" style="position: relative; width: 100%; height: 100%;"></div>
    </div>
  </div>

  <div class="c4h-legend">
    マーカー (POI) はクリックして操作できます。<br>
    clickMarker / clickMap のイベント内容は console に出力されます。
  </div>

  <script src="js/geolocate.js"></script>
  <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js" integrity="sha384-fGf5uD36PMOVlKFbscwFw7U09vaxuqVR+yYZmOO/6CXS5HQHGpN7sGKnCbydmOu7" crossorigin="anonymous"></script>
  <script type="module" src="./demo/dev.ts"></script>
</body>
</html>