Files
  • index.html
  • index.css
  • index.js
index.html
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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>MQTT map</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-realtime/2.1.1/leaflet-realtime.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/mqtt.min.js"></script>
  </head>
  <body>
    <p id="documentation_note">Read the <a href="https://digitransit.fi/en/developers/apis/4-realtime-api/vehicle-positions/">HFP API documentation</a> to understand how these topic filters are used</p>

    <table>
      <tr class="topic_value">
        <td>Temporal type: </td>
        <td><select class="value" id="temporal_type">
              <option>+</option>
              <option>ongoing</option>
              <option>upcoming</option>
            </select>
        </td>
      </tr>
          
      <tr class="topic_value">
        <td>Transport mode: </td>
        <td><select class="value" id="transport_mode">
            <option>+</option>
            <option>bus</option>
            <option>tram</option>
            <option>train</option>
          </select>
        </td>
      </tr>

      <tr class="topic_value">
        <td>Operator id: </td>
        <td><input class="value" id="operator_id" type="text" value="+"></input></td>
        <td class="validation_note">Operator id should be 4 digits long<td>
      </tr>

      <tr class="topic_value">
        <td>Vehicle number: </td>
        <td><input class="value" id="vehicle_number" type="text" value="+"></input></td>
        <td class="validation_note">Vehicle number should be 5 digits long<td>
      </tr>

      <tr class="topic_value">
        <td>Route id: </td>
        <td><input class="value" id="route_id" type="text" value="+"></input></td>
        <td class="validation_note">Route id should contain 4 digits and up to 2 characters<td>
      </tr>

      <tr class="topic_value">
        <td>Direction id: </td>
        <td><select class="value" id="direction_id">
              <option>+</option>
              <option>1</option>
              <option>2</option>
            </select>
        </td>
      </tr>

      <tr class="topic_value">
        <td>Headsign: </td>
        <td><input class="value" id="headsign" type="text" value="+"></input></td>
      </tr>

      <tr class="topic_value">
        <td>Start time: </td>
        <td><input class="value" id="start_time" type="text" value="+"></input></td>
        <td class="validation_note">Time should be in format <code>hh:MM</code><td>
      </tr>

      <tr class="topic_value">
        <td>Next stop: </td>
        <td><input class="value" id="next_stop" type="text" value="+"></input></td>
        <td class="validation_note">Stop id should be 7 digits long<td>
      </tr>

      <tr class="topic_value">
        <td>Geohash level: </td>
        <td><select class="value" id="geohash_level">
              <option>0</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
              <option>+</option>
            </select></td>
          <td id="geohash_note"><b>Note:</b> Geohash level 0 shows only the most significant updates on the map</td>
      </tr>
    </table>

    <a id="show_topics" href="javascript:;" onclick="showTopics()">Show topics</a>
    <pre id="topics" style="display:none"></pre>

    <div id="map_container">
      <div><button class="geofilter" id="geohash_on">Use map bounds for geohash filter</button><button class="geofilter" id="geohash_off">Remove geohash filter</button></div>
      <br/>
      <div id="map"></div>
    </div>
    <script src="index.js"></script>
  </body>
</html>
result
console