Make plane lines more distinct/visible on the map

[paalbra]

Hi! I'm not familiar with OpenLayers. Please bear with me and my lack of knowledge.

I think the altitude color added to the plane lines are very nice. But some times, depending on the background map, I find it hard to see the line. E.g. when you have green on green, or blue on blue.

I think that maybe some sort of outer stroke added to the line could help make them more distinct in these cases.

I've tried to experiment by adding a second stroke to the altitudeLines:

dump1090/public_html/planeObject.js

Lines 619 to 628 in f862b53

	// return the styling of the lines based on altitude
	PlaneObject.prototype.altitudeLines = function(altitude) {
	var colorArr = this.getAltitudeColor(altitude);
	return new ol.style.Style({
	stroke: new ol.style.Stroke({
	color: 'hsl(' + (colorArr[0]/5).toFixed(0)*5 + ',' + (colorArr[1]/5).toFixed(0)*5 + '%,' + (colorArr[2]/5).toFixed(0)*5 + '%)',
	width: 2
	})
	})
	}

E.g something like:

// return the styling of the lines based on altitude
PlaneObject.prototype.altitudeLines = function(altitude) {
    var colorArr = this.getAltitudeColor(altitude);
    var color_bg = new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'rgba(0, 0, 0, 0.2)',
            width: 4
        })
    });
    var color_fg = new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'hsl(' + (colorArr[0]/5).toFixed(0)*5 + ',' + (colorArr[1]/5).toFixed(0)*5 + '%,' + (colorArr[2]/5).toFixed(0)*5 + '%)',
            width: 2
        })
    });
    return [color_bg, color_fg];
}

Some variations (current behavior/look on top):

I think the joints/point where lines connect look really bad here. It's very visible with the black stroke/the lower example.

Since I don't know OpenLayers, I don't know if it's possible to make these joints look good somehow?

Any thoughts?

[paalbra]

I found this example which I feel is kind of related(?): https://viglino.github.io/ol-ext/examples/style/map.style.flowline.html

I've done some live changes to this example to illustrate that an outer stroke makes the line easier to see:

This example doesn't have the same problem with the joints, for some reason I do not know.