AFG/dump1090
3
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add transparent borders to increase size of marker clickable area

Browse source
This commit is contained in:
Carlos Salaverria 2016-09-01 14:55:02 -05:00
parent e5902f2820
commit 6199003fa1
2 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
public_html/markers.js
View file

@ -289,7 +289,7 @@ function getBaseMarker(category, typeDesignator, typeDescription, wtc) {
return DefaultIcon; return DefaultIcon;
} }
function svgPathToSvg(path, size, stroke, width, fill) { function svgPathToSvg(path, size, stroke, width, fill, transparentBorderWidth) {
var svg = '<svg width="' + size[0] + 'px" height="' + size[1] + 'px" version="1.1" xmlns="http://www.w3.org/2000/svg">'; var svg = '<svg width="' + size[0] + 'px" height="' + size[1] + 'px" version="1.1" xmlns="http://www.w3.org/2000/svg">';
svg += '<path d="' + path + '"'; svg += '<path d="' + path + '"';
if (stroke !== null) { if (stroke !== null) {
@ -301,11 +301,19 @@ function svgPathToSvg(path, size, stroke, width, fill) {
if (fill !== null) { if (fill !== null) {
svg += ' fill="' + fill + '"'; svg += ' fill="' + fill + '"';
} }
svg += '/></svg>'; svg += '/>';
// Add a transparent border to increase the size of the plane marker clickable area.
if (transparentBorderWidth > 0) {
// If the border is 100% transparent, OpenLayers will ignore it completely - see
// https://github.com/openlayers/ol3/issues/2961. The stroke opacity is set to 1% as a workaround.
// This is transparent enough to be invisible to the user.
svg += '<path d="' + path + '" fill="none" stroke="#FFFFFF" stroke-opacity="0.01" stroke-width="' + transparentBorderWidth + '" />';
}
svg += '</svg>';
return svg; return svg;
} }
function svgPathToURI(path, size, stroke, width, fill) { function svgPathToURI(path, size, stroke, width, fill, transparentBorderWidth) {
return "data:image/svg+xml;base64," + btoa(svgPathToSvg(path, size, stroke, width, fill)); return "data:image/svg+xml;base64," + btoa(svgPathToSvg(path, size, stroke, width, fill, transparentBorderWidth));
} }

5
public_html/planeObject.js
View file

@ -302,6 +302,7 @@ PlaneObject.prototype.updateIcon = function() {
var baseMarker = getBaseMarker(this.category, this.icaotype, this.typeDescription, this.wtc); var baseMarker = getBaseMarker(this.category, this.icaotype, this.typeDescription, this.wtc);
var weight = ((this.selected ? 2 : 1) / baseMarker.scale).toFixed(1); var weight = ((this.selected ? 2 : 1) / baseMarker.scale).toFixed(1);
var rotation = (this.track === null ? 0 : this.track); var rotation = (this.track === null ? 0 : this.track);
var transparentBorderWidth = 16;
var svgKey = col + '!' + outline + '!' + baseMarker.key + '!' + weight; var svgKey = col + '!' + outline + '!' + baseMarker.key + '!' + weight;
var styleKey = opacity + '!' + rotation; var styleKey = opacity + '!' + rotation;
@ -315,7 +316,7 @@ PlaneObject.prototype.updateIcon = function() {
anchorYUnits: 'pixels', anchorYUnits: 'pixels',
scale: baseMarker.scale, scale: baseMarker.scale,
imgSize: baseMarker.size, imgSize: baseMarker.size,
src: svgPathToURI(baseMarker.path, baseMarker.size, outline, weight, col), src: svgPathToURI(baseMarker.path, baseMarker.size, outline, weight, col, transparentBorderWidth),
rotation: (baseMarker.noRotate ? 0 : rotation * Math.PI / 180.0), rotation: (baseMarker.noRotate ? 0 : rotation * Math.PI / 180.0),
opacity: opacity, opacity: opacity,
rotateWithView: (baseMarker.noRotate ? false : true) rotateWithView: (baseMarker.noRotate ? false : true)
@ -341,7 +342,7 @@ PlaneObject.prototype.updateIcon = function() {
anchorYUnits: 'pixels', anchorYUnits: 'pixels',
scale: 1.0, scale: 1.0,
imgSize: [size, size], imgSize: [size, size],
src: svgPathToURI(arrowPath, [size, size], outline, 1, outline), src: svgPathToURI(arrowPath, [size, size], outline, 1, outline, transparentBorderWidth),
rotation: rotation * Math.PI / 180.0, rotation: rotation * Math.PI / 180.0,
opacity: opacity, opacity: opacity,
rotateWithView: true rotateWithView: true