-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
113 lines (104 loc) · 3.58 KB
/
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
109
110
111
112
113
<!DOCTYPE html>
<html>
<head>
<title>View Animation</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.18.2/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="http://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="http://openlayers.org/en/v3.18.2/build/ol.js"></script>
<style type="text/css">
html, body, #map {
margin: 0;
width: 100%;
height: 100%;
}
#text {
position: absolute;
bottom: 1em;
left: 1em;
width: 512px;
z-index: 20000;
background-color: white;
padding: 0 0.5em 0.5em 0.5em;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var view = new ol.View({
// the view's initial state
center: ol.proj.fromLonLat([0,
0]),
zoom: 6
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
preload: 4,
source: new ol.source.OSM()
}),
new ol.layer.Tile({
preload: 4,
source: new ol.source.XYZ({
url: 'http://t1.openseamap.org/seamark/{z}/{x}/{y}.png'
})
})
],
// Improve user experience by loading tiles while animating. Will make
// animations stutter on mobile or slow devices.
loadTilesWhileAnimating: true,
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: view
});
var boat_marker = new ol.Feature(new ol.geom.Point(0, 0));
document.addEventListener("DOMContentLoaded", function() {
'use strict';
var protocol = window.location.protocol == "https:" ? "wss" : "ws";
var host = window.location.hostname;
var port = (location.port ? ':'+location.port: '');
var ws = null;
function start(){
ws = new WebSocket(protocol + "://" + host + port + "/ws");
// Ensure we close the ws
window.onbeforeunload = function () {
ws.onclose = function () { }; // disable onclose handler first
ws.close();
};
ws.onopen = function(){
console.log('connected!');
};
ws.onmessage = function(e){
console.log(e.data);
};
ws.onclose = function(){
console.log('closed!');
check();
};
ws.onmessage = function (event) {
var sailsd_data = JSON.parse(event.data);
console.log(sailsd_data);
var loc = ol.proj.fromLonLat([sailsd_data.longitude,
sailsd_data.latitude]);
var pan = ol.animation.pan({
duration: 100,
source: /** @type {ol.Coordinate} */ (view.getCenter())
});
map.beforeRender(pan);
view.setCenter(loc);
};
}
function check(){
if(!ws || ws.readyState === WebSocket.CLOSED) start();
}
start();
setInterval(check, 5000);
});
</script>
</body>
</html>