-
Notifications
You must be signed in to change notification settings - Fork 0
/
map.js
111 lines (90 loc) · 3.21 KB
/
map.js
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
// TODO: MOVE THE ACCESS TOKEN INTO A HIDDEN FILE
const myMap = L.map('map').setView([37.7706, -122.3782], 13);
const path = L.polyline([], { color: '#00c0c0' }).addTo(myMap);
L.control.scale().addTo(myMap);
const offlineTiles = L.tileLayer('/static/tiles/{z}/{x}/{y}.png', {
// UPDATE THIS FOR WHICHEVER TILES WE ACTUALLY USE
attribution: 'Attribution',
maxZoom: 15,
tileSize: 256,
});
if (typeof window.MAPBOX_ACCESS_TOKEN != 'string') {
console.warn('No Mapbox access token found. Only offline tiles will work.');
}
const onlineTiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
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>',
maxZoom: 18,
id: 'mapbox/dark-v10',
tileSize: 512,
zoomOffset: -1,
accessToken: window.MAPBOX_ACCESS_TOKEN,
});
onlineTiles.addTo(myMap);
function convertToDegrees(degrees, minutes) {
if (degrees > 0) {
return degrees + minutes / 60;
} else {
return degrees - minutes / 60;
}
}
// https://www.freecodecamp.org/news/debounce-explained-how-to-make-your-javascript-wait-for-your-user-to-finish-typing-2/
function debounce(callback, delay) {
let timeout = null;
return function(...args) {
if (timeout !== null) return;
const debouncedThis = this;
timeout = setTimeout(function() {
callback.apply(debouncedThis, args);
timeout = null;
}, delay);
};
}
const LockControl = L.Control.extend({
initialize(options) {
this.locked = true;
this.mouseDown = false;
},
buttonClicked(e) {
this.locked = true;
e.target.style.display = 'none';
},
onAdd(map) {
this.button = L.DomUtil.create('button');
this.button.style.display = 'none';
this.button.innerHTML = 'Center display';
map.on('mousedown', () => this.mouseDown = true);
map.on('mouseup', () => this.mouseDown = false);
map.on('mousemove', () => {
if (this.mouseDown) {
this.locked = false;
this.button.style.display = 'inline';
}
});
L.DomEvent.on(this.button, 'click', this.buttonClicked, this);
return this.button;
},
onRemove() {
L.DomEvent.off(this.button, 'click', this.buttonClicked, this);
},
});
const lockControl = new LockControl().addTo(myMap);
const updateMap = debounce(obj => {
const lat = convertToDegrees(obj.data.position.latDeg, obj.data.position.latMin),
long = convertToDegrees(obj.data.position.longDeg, obj.data.position.longMin);
path.addLatLng([lat, long]);
if (lockControl.locked) {
myMap.setView([lat, long]);
}
}, 1000);
const ws = new WebSocket('ws://localhost:8000');
ws.onmessage = e => {
// console.log('onmessage', e.data);
try {
const obj = JSON.parse(e.data);
if (obj.type == 'json' && obj.data.hasOwnProperty('position')) {
updateMap(obj);
}
} catch (e) {
console.log(`error: ${e}`);
}
};