mobility-web-component/index.html at main · geops/mobility-web-component · 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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Mobility Web Component</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <script type="text/javascript">
      if (/localhost/.test(window.location.hostname)) {
        new EventSource("/esbuild").addEventListener("change", () => {
          location.reload();
        });
      }
    </script>
    <script type="module" src="./dist/index.js"></script>
    <script type="module" src="./dist/indexDoc.js"></script>
    <script src="./docutils.js"></script>
    <link rel="stylesheet" type="text/css" href="./output.css" />
    <style>
      ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
      }
      a {
        text-decoration: underline;
      }
    </style>
  </head>
  <body class="p-8">
    <!-- tailwind hack to add class used in docutils -->
    <div
      class="absolute inset-0 flex h-full w-full table-auto mr-4 gap-4 space-y-4 border bg-black p-0 px-4 py-2 pt-2 text-white hover:bg-gray-700"
      style="display: none"
    ></div>
    <div class="pt-2" style="display: none"></div>
    <div id="doc" style="display: none" class="mx-auto max-w-3xl space-y-4">
      <h1 class="text-3xl font-bold">Mobility Web Component</h1>
      <p>This is a demo of the Mobility Web Component.</p>
      <h2 class="text-xl font-bold">Usage example</h2>
      <pre
        id="code"
        class="overflow-auto rounded bg-slate-800 p-4 text-slate-200"
      ></pre>
      <geops-mobility
        id="map"
        class="block h-128 w-full resize overflow-hidden rounded-[16px] border"
        zoom="12"
      ></geops-mobility>

      <div id="attributesDoc" class="space-y-4">
        <h2 class="text-xl font-bold">Attributes</h2>

        <pre class="rounded bg-slate-800 p-4 text-slate-200">
// Modify an attribute
document.getElementById('map').setAttribute("zoom", "15");
</pre
        >
        <div id="attributes"></div>
      </div>
      <div id="eventsDoc" class="space-y-4">
        <h2 class="text-xl font-bold">Events</h2>
        <pre class="rounded bg-slate-800 p-4 text-slate-200">
// Listen to an event
document.getElementById('map').addEventListener('mwc:attribute', (event) => {
  console.log('Display last data received:', event.data);
});
</pre
        >
        <div id="events"></div>
      </div>

      <div id="urlParametersDoc" class="space-y-4">
        <h2 class="text-xl font-bold">Documentation URL parameters</h2>
        <p>The following parameters are only used by this documentation webpage.</p>
        <div id="urlParameters"></div>
      </div>
      <br />
      <br />
      <h1 class="text-xl font-bold">More mobility web components</h1>
      <p>
        <a href="search.html" target="_blank"
          >&gt;&gt; Usage example Search Component</a
        >
      </p>
    </div>
    <br />
    <br />
    <script type="text/javascript">
      const pkgSrc = "https://www.unpkg.com/@geops/mobility-web-component";
      const wc = document.querySelector("geops-mobility");

      window.addEventListener("load", () => {
        const attributes = window.MobilityMapAttributes;
        const events = window.MobilityMapEvents;

        // Add page parameters
        const urlParameters = {
          fullscreen: {
            type: "boolean",
            defaultValue: "false",
            description: `Load the map in fullscreen mode.`,
            public: true,
          },
          noapply: {
            type: "boolean",
            defaultValue: "false",
            description:
              "Will not apply web component attributes defined as url parameters. Useful to test the permalink functionality of the web component.",
            public: true,
          },

          debug: {
            type: "boolean",
            defaultValue: "false",
            description:
              "Displays debug information for vehicles when true, use only for debugging.",
            public: true,
          },

          graphs: {
            type: "boolean",
            defaultValue: "false",
            description:
              "Use graphs from the style for realtime data.",
            public: true,
          },

          private: {
            type: "boolean",
            defaultValue: "false",
            description:
              "Displays all private attributes, if there are some, use only for development purpose.",
            public: true,
          },
        };

        onLoad(wc, attributes, events, pkgSrc, urlParameters);
      });
    </script>
  </body>
</html>