-
Notifications
You must be signed in to change notification settings - Fork 0
/
wmata_buses.html
62 lines (51 loc) · 3.3 KB
/
wmata_buses.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
<!-- This file was derived from: https://leafletjs.com/examples/quick-start/ and https://github.com/perliedman/leaflet-realtime and we apply the same license here -->
<!--
## ISC License
Copyright (c) 2014, Per Liedman ([email protected])
Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
-->
<!DOCTYPE html>
<html>
<head>
<title>WMATA Bus Locations</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="images/Icon-Archive-Free-Bus-Icon.ico" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-realtime/2.1.2/leaflet-realtime.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
</head>
<body>
<!-- We only really need a single HTML element to initalise the leaflet map. We apply the map to the 'mapid' element in the javascript below. -->
<div id="mapid" style="width: 100vw; height: 100vh;"></div>
<script>
<!-- Set the leaflet view to Washington DC -->
var map = L.map('mapid').setView([38.908943, -77.036471], 15);
/*
The busGeoLocationsBig.json file contains GeoJSON bus objects in a list. The file itself is written to local disk by NiFi in a
directory which is being served by a local HTTPD webserver. Leaflet requests this file every 10 seconds as configured by the
interval, and draws the markers on the map.
*/
var realtime = L.realtime(
{
url: 'http://localhost:2022/busData/allBusGeoJSONLocations.json',
crossOrigin: true,
type: 'json'
},
{
interval: 10 * 1000
}
).addTo(map);
<!-- The tile layer adds the underlying street map imagery - in this case, the map of DC -->
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 15,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(map);
</script>
</body>
</html>