[future request] lightning map

[SA7BNT]

Hallo,

is it possible to add/show thunderstorms on the map?? Maybe through lightningmaps??

[JaraLowell]

Because i wanted it to, i made an try at this
Example image https://gyazo.com/ffcae5233062694488f77351520acd74

some where in the beginning where we // Define our global variables
let BlitzorgFeatures = new ol.source.Vector();
let BlitzorgLayer;

and we need a Layer to draw on for this in function initMap() {
BlitzorgLayer = new ol.layer.Vector({
name: 'blitzorgPlane',
type: 'overlay',
//title: 'blitzorg Blitz',
source: BlitzorgFeatures,
declutter: false,
zIndex: 2,
renderBuffer: renderBuffer,
});
layers.push(BlitzorgLayer);

in function setIntervalTimers() we need to add
// blitzorg
WsConnect();
window.setInterval(UpdateBlitz, 1000);`

and now some new code for under that function so in-between } and let djson;
let ws;
let markerblitz = new ol.style.Style({image: new ol.style.Icon(({scale: 0.1, offset: [-10, -10], src: "images/lightningz.png", opacity: 1.0}))});
let markerclear1 = new ol.style.Style({image: new ol.style.Circle({radius: 2.5, snapToPixel: false, fill: new ol.style.Fill({color: 'rgba(255,255,0,0.6)'})})});
let markerclear2 = new ol.style.Style({image: new ol.style.Circle({radius: 2.5, snapToPixel: false, fill: new ol.style.Fill({color: 'rgba(255,140,0,0.6)'})})});
let markerclear3 = new ol.style.Style({image: new ol.style.Circle({radius: 2.5, snapToPixel: false, fill: new ol.style.Fill({color: 'rgba(178,0,0,0.6)'})})});

function WsConnect() {
if(ws) WsDisconnect();
console.log("connecting to blitzortung...");
let hosts = ["ws1", "ws3", "ws7", "ws8"]
ws = new WebSocket("wss://" + hosts[Math.floor(Math.random() * 4)] + ".blitzortung.org");
ws.binaryType = "arraybuffer";
ws.onopen = WsOpen;
ws.onmessage = WsMessage;
ws.onerror = WsError;
ws.onclose = WsClose;
}

function WsOpen() {
ws.send("{"a":111}");
console.log("websocket to blitzortung connected!");
// PingPlaneFeatures.clear();
}

/* blitzortung shifts its bits in the data so lets unshift it */
function decode(b) {
var a, e = {}, d = b.split(""), c = d[0], f = c, g = [c], h = 256, o = h;
for (b = 1; b < d.length; b++) {
a = d[b].charCodeAt(0), a = h > a ? d[b] : e[a] ? e[a] : f + c, g.push(a), c = a.charAt(0), e[o] = f + c, o++, f = a;
}
return g.join("")
}

function UpdateBlitz() {
var features = BlitzorgFeatures.getFeatures();
if (features != null && features.length > 0) {
var now = new Date().getTime();
for (let x in features) {
if((features[x].lastupdate + 360000) < now) BlitzorgFeatures.removeFeature(features[x]); else {
if(features[x].pixelstat == 2 && now - properties > 150000) { features[x].setStyle(markerclear3); features[x].pixelstat = 3; }
else if(features[x].pixelstat == 1 && now - properties > 75000) { features[x].setStyle(markerclear2); features[x].pixelstat = 2; }
else if(features[x].pixelstat == 0) { features[x].setStyle(markerclear1); features[x].pixelstat = 1; }
}
}
}
}

function WsMessage(data) {
var tempws = JSON.parse(decode(data.data));
var now = new Date().getTime();
let event = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat([tempws.lon, tempws.lat])));
event.lastupdate = now;
event.pixelstat = 0;
event.setStyle(markerblitz);
BlitzorgFeatures.addFeature(event);
}

function WsClose() {
console.log("websocket to blitzortung disconected...");
WsDisconnect();
WsConnect();
}

function WsError(err) { console.log("websocket to blitzortung error:" + err); }

function WsDisconnect() {
if (!ws) return;
ws.onopen = null;
ws.onmessage = null;
ws.onerror = null;
ws.onclose = null;
ws.close();
ws = null;
}

/* End of blitzortung Add-on */

I hope this helps some, as i am no javascript coder professionally there might be steps in this that can be improved but who knows, Sir Wiedehopf might add it in the future
PS that it works now is no garantee it keeps working Blitz is known to change there setup once a while

[JaraLowell]

meep forgot the file in /images/ one needs to to show the strikes

[JaraLowell]

If the live one is not per say what you want can also use the history future from Blitzortung, via the code to be in layers.js

      const Blitzortung = new ol.layer.Tile({
           name: 'Blitzortung History',
           title: 'Blitzortung History',
           type: 'overlay',
           opacity: 0.6,
           visible: false,
           zIndex: 100,
       });
       g.refreshBlitzortung = async function() {
           const BlitzortungSource = new ol.source.XYZ({
               url: 'https://www.blitzortung.org/en/Tiles/C/{z}/tile_{x}_{y}.png?' + (new Date()).getTime(),
               attributions: '<a href="https://www.blitzortung.org/" target="_blank">BlitzOrtung.org</a>',
               attributionsCollapsible: false,
               maxZoom: 20,
           });
           Blitzortung.setSource(BlitzortungSource);
       };
       Blitzortung.on('change:visible', function(evt) {
           if (evt.target.getVisible()) {
               g.refreshBlitzortung();
               g.refreshBlitzortungInterval = window.setInterval(g.refreshBlitzortung, 2 * 60 * 1000);
           } else {
               clearInterval(g.refreshBlitzortungInterval);
           }
       });
       world.push(Blitzortung);