I just wanted to share my customizations. These were thanks to abcd567 ideas.
My goal was to make my distance rings more readable when viewing them in satellite mode. For that, I added a second set of rings slightly offset from the first. A white ring/text for the background then a black dashed ring/text for the foreground.
The second thing I did was to color terrain rings the appropriate color based on altitude.
These are definitely hacks
To handle the “upinthehair” terrain ring coloring, this is what my code looks like in script.js
// kick off an ajax request that will add the rings when it's done
var request = $.ajax({ url: 'upintheair.json',
timeout: 5000,
cache: true,
dataType: 'json' });
request.done(function(data) {
var ringStyle = [new ol.style.Style({
fill: null,
stroke: new ol.style.Stroke({
color: '#12E374',
lineDash:[4,4],
width: 2
})
}),new ol.style.Style({
fill: null,
stroke: new ol.style.Stroke({
color: '#0000ff',
lineDash:[4,4],
width: 2
})
}),new ol.style.Style({
fill: null,
stroke: new ol.style.Stroke({
color: '#ff00ff',
lineDash:[4,4],
width: 2
})
})
];
for (var i = 0; i < data.rings.length; ++i) {
var geom = new ol.geom.LineString();
var points = data.rings[i].points;
if (points.length > 0) {
for (var j = 0; j < points.length; ++j) {
geom.appendCoordinate([ points[j][1], points[j][0] ]);
}
geom.appendCoordinate([ points[0][1], points[0][0] ]);
geom.transform('EPSG:4326', 'EPSG:3857');
var feature = new ol.Feature(geom);
//Only Supports 3 rings! If you change the number of rings, change this line as well as the styles above
feature.setStyle(ringStyle[i]);
StaticFeatures.push(feature);
}
}
});
To handle the white background and black rings, this is what my code looks like in script.js
function createSiteCircleFeatures() {
// Clear existing circles first
SiteCircleFeatures.forEach(function(circleFeature) {
StaticFeatures.remove(circleFeature);
});
SiteCircleFeatures.clear();
// Draw a white background behind distance circles and text
var circleStyleWhite = function(distance) {
return new ol.style.Style({
fill: null,
stroke: new ol.style.Stroke({
color: '#ffffff',
width: 2
}),
text: new ol.style.Text({
font: 'bold 10px Helvetica Neue, sans-serif',
fill: new ol.style.Fill({ color: '#ffffff' }),
offsetY: -8,
offsetX: 1,
text: format_distance_long(distance, DisplayUnits, 0)
})
});
};
var circleStyle = function(distance) {
return new ol.style.Style({
fill: null,
stroke: new ol.style.Stroke({
color: '#000000',
lineDash:[4,4],
width: 1
}),
text: new ol.style.Text({
font: '10px Helvetica Neue, sans-serif',
fill: new ol.style.Fill({ color: '#000' }),
offsetY: -8,
text: format_distance_long(distance, DisplayUnits, 0)
})
});
};
var conversionFactor = 1000.0;
If (DisplayUnits === "nautical") {
conversionFactor = 1852.0;
} else if (DisplayUnits === "imperial") {
conversionFactor = 1609.0;
}
for (var i=0; i < SiteCirclesDistances.length; ++i) {
var distance = SiteCirclesDistances[i] * conversionFactor;
var circle = make_geodesic_circle(SitePosition, distance, 360);
circle.transform('EPSG:4326', 'EPSG:3857');
//white
var featureWhite = new ol.Feature(circle);
featureWhite.setStyle(circleStyleWhite(distance));
StaticFeatures.push(featureWhite);
SiteCircleFeatures.push(featureWhite);
//black
var feature = new ol.Feature(circle);
feature.setStyle(circleStyle(distance));
StaticFeatures.push(feature);
SiteCircleFeatures.push(feature);
}
}