AFG/dump1090
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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
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;
}
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">';
svg += '<path d="' + path + '"';
if (stroke !== null) {
@ -301,11 +301,19 @@ function svgPathToSvg(path, size, stroke, width, fill) {
if (fill !== null) {
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;
}
function svgPathToURI(path, size, stroke, width, fill) {
return "data:image/svg+xml;base64," + btoa(svgPathToSvg(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, transparentBorderWidth));
}