-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmap.html
90 lines (83 loc) · 3.74 KB
/
map.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Soteria</title>
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="./css/style.css">
<script src="main.js" type="module" defer></script>
<script src="./js/checker.js" type="module" defer></script>
<script src="./js/modal.js" defer></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
</head>
<body>
<script>0</script>
<header>
<h1>Soteria</h1>
<a href="#" id="enabler"><span id="refresher">↻</span> | <span id="location">Location...</span> | <span id="notification">Notification...</span></a>
<h2 style="margin: 0;">
<div class="map-link">
<a href="./index.html">Return to floormap...</a>
<button id="infoBox"><img src="./assets/info.png" id="infoIcon" alt="Info Icon"></button>
<div id="popup" class="modal">
<div class="modal-content">
<div class="close">×</div><br>
Local map is recommended if you are unfamiliar with the building or are just in the surrounding area. If you are able to, it is highly encouraged to use the floormap.<br><br>
Permissions key:<br>
✅ - Success<br>
⏳ - Timed out<br>
❓ - Failed to retrieve<br>
⛔ - Access to service denied<br>
❌ - Not supported by your browser
</div>
</div>
</div>
</h2>
</header>
<div id="map"></div>
<a style="height: 4.5vh"></a>
<script type="module">
import { requestLocationPermission } from "./js/location.js";
// TODO: change to real
const threat_x = 39.15294936019142;
const threat_y = -77.20454752375169;
const bluePin = L.icon({
iconUrl: 'assets/bluepin.png',
iconSize: [30, 30],
iconAnchor: [15, 40],
popupAnchor: [0, -40]
});
const redPin = L.icon({
iconUrl: 'assets/redpin.png',
iconSize: [30, 30],
iconAnchor: [15, 40],
popupAnchor: [0, -40]
});
let map;
requestLocationPermission((user_x, user_y) => {
if (user_x === null || user_y === null) {
map = L.map('map').setView([threat_x, threat_y], 14);
} else {
// TODO: change when done with demo code
user_x = 39.149978876760755;
user_y = -77.2059241960242;
const midpoint_x = (user_x + threat_x) / 2;
const midpoint_y = (user_y + threat_y) / 2;
const d = Math.sqrt(Math.pow(user_x - threat_x, 2) + Math.pow(user_y - threat_y, 2));
const zoom = 73769.37975 / d * Math.exp(-4667.97275 * d)
+ 11.83199 * Math.exp(-0.08104 * d); // https://julius.ai/s/84c7b6a6-35e9-4d5b-9661-41660ff7f2a1
map = L.map('map').setView([midpoint_x, midpoint_y], zoom);
const userMarker = L.marker([user_x, user_y], {icon: bluePin}).addTo(map);
userMarker.bindPopup('<b>Current Location</b>');
}
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
const threatMarker = L.marker([threat_x, threat_y], {icon: redPin }).addTo(map);
threatMarker.bindPopup('<b>Detected Threat</b>').openPopup();
});
</script>
</body>
</html>