Skip to content

Commit 4d0b8b8

Browse files
seekayelseekayel
committed
Improved location pings
1 parent cbfb7fc commit 4d0b8b8

File tree

3 files changed

+42
-168
lines changed

3 files changed

+42
-168
lines changed

‎app.js‎

Lines changed: 9 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,16 @@ const express = require('express')
22
const path = require("path");
33
const app = express()
44

5-
// /////////////////////////////////////////////////////////////////////////////
6-
// Logs all requests path and method
5+
// #############################################################################
6+
// Logs all request paths and method
77
app.use(function (req, res, next) {
8+
res.res.set('x-timestamp', Date.now())
9+
res.set('x-powered-by', 'cyclic.sh')
810
console.log(`[${new Date().toISOString()}] ${req.ip} ${req.method} ${req.path}`);
911
next();
1012
});
1113

12-
// /////////////////////////////////////////////////////////////////////////////
14+
// #############################################################################
1315
// This configures static hosting for files in /public that have the extensions
1416
// listed in the array.
1517
var options = {
@@ -18,29 +20,14 @@ var options = {
1820
extensions: ['htm', 'html','css','js','ico','jpg','jpeg','png','svg'],
1921
index: ['index.html'],
2022
maxAge: '1m',
21-
redirect: false,
22-
setHeaders: function (res, path, stat) {
23-
res.set('x-timestamp', Date.now())
24-
}
23+
redirect: false
2524
}
2625
app.use(express.static('public', options))
2726

28-
29-
// /////////////////////////////////////////////////////////////////////////////
30-
// This handles GET requests to the root route '/'
31-
app.get('/', (req, res) => {
32-
console.log('[express-hello-world] root handler called')
33-
res
34-
.set('x-powered-by', 'cyclic.sh')
35-
.send('<h1>Hello World!</h1>')
36-
.end()
37-
})
38-
27+
// #############################################################################
28+
// Catch all handler for all other request.
3929
app.use('*', (req,res) => {
40-
// console.log(`[express-hello-world] * handler ${req.method}:${req.path}`)
41-
res
42-
.set('x-powered-by', 'cyclic.sh')
43-
.json({
30+
res.json({
4431
at: new Date().toISOString(),
4532
method: req.method,
4633
hostname: req.hostname,

‎public/globe.js‎

Lines changed: 32 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
land: { fill: '#32608f' },
4444
borders: { stroke: '#cccccc' }
4545
}));
46-
46+
4747
// This plugin takes lake data from the special
4848
// TopoJSON we're loading and draws them on the map.
4949
function lakes(options) {
@@ -87,154 +87,41 @@
8787
}));
8888
// Set up the globe's initial scale, offset, and rotation.
8989
globe.projection.scale(175).translate([175, 175]).rotate([0, -10, 0]);
90-
90+
9191
let canvas = document.getElementById('rotatingGlobe');
9292
canvas.width = 350;
9393
canvas.height = 350;
9494
// Draw that globe!
9595
globe.draw(canvas);
9696

97-
// Every few hundred milliseconds, we'll draw another random ping.
98-
let colors = ['white'];
99-
//Ohio
100-
setInterval(function() {
101-
let lat = 40.32497;
102-
let lng = -82.83653;
103-
let color = colors;
104-
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 4 });
105-
}, 150);
106-
//Virginia
97+
var locations = [
98+
{"location": "Ohio", "lat": "40.32497", "lng": "-82.83653"},
99+
{"location": "Virginia", "lat": "34.41222", "lng": "-78.47445"},
100+
{"location": "California", "lat": "36.48079", "lng": "-119.33910"},
101+
{"location": "Oregon", "lat": "43.81512", "lng": "-120.78339"},
102+
{"location": "Cape Town, South Africa", "lat": "-33.89178", "lng": "18.43676"},
103+
{"location": "Hong Kong, China", "lat": "22.30548", "lng": "114.17572"},
104+
{"location": "Mumbay, India", "lat": "19.07960", "lng": "72.87293"},
105+
{"location": "Osaka, Japan", "lat": "37.70725", "lng": "135.49608"},
106+
{"location": "Seoul, Korea", "lat": "37.55322", "lng": "126.99229"},
107+
{"location": "Singapore", "lat": "1.35724", "lng": "103.86827"},
108+
{"location": "Sydney", "lat": "-33.81413", "lng": "151.20285"},
109+
{"location": "Canada", "lat": "60.55165", "lng": "-111.21677"},
110+
{"location": "Frankfurt", "lat": "50.16668", "lng": "8.74766"},
111+
{"location": "Ireland", "lat": "53.15114", "lng": "-8.25418"},
112+
{"location": "London", "lat": "51.53359", "lng": "-0.02398"},
113+
{"location": "Milan", "lat": "45.48840", "lng": "9.21345"},
114+
{"location": "Paris", "lat": "48.85658", "lng": "2.35530"},
115+
{"location": "Stockholm", "lat": "59.32891", "lng": "18.06768"},
116+
{"location": "Bahrain", "lat": "35.20769", "lng": "72.54652"},
117+
{"location": "Sao Paulo", "lat": "-23.46811", "lng": "-46.57775"
118+
}
119+
]
120+
121+
locations.forEach(e => {
107122
setInterval(function() {
108-
let lat = 34.41222;
109-
let lng = -78.47445;
110-
let color = colors;
111-
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 4 });
112-
}, 150);
113-
//California
114-
setInterval(function() {
115-
let lat = 36.48079;
116-
let lng = -119.33910;
117-
let color = colors;
118-
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 4 });
119-
}, 150);
120-
//Oregon
121-
setInterval(function() {
122-
let lat = 43.81512;
123-
let lng = -120.78339;
124-
let color = colors;
125-
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 4 });
126-
}, 150);
127-
//Cape Town, Sudafrica
128-
setInterval(function() {
129-
let lat = -33.89178;
130-
let lng = 18.43676;
131-
let color = colors;
132-
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 4 });
133-
}, 150);
134-
//Hong Kong, China
135-
setInterval(function() {
136-
let lat = 22.30548;
137-
let lng = 114.17572;
138-
let color = colors;
139-
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 4 });
140-
}, 150);
141-
//Mumbay, India
142-
setInterval(function() {
143-
let lat = 19.07960;
144-
let lng = 72.87293;
145-
let color = colors;
146-
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 4 });
147-
}, 150);
148-
//Osaka, Japan
149-
setInterval(function() {
150-
let lat = 37.70725;
151-
let lng = 135.49608;
152-
let color = colors;
153-
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 4 });
154-
}, 150);
155-
//Seoul, Corea
156-
setInterval(function() {
157-
let lat = 37.55322;
158-
let lng = 126.99229;
159-
let color = colors;
160-
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 4 });
161-
}, 150);
162-
//Singapore
163-
setInterval(function() {
164-
let lat = 1.35724;
165-
let lng = 103.86827;
166-
let color = colors;
167-
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 4 });
168-
}, 150);
169-
//Sydney
170-
setInterval(function() {
171-
let lat = -33.81413;
172-
let lng = 151.20285;
173-
let color = colors;
174-
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 4 });
175-
}, 150);
176-
//Canada
177-
setInterval(function() {
178-
let lat = 60.55165;
179-
let lng = -111.21677;
180-
let color = colors;
181-
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 4 });
182-
}, 150);
183-
//Frankfurt
184-
setInterval(function() {
185-
let lat = 50.16668;
186-
let lng = 8.74766;
187-
let color = colors;
188-
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 4 });
189-
}, 150);
190-
//Ireland
191-
setInterval(function() {
192-
let lat = 53.15114;
193-
let lng = -8.25418;
194-
let color = colors;
195-
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 4 });
196-
}, 150);
197-
//London
198-
setInterval(function() {
199-
let lat = 51.53359;
200-
let lng = -0.02398;
201-
let color = colors;
202-
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 4 });
203-
}, 150);
204-
//Milan
205-
setInterval(function() {
206-
let lat = 45.48840;
207-
let lng = 9.21345;
208-
let color = colors;
209-
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 4 });
210-
}, 150);
211-
//Paris
212-
setInterval(function() {
213-
let lat = 48.85658;
214-
let lng = 2.35530;
215-
let color = colors;
216-
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 4 });
217-
}, 150);
218-
//Stockholm
219-
setInterval(function() {
220-
let lat = 59.32891;
221-
let lng = 18.06768;
222-
let color = colors;
223-
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 4 });
224-
}, 150);
225-
//Bahrain
226-
setInterval(function() {
227-
let lat = 35.20769;
228-
let lng = 72.54652;
229-
let color = colors;
230-
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 4 });
231-
}, 150);
232-
//Sao Paulo
233-
setInterval(function() {
234-
let lat = -23.46811;
235-
let lng = -46.57775;
236-
let color = colors;
237-
globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 4 });
238-
}, 150);
239-
240-
})();
123+
globe.plugins.pings.add(e.lng, e.lat, { color: ['white'], ttl: 2000, angle: Math.random() * 4 });
124+
}, 150);
125+
});
126+
127+
})();

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<title>Cyclic: Hello World</title>
66
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
77
<link rel="stylesheet" type="text/css" href="/main.css">
8-
<link rel="icon" href="//favicon.ico" />
8+
<link rel="icon" href="/favicon.ico" />
99
</head>
1010
<body>
1111
<div id="hello-wrapper">

0 commit comments

Comments
 (0)