-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
133 lines (119 loc) · 3.77 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
125
126
127
128
129
130
131
132
133
<!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-size: cover;
width: 50px;
height: 63px;
cursor: pointer;
}
.mapboxgl-popup {
max-width: 200px;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
// Provide the URL of an image you'd like to use for the map marker.
var MARKER_ICON = 'https://i.imgur.com/2o2QlvU.png';
// Change this to your ThingSpeak channel ID.
var THINGSPEAK_CHANNEL_ID = 176537;
// By default it'll show the last 500 locations logged. Change to more or less.
var NUMBER_OF_POINTS = 500;
// You can probably get by without changing this mapbox token but if you notice
// any rate limiting you can change it here.
var MAPBOX_TOKEN = 'pk.eyJ1IjoiY29udG9saW5pIiwiYSI6ImNpdXVoajh1cDAzNXUyem1vaGM4NTg3YXAifQ.QKdQeJ6yWjeEm_sznPPHIA';
fetch('https://api.thingspeak.com/channels/' + THINGSPEAK_CHANNEL_ID + '/feeds.json?results=' + NUMBER_OF_POINTS)
.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.created_at
};
});
draw(points);
});
mapboxgl.accessToken = MAPBOX_TOKEN;
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';
el.style.backgroundImage = 'url(' + MARKER_ICON + ')';
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>