diff --git a/public_html/markers.js b/public_html/markers.js
index 655ceb1..49a61d2 100755
--- a/public_html/markers.js
+++ b/public_html/markers.js
@@ -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));
 }
diff --git a/public_html/planeObject.js b/public_html/planeObject.js
index a970cea..77d6b4d 100644
--- a/public_html/planeObject.js
+++ b/public_html/planeObject.js
@@ -302,6 +302,7 @@ PlaneObject.prototype.updateIcon = function() {
         var baseMarker = getBaseMarker(this.category, this.icaotype, this.typeDescription, this.wtc);
         var weight = ((this.selected ? 2 : 1) / baseMarker.scale).toFixed(1);
         var rotation = (this.track === null ? 0 : this.track);
+        var transparentBorderWidth = 16;
 
         var svgKey = col + '!' + outline + '!' + baseMarker.key + '!' + weight;
         var styleKey = opacity + '!' + rotation;
@@ -315,7 +316,7 @@ PlaneObject.prototype.updateIcon = function() {
                         anchorYUnits: 'pixels',
                         scale: baseMarker.scale,
                         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),
                         opacity: opacity,
                         rotateWithView: (baseMarker.noRotate ? false : true)
@@ -341,7 +342,7 @@ PlaneObject.prototype.updateIcon = function() {
                                 anchorYUnits: 'pixels',
                                 scale: 1.0,
                                 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,
                                 opacity: opacity,
                                 rotateWithView: true