-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
124 lines (110 loc) · 3.05 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
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Where is Contolini?</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<meta itemprop="description" content="Where is Contolini?">
<meta itemprop="image" content="https://i.imgur.com/2o2QlvU.png">
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timeago.js/2.0.3/timeago.min.js"></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#marker {
background-image: url('https://i.imgur.com/2o2QlvU.png');
background-size: cover;
width: 50px;
height: 63px;
cursor: pointer;
}
.mapboxgl-popup {
max-width: 200px;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY29udG9saW5pIiwiYSI6ImNpdXVoajh1cDAzNXUyem1vaGM4NTg3YXAifQ.QKdQeJ6yWjeEm_sznPPHIA';
fetch('https://api.thingspeak.com/channels/176537/feeds.json?results=500')
.then(function(response) {
return response.json();
})
.then(function(json) {
var points = json.feeds.map(function(point) {
return {
coords: [parseFloat(point.field3), parseFloat(point.field2)],
time: point.field1
};
});
draw(points);
});
function draw(points) {
var monument = points[points.length - 1];
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: monument.coords,
zoom: 15
});
map.addControl(new mapboxgl.NavigationControl());
// create the popup
var text = new timeago().format(monument.time) + "<br />" + monument.coords[0] + ", " + monument.coords[1];
var popup = new mapboxgl.Popup({
offset: [0, -30]
})
.setHTML(text);
// create DOM element for the marker
var el = document.createElement('div');
el.id = 'marker';
points = points.map(function(point) {
return point.coords;
});
map.on('load', function() {
map.addSource("route", {
"type": "geojson",
"data": {
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": points
}
}
});
map.addLayer({
"id": "route",
"type": "line",
"source": "route",
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#888",
"line-width": 8
}
});
// create the marker
new mapboxgl.Marker(el, {
offset: [-25, -25]
})
.setLngLat(monument.coords)
.setPopup(popup) // sets a popup on this marker
.addTo(map);
});
}
</script>
</body>
</html>