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
:
dump1090/public_html/planeObject.js
Lines 619 to 628 in f862b53
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?
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.