I’ve got a weather website, which misses lightning data. I found a data source from Blitzortung.org wich contains the Lat, Lon and time info of a lightning strike. How do I get this on Google Maps?
I want the data to be realtime, just like on blitzortung.org. It should be displayed on the map, preferably as a red or yellow dot, changing color as it ages (probably a JavaScript or PHP function that can edit css to do this) and of course on the right place.
I unfortunately had no experience with JSON and SQL, but don’t call me lazy because I don’t have the time to really learn this. I’ve got the map and the radar overlay which updates every 5 minutes: http://met.nl.eu.org/radar.html
this is the data source: http://www.lightningmaps.org/live/ I can use this source, provided that I will not use it for profit and that I add link to Blitzortung.org
So my main question is, how do I get Google maps to interpret the coords in the JSON file as places on the map, and draw a marker on the place, which changes color as it ages?
server:
Ubuntu with Apache,
SQL databases,
PHP5
and python for image processing
Edit: this script might help a bit more:
JavaScript
x
420
420
1
//2
//3
//4
var maps = {5
0: { "west": -180.0, "east": 180.0, "north": 90.0, "south": -60.0, "projection": 1, "width": 925, "height": 925, "strike_type": 0, "detector_type": 0, region: 0 },6
10: { "west": -20.0, "east": 44.0, "north": 71.5, "south": 23.1, "projection": 1, "width": 925, "height": 925, "strike_type": 0, "detector_type": 2, region: 1 },7
11: { "west": 0.0, "east": 35.0, "north": 71.5, "south": 48.5, "projection": 1, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 1 },8
12: { "west": -15.0, "east": 7.0, "north": 60.0, "south": 47.0, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 1 },9
13: { "west": -12.0, "east": 20.0, "north": 56.0, "south": 33.6, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 1 },10
14: { "west": 12.0, "east": 37.0, "north": 48.0, "south": 28.5, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 1 },11
15: { "west": 10.0, "east": 30.0, "north": 56.0, "south": 43.1, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 1 },12
16: { "west": 2.0, "east": 18.0, "north": 55.5, "south": 45.3, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 1 },13
20: { "west": 110.0, "east": 180.0, "north": 10.0, "south": -51.6, "projection": 0, "width": 925, "height": 925, "strike_type": 0, "detector_type": 2, region: 2 },14
21: { "west": 156.0, "east": 186.0, "north": -25.0, "south": -48.8, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 2 },15
22: { "west": 135.0, "east": 159.0, "north": -24.0, "south": -43.8, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 2 },16
30: { "west": -130.0, "east": -60.0, "north": 62.5, "south": 2.3, "projection": 1, "width": 925, "height": 925, "strike_type": 0, "detector_type": 2, region: 3 },17
31: { "west": -108.0, "east": -92.0, "north": 38.0, "south": 24.3, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 3 },18
32: { "west": -92.0, "east": -76.0, "north": 36.0, "south": 24.0, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 3 },19
33: { "west": -85.0, "east": -70.0, "north": 46.0, "south": 34.5, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 3 },20
34: { "west": -105.0, "east": -85.0, "north": 50.0, "south": 35.3, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 3 },21
35: { "west": -127.0, "east": -105.0, "north": 45.0, "south": 27.3, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 3 },22
36: { "west": -86.0, "east": -60.0, "north": 31.0, "south": 6.4, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 3 },23
40: { "west": 85.0, "east": 155.0, "north": 58.0, "south": -4.5, "projection": 1, "width": 925, "height": 925, "strike_type": 0, "detector_type": 2, region: 4 },24
41: { "west": 125.0, "east": 148.0, "north": 46.3, "south": -5.0, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 4 },25
50: { "west": -102.0, "east": -22.0, "north": 16.0, "south": -57.0, "projection": 1, "width": 925, "height": 925, "strike_type": 0, "detector_type": 2, region: 5 },26
51: { "west": -84.0, "east": -63.0, "north": 16.0, "south": 28.0, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 5 },27
60: { "west": -25.0, "east": 60.0, "north": 40.0, "south": -38.5, "projection": 0, "width": 925, "height": 925, "strike_type": 0, "detector_type": 2, region: 6 },28
61: { "west": 14.0, "east": 34.0, "north": -20.0, "south": -37.5, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1, region: 6 } 29
};30
31
var map = maps [page_0];32
33
var Kreis_green = new Image();34
Kreis_green.src = "../../Images/Kreis_green.png";35
var Kreis_gray = new Image();36
Kreis_gray.src = "../../Images/Kreis_gray.png";37
var D_g = new Image();38
D_g.src = "../../Images/Antenne_green.png";39
var D_r = new Image();40
D_r.src = "../../Images/Antenne_gray.png";41
var S_g = new Image();42
S_g.src = "../../Images/Lautsprecher_green.png";43
var S_r = new Image();44
S_r.src = "../../Images/Lautsprecher_gray.png";45
46
var audiocnt= 0;47
var audiocntmax= 10;48
var AudioData= 'data:audio/x-wav;base64,UklGRlQOAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YTAOAAAAAAAA//8CAP7/AQAAAP7/AwD+/wEA//8BAP//AQAAAP//AQAAAP//AQAAAAAAAAAAAP//AwD8/wUA+v8GAPv/BAD9/wEAAQD+/wIA/////wIA/v8CAP//AAD//wIA//8BAP7/AgD+/wMA/f8CAP//AQD+/wIA/v8DAP3/AgD+/wIA//8AAAAAAAABAP//AAAAAAAAAQD//wAAAAABAP//AAABAP7/AgD/////AgD//wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//8CAP7/AgD+/wIA/v8CAP7/AgD+/wIA/v8CAP7/AgD+/wIA/v8CAP7/AgD+/wMA/P8EAP3/AgAAAP7/AwD9/wIAAAD+/wQA+/8EAP3/AgAAAP//AAABAP7/AwD+/wAAAQD//wEA//8BAP//AQAAAP7/AwD+/wAAAgD9/wIAAAD+/wMA/f8CAP//AQD//wAAAQD//wEA//8AAAIA/f8DAP3/AgD//wEA//8BAP//AAACAP3/BAD7/wUA/P8EAPz/AwD+/wEAAAD//wIA/f8EAPv/BQD7/wUA/P8DAP7/AQD//wEAAAD//wIA/f8DAP7/AQD//wEA//8BAP//AAABAP//AQD//wEA/v8DAP3/AwD+/wAAAAABAP//AQD/////AwD9/wIA/////wIA//8AAAEA/v8CAP//AAABAP//AQD//wAAAQD+/wMA/P8FAPv/AwD/////AwD8/wQA/f8BAAEA/f8FAPr/BgD6/wYA+/8EAPz/AwD//wAAAQD+/wEAAQD+/wIA/v8CAP//AAABAP7/AgD//wEA//8BAP7/AgD//wEA//8AAAEA//8BAP//AAABAAAA//8AAAEA//8BAP//AAAAAAEA/v8DAPz/AwD+/wEAAAAAAP//AgD9/wMA/v8BAAAAAAAAAP//AgD+/wIA/////wIA//8AAAEA/v8CAP7/AgD//wAAAQD9/wQA/P8EAP3/AQAAAAAAAAAAAAAAAAAAAAEA/v8CAP//AAABAP7/AgD+/wMA/P8DAP////8CAP7/AQABAP3/BAD7/wUA/f8BAAAAAAD//wIA/f8DAP7/AgD+/wIA/f8EAP3/AQAAAAAAAAAAAAAA/v8DAP7/AQAAAP//AAABAP//AQAAAP//AQD//wEAAAD//wEAAAD//wEA//8BAAAAAAD//wEAAAAAAAAAAAAAAAAAAQD9/wQA/P8EAP3/AQAAAAAAAAAAAAAAAAAAAAEA/v8CAP//AAAAAAEA//8BAP7/AgD+/wIA//8AAAAA//8CAP7/AgD+/wEAAAABAP7/AgD+/wIApf+6/8b/w/+4/7v/uf+7/8f/1f/+/ygATwBzAHEAeACDAIYAjQCPAI4AlwCkAMgA3QD1AP4AFwE5AVIBZAFUAXgBoQHIAecB2AHEAZcBnQGbAZYBpQG/AdoB2wHhAegB8AH6AQQCFQIXAhUCMgJGAkICSwJTAnQCnALLAuMC2ALiAt8C5gLkAv8CEQMkAzADJwMRAwIDAgP3AuQC7ALrAvwCEQMbAw4DGQMlAzcDJAMNA/kC/wL7AhUDIAMfAxIDGwMYA/sCAQMGAw8DGgMoAywDSQN4A3wDdwOAA5oDgQOCA3UDYANxA5sDsQOjA78DzQPQA8wDtwOsA78DzgPMA9EDzAPbAwkENQQgBPYD1wOtA6wD2wMBBBAEPQRcBH0ElASeBIQEjgSjBJIEcgRgBE4EWAR6BJUEoASyBKsElARvBHQEbwR1BH4EkASXBKMElAR1BHEEiASRBGQERwSEBMMEbwTcAwwE0gQIBVIEpQOoAzoEyATcBJMErgQ/BaYFuQXrBf8FTQUiBHkDowP+A4YEvQXHBn0GdwXWBFYF5wV0BOkCrgLTAz4GSgZWBJAEoQQBB1MHmgOxAyUBmAQiBhcFOgSNAegFqAaiCdQHbAUWA2EB7gQEA8gL4BhhC2HTcrCr5844zDJM8JHoqxtBKE0LbAEFDB38juMY4B3mEvdvEh4e8gEK8GcKaxvKBm3yTfqqBlv+zfXI/nUE8f7U/hUFvgGY+R8AeQsxCIj9pADBC+kJKQEsAeMGTQTf/wMGHw3eA0X4Tv/tC6oKvvqk8Kf4VwIe/h73Xf2BCxsPBwSB/dAFiguTAdT1tffh/s7+j/54BscJYgJbApgH5gLK/RMCNgZhAbr8fAB6BP8DagQ/BfQBhf1p/WsBrwOrAr7/2/z4/QoDaAX2AfP92/th/n8DhAAh+CP5fgNOCJICwf2A/qj9MPo++qD/wgIyADr/JwNSBK7/Uvz1/tkAaf/W/0AB7v4Y/eMCHwhTA2P8Sv6gApwCHwEl/3P98P6QBAgGav+I+3UAIASm/6P7M/7xAMj/+P5DAFoCVAPo/0b7J/weAKMAif4G/ioAuAFLAqgBH/+D/ML87v+kAocBQ/32/IAA6QCl/Zz8AQBJBLsEjwCA++/7cwKOBMb+6vsSAAgCJ/+g/RX/8gBsAfb/wf7a/0ACzQGa/nr+bQLiA+H/A/3t/hwBAwAC/gn/6ACkAD8AAQGwAKL/EgDxACv/T/3Z/gUAA/8b/q//JAEeADT/SgCcAKz9+vvT/mkBQP+o/dD/bAAk/qn9BQAGAUv/IP6j/r3+PP5P/6UAMgAw/1j/vf9A/7r+rP4t/xEAbgC+/6T+Df4v/6wApf8Z/aT9iQAyAXX/u/4N/0b/Y/8qAG4AzP5D/ab9UP4Q/kX+aP8HAVgBm/8y/jP/of9s/oT+Vv9h/v39Q/9bAAYApv5o/nz/8f92/1P+U/3F/Rr/qv9j/oT9Rf+wAAX/3PwF/R7/ov9j/Wv8i/45ANX/gv2X+9D88f74/gP9ZvvS/ID/kv6e/AP+6f+l/s77RftD/Uv/AwAQ/2X9rvyW/Kv84Pxv/Tr+zf1O/NP7yf1b/4n+iv06/YL9xf3v/Xb9T/xw/FH+5v6O/an8Y/2L/qv+nf3U/Iz9vf7s/sr9qfyE/Wb+cv3y/GX+d/9+/nX9y/2H/oD+p/1i/TD+PP5H/Sj94P1Y/v39fP0g/kH+If33/Pr95f6V/7D+Jf27/Rb/+P0x/BP9Ff5P/QD94/3K/un+o/2c/Ez9c/6I/nD9Y/23/on/2f7k/T7+6v7b/vn+rP4t/df8Mv6T/lv9Sf0e//H/Xf6O/WL/qP/P/Tb9pf45/4H+9P0s/gX/bf9r/8f+kv27/Rv/wv9F/1z+ff7y/sX+U/8wAND/AP+2/pX+s/6N/xQARv++/uf+8f64/mX/aQA6AGD/o/6X/hj/EADEAAYA3/4p/wkA3f+7/wcATQA1AO//2//W/9H/y/+7/6n/u/8eAH4ABgBo/0n/vP8+ABcAof+e/zMAtgCRAMn/l//a/+f/CACVAIcADwDt/ywAMgASAC8AYQBkAHUAiwB/ADEA7//n/ysAOgAKAAgAiADLADsA8P9gAN8ApAAyAG0A2gCfAPX/u/8RALAA0gBsADcAvgAIAV0AkP/a/6cA7wC0AIAAPAD/////TwB7AFgAFwAbACsALwAKAOL/KgC0ALUAWgAkAB8AGAArAG4AiQA0ADUAcgCGAJAAvwClAEMANAB6AKUAhwCiANMAhwAdAP7/AQABAP7/AQAAAAAAAAD//wEAAAAAAAAAAAAAAP//AgD+/wMA/f8CAP7/AgD//wAAAQD+/wIA/v8CAP7/AQAAAP//AQD//wEA//8BAP//AQD//wEA//8BAP//AQAAAAAA//8BAP//AgD//wAA//8CAP7/AgD+/wIA/v8CAP//AAAAAAAAAAAAAAIA/P8EAP3/AQABAP////8DAPz/BAD8/wMA/v8CAP7/AQD//wEA//8CAP3/AwD9/wMA/f8DAP3/AgAAAP7/AwD9/wEAAQD+/wMA/f8CAP//AAABAP7/AwD9/wIA//8AAAAAAAABAP7/AwD8/wMA//8BAP7/AgD+/wEAAAD//wIA/v8BAP//AQD//wIA/f8DAP7/AAACAP3/AgAAAP//AgD9/wIAAAD+/wQA+/8FAPz/AgD//wEA//8CAP3/AgD//wAAAgD8/wQA/P8FAPv/BQD6/wYA/P8DAP7/AQAAAP//AgD9/wQA/f8BAAAAAAAAAAAAAAD//wIA/v8BAAAA//8CAP3/BAD8/wMA/v8BAP//AgD+/wEAAAD+/wQA/P8EAPz/BAD8/wMAAAD+/wIA//8AAAEA//8AAAEA//8BAAAA//8BAP//AgD/////AgD+/wEAAAAAAP//AgD9/wIAAAD//wAAAQD//wAAAgD8/wQA/v8AAAIA/f8DAP3/AwD9/wMA/f8DAP3/AgD//wAAAQD+/wMA/P8EAP3/AgD//wAAAQD+/wMA/f8CAP//AAABAP//AQD+/wIA//8AAAEA/v8CAP//AAAAAAAAAAABAP////8BAAAAAAAAAAAAAAD//wIA/v8CAP//AAAAAAAAAQD+/wMA/P8EAP3/AgD//wAAAQD+/wIA//8AAAEA/v8DAPz/BAD8/wQA/f8CAP//AAABAP7/AgD//wEA//8AAAAAAQD//wEA/v8CAP//AQD//wEA//8BAP//AQD//wIA/f8DAP7/AQAAAP//AQAAAAAAAAAAAP//AwD8/wQA/f8CAP//AAAAAAAAAQD+/wIA/////wIA/v8BAAAA//8CAP3/BAD7/wUA/P8CAAAA//8CAP3/AwD+/wAAAgD9/wMA/v8AAAEA//8BAP//AQD//wEA//8AAAEA//8BAAAA/v8DAP3/AwD+/wEAAAAAAAAAAQD9/wQA/P8EAP3/AgD+/wEAAQD+/wMA/P8EAP3/AgD//wAAAAAAAAAAAQD+/wIA/////wIA/v8DAP3/AgD+/wEAAQD+/w==';49
var myAudio = new Array (new Audio(AudioData),50
new Audio(AudioData),51
new Audio(AudioData),52
new Audio(AudioData),53
new Audio(AudioData),54
new Audio(AudioData),55
new Audio(AudioData),56
new Audio(AudioData),57
new Audio(AudioData),58
new Audio(AudioData) );59
60
var DetectorImages = new Array(new Image(),new Image(),new Image());61
DetectorImages [0].src = "../Images/d00g.png";62
DetectorImages [1].src = "../Images/d02g.png";63
DetectorImages [2].src = "../Images/d03g.png";64
65
var DetectorImage = DetectorImages [map ['detector_type']];66
67
var StrokeImages = new Array(new Image(),new Image(),new Image(),new Image(),new Image(),new Image(),new Image(),new Image());68
StrokeImages [0].src = "../Images/s02.png";69
StrokeImages [1].src = "../Images/s03.png";70
StrokeImages [2].src = "../Images/s04.png";71
StrokeImages [3].src = "../Images/s05.png";72
StrokeImages [4].src = "../Images/s06.png";73
StrokeImages [5].src = "../Images/s07.png";74
StrokeImages [6].src = "../Images/s09.png";75
StrokeImages [7].src = "../Images/s99.png";76
77
var Buffer = new Image();78
var Background = document.getElementById('lb');79
var Canvas = document.getElementById('Bild_Canvas');80
var Context = Canvas.getContext('2d');81
var Delay = document.getElementById('Delay');82
var Strikes = document.getElementById('Strikes');83
var Detectors = document.getElementById('Detectors');84
var Sound = document.getElementById('Sound');85
86
Delay.innerHTML = 'waiting';87
88
var Type = 0;89
if (parseInt(page_0/10)*10 == page_0) {90
Type= 1; }91
92
var first_Stroke = 0;93
var display_Strikes = true;94
var display_Detectors = false;95
var use_Sound = false;96
97
if (read_Cookie ('displayStrikes') != undefined) {98
display_Strikes = eval(read_Cookie ('displayStrikes')); }99
if (read_Cookie ('displayDetectors') != undefined) {100
display_Detectors = eval(read_Cookie ('displayDetectors')); }101
if (read_Cookie ('useSound') != undefined) {102
use_Sound = eval(read_Cookie ('useSound')); }103
104
var Server;105
try {106
// Mozilla, Opera, Safari sowie Internet Explorer (ab v7)107
xmlHttp = new XMLHttpRequest(); }108
catch(e) {109
try {110
// MS Internet Explorer (ab v6)111
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }112
catch(e) {113
try {114
// MS Internet Explorer (ab v5)115
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); }116
catch(e) {117
xmlHttp = null;118
xmlHttp2 = null; } } }119
120
var Stations;121
if (xmlHttp) {122
xmlHttp.onreadystatechange = function () {123
if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) {124
Stations= eval('(' + xmlHttp.responseText + ')');125
for (var s in Stations) {126
Stations[s][1]= projection_x (map["west"],map["east"],map["width"],Stations[s][1]);127
if (map['projection'] == 0) {128
Stations[s][0]= mercator_y (map["west"],map["east"],map["north"],map["height"],Stations[s][0]); }129
else {130
Stations[s][0]= miller_y (map["west"],map["east"],map["north"],map["height"],Stations[s][0]); } } } }131
xmlHttp.open('GET', '/Data/stations.json', true);132
xmlHttp.send(null);133
}134
135
/****************************************************************/136
/****************************************************************/137
/****************************************************************/138
139
function load()140
{141
}142
143
setInterval(newBackground,63000);144
setInterval(drawStrikes,49);145
146
if (display_Strikes) {147
Strikes.src= Kreis_green.src; }148
else {149
Strikes.src= Kreis_gray.src; }150
if (display_Detectors) {151
Detectors.src= D_g.src; }152
else {153
Detectors.src= D_r.src; }154
if (use_Sound) {155
Sound.src= S_g.src; }156
else {157
Sound.src= S_r.src; }158
159
var ws;160
161
if ("WebSocket" in window) {162
163
var rnd;164
try {165
rnd= parseInt (Math.random()*10);166
Delay.innerHTML = 'first try';167
ws = new WebSocket("ws://websocketserver.blitzortung.org:801"+rnd); }168
catch (e) {169
rnd= parseInt (Math.random()*10);170
Delay.innerHTML = 'second try';171
ws = new WebSocket("ws://websocketserver.blitzortung.org:801"+rnd); }172
173
Delay.innerHTML = 'connected';174
175
ws.onopen = function()176
{177
var start_time= (Date.now()*1000000)-60000000000;178
ws.send('{"west":'+map['west']+',"east":'+map['east']+',"north":'+map['north']+',"south":'+map['south']+',"time":'+start_time+'}');179
};180
181
ws.onmessage = function (evt) 182
{ 183
var Strikes= eval('('+evt.data+')');184
185
if ( ('ddelay' in Strikes) &&186
('lat' in Strikes) &&187
('lon' in Strikes) &&188
('sta' in Strikes) &&189
('dev' in Strikes) ) {190
191
if ( (map ['west'] <= Strikes ['lon']) &&192
(Strikes ['lon'] <= map ['east']) &&193
(map ['south'] <= Strikes ['lat']) &&194
(Strikes ['lat'] <= map ['north']) ) {195
196
var Image;197
if (map['strike_type'] == 0) {198
Image= StrokeImages[parseInt(Math.random()*6)];199
}200
else if (map['strike_type'] == 1) {201
Image= StrokeImages[6];202
}203
else {204
Image= StrokeImages[7];205
}206
207
var Detectors = new Array();208
if (display_Detectors) {209
for (var s in Strikes ['sta'][1]) {210
var d=Strikes ['sta'][1][s];211
var Detector = new Array(Stations [d][0],Stations [d][1])212
Detectors.push(Detector);213
if (Detectors.length >= 100) {214
Detector.shift();215
}216
}217
}218
219
var x= projection_x (map["west"],map["east"],map["width"],Strikes ['lon']);220
var y= projection_y (map["west"],map["east"],map["north"],map["height"],Strikes ['lat'],map['projection']);221
222
var Datum = new Date();223
var Time = Datum.getTime();224
first_Stroke = new Stroke (Context,x,y,Image,Detectors,Strikes ['sta'][0],Time,first_Stroke,Strikes ['dev']);225
if (use_Sound) {226
myAudio [audiocnt++].play();227
if (audiocnt >= audiocntmax) {228
audiocnt= 0;229
}230
}231
232
Delay.innerHTML = 'Delay: '+Strikes['delay']+' s';233
}234
}235
else if ( ('delay' in Strikes) &&236
('latitude' in Strikes) &&237
('longitude' in Strikes) &&238
('signals_used' in Strikes) &&239
('deviation' in Strikes) ) {240
if ( (map ['west'] <= Strikes ['longitude']) &&241
(Strikes ['longitude'] <= map ['east']) &&242
(map ['south'] <= Strikes ['latitude']) &&243
(Strikes ['latitude'] <= map ['north']) ) {244
245
var Image;246
if (map['strike_type'] == 0) {247
Image= StrokeImages[parseInt(Math.random()*6)];248
}249
else if (map['strike_type'] == 1) {250
Image= StrokeImages[6];251
}252
else {253
Image= StrokeImages[7];254
}255
256
var Detectors = new Array();257
if (display_Detectors) {258
for (var s in Strikes ['signals_used']) {259
var d= Strikes ['signals_used'][s];260
var Detector = new Array(Stations [d][0],Stations [d][1])261
Detectors.push(Detector);262
if (Detectors.length >= 1000) {263
Detector.shift();264
}265
}266
}267
268
var x= projection_x (map["west"],map["east"],map["width"],Strikes ['longitude']);269
var y= projection_y (map["west"],map["east"],map["north"],map["height"],Strikes ['latitude'],map['projection']);270
271
var Datum = new Date();272
var Time = Datum.getTime();273
first_Stroke = new Stroke (Context,x,y,Image,Detectors,0,Time,first_Stroke,Strikes ['deviation']);274
if (use_Sound) {275
myAudio [audiocnt++].play();276
if (audiocnt >= audiocntmax) {277
audiocnt= 0;278
}279
}280
281
Delay.innerHTML = 'Delay: '+Strikes['delay']+' s';282
}283
}284
};285
286
ws.onclose = function()287
{ 288
};289
290
}291
else {292
alert("WebSocket NOT supported by your Browser!"); }293
294
function unload()295
{296
}297
298
function StrikesOnOff()299
{300
if (display_Strikes) {301
Strikes.src= Kreis_gray.src;302
display_Strikes= false; }303
else {304
Strikes.src= Kreis_green.src;305
display_Strikes= true; }306
write_Cookie('displayStrikes', display_Strikes, 365);307
}308
309
function DetectorsOnOff()310
{311
if (display_Detectors) {312
Detectors.src= D_r.src;313
display_Detectors= false; }314
else {315
Detectors.src= D_g.src;316
display_Detectors= true; }317
write_Cookie('displayDetectors', display_Detectors, 365);318
}319
320
function SoundOnOff()321
{322
if (use_Sound) {323
Sound.src= S_r.src;324
use_Sound= false; }325
else {326
Sound.src= S_g.src;327
use_Sound= true; }328
write_Cookie('useSound', use_Sound, 365);329
}330
331
function newBackground()332
{333
var Datum = new Date();334
var Time = Datum.getTime();335
var t = Math.ceil(Time/60000);336
Buffer.src= Bild_url+'?t='+String(t++);337
Buffer.onload= function () {338
Canvas.style.backgroundImage= "url(" + this.src + ")"; }339
}340
341
function drawStrikes()342
{343
var Datum = new Date();344
var Time = Datum.getTime();345
346
Context.clearRect(0,0,Canvas.width,Canvas.height)347
348
var s = first_Stroke;349
while (s != 0) {350
if (s.Time > Time-600000) {351
s.draw();352
s= s.next; }353
else {354
s.next = 0;355
s = 0; } }356
}357
358
function Stroke (Context, x, y, Image, Detectors, st_used, Time, Next, Deviation)359
{360
this.Context = Context;361
this.Context.lineWidth = 1.0;362
this.x = parseInt(x);363
this.y = parseInt(y);364
this.Image = Image;365
this.Detectors = Detectors;366
this.st_used = st_used;367
this.Time = Time;368
this.next = Next;369
this.deviation = Deviation;370
this.cnt = 0;371
this.ray_cnt = 40;372
this.detector_cnt = 200;373
};374
375
Stroke.prototype =376
{377
draw:378
function()379
{380
var alpha1= (this.ray_cnt-this.cnt)/10;381
if (alpha1 > 1) {382
alpha1 = 1; }383
var alpha2= alpha1*0.7;384
385
if (this.cnt < this.detector_cnt) {386
if ((display_Detectors)&&(this.Detectors.length > 0)) {387
for (var i=this.st_used; i<this.Detectors.length; i++) {388
var y = this.Detectors[i][0];389
var x = this.Detectors[i][1];390
if (this.cnt < this.ray_cnt) {391
this.Context.beginPath()392
this.Context.moveTo(this.x,this.y);393
this.Context.lineTo(x,y);394
this.Context.strokeStyle= 'rgba(0,255,128,'+alpha2.toString()+')';395
this.Context.stroke(); }396
this.Context.drawImage(DetectorImage,parseInt(x-DetectorImage.width/2),parseInt(y-DetectorImage.height/2)); }397
for (var i=0; i<this.st_used; i++) {398
var y = this.Detectors[i][0];399
var x = this.Detectors[i][1];400
if (this.cnt < this.ray_cnt) {401
this.Context.beginPath()402
this.Context.moveTo(this.x,this.y);403
this.Context.lineTo(x,y);404
this.Context.strokeStyle= 'rgba(64,192,255,'+alpha2.toString()+')';405
this.Context.stroke(); }406
this.Context.drawImage(DetectorImage,parseInt(x-DetectorImage.width/2),parseInt(y-DetectorImage.height/2)); } }407
408
if (display_Strikes) {409
this.Context.beginPath();410
this.Context.arc(this.x,this.y,this.cnt,0,2*Math.PI,1);411
this.Context.strokeStyle= 'rgba(255,255,255,'+alpha1.toString()+')';412
this.Context.stroke(); } }413
414
this.Context.drawImage(this.Image,parseInt(this.x-this.Image.width/2),parseInt(this.y-this.Image.height/2));415
416
if (this.cnt < this.detector_cnt) {417
this.cnt++; }418
},419
}420
Just ignore the audio part, as I will not need it.
Edit: I’ve changed my needs. The first priority is to get the lightning strikes on the right place. The changing of color and stuff might come in a later point of the development but for now just the data on the map is fine.
Advertisement
Answer
1) Create a PHP script that will open and read the json from the live URL:
File: get_lightnings.php
JavaScript
1
7
1
<?php2
3
header('Content-Type: application/json');4
echo file_get_contents("http://www.lightningmaps.org/live/");5
6
?>7
This will read and echo the json.
2) Query that URL with javascript by using AJAX. Here is an example map script that will query the PHP file with jQuery.ajax() and create a marker for each lightning:
JavaScript
1
28
28
1
function initialize() {2
3
var mapOptions = {4
zoom: 2,5
center: new google.maps.LatLng(0, 0),6
mapTypeId: google.maps.MapTypeId.ROADMAP7
};8
9
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);10
11
$.ajax({12
dataType: "json",13
url: "relative/path/to/get_lightnings.php"14
}).done(function (data) {15
16
data.d.forEach(function (lightning) {17
18
new google.maps.Marker({19
position: new google.maps.LatLng(lightning.lat, lightning.lon),20
map: map,21
title: 'Lightning'22
});23
});24
});25
}26
27
google.maps.event.addDomListener(window, 'load', initialize);28
Below is the full HTML page for you can copy it right away and test it.
JavaScript
1
56
56
1
<!DOCTYPE html>2
<html>3
<head>4
<title>Lightnings</title>5
<meta charset="UTF-8">6
<meta name="viewport" content="width=device-width, initial-scale=1.0">7
8
<style>9
#map-canvas {10
height: 400px;11
}12
</style>13
</head>14
<body>15
16
<div id="map-canvas"></div>17
18
<script src="http://code.jquery.com/jquery-latest.js"></script>19
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>20
<script type="text/javascript">21
22
function initialize() {23
24
var mapOptions = {25
zoom: 2,26
center: new google.maps.LatLng(0, 0),27
mapTypeId: google.maps.MapTypeId.ROADMAP28
};29
30
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);31
32
// Query and plot the data once the map is ready33
google.maps.event.addListenerOnce(map, 'idle', function() {34
35
$.ajax({36
dataType: "json",37
url: "get_lightnings.php"38
}).done(function(data) {39
40
data.d.forEach(function(lightning) {41
42
new google.maps.Marker({43
position: new google.maps.LatLng(lightning.lat, lightning.lon),44
map: map45
});46
});47
});48
});49
}50
51
google.maps.event.addDomListener(window, 'load', initialize);52
53
</script>54
</body>55
</html>56
This was tested and is working fine.