flightaware/dump1090

Make plane lines more distinct/visible on the map

paalbra opened this issue · 1 comments

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:

// 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):

image

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?

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:

image

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