diff --git a/js/src/gis_data_editor.js b/js/src/gis_data_editor.js
index 47d4e842db..05c3e5f46d 100644
--- a/js/src/gis_data_editor.js
+++ b/js/src/gis_data_editor.js
@@ -5,7 +5,7 @@
  *
  */
 
-/* global addZoomPanControllers, loadSVG, selectVisualization, styleOSM, zoomAndPan */ // js/table/gis_visualization.js
+/* global addZoomPanControllers, storeGisSvgRef, selectVisualization, styleOSM, zoomAndPan */ // js/table/gis_visualization.js
 /* global themeImagePath */ // templates/javascript/variables.twig
 
 var gisEditorLoaded = false;
@@ -71,12 +71,11 @@ function addDataPoint (pointNumber, prefix) {
  * Initialize the visualization in the GIS data editor.
  */
 function initGISEditorVisualization () {
+    storeGisSvgRef();
     // Loads either SVG or OSM visualization based on the choice
     selectVisualization();
     // Adds necessary styles to the div that contains the openStreetMap
     styleOSM();
-    // Loads the SVG element and make a reference to it
-    loadSVG();
     // Adds controllers for zooming and panning
     addZoomPanControllers();
     zoomAndPan();
diff --git a/js/src/table/gis_visualization.js b/js/src/table/gis_visualization.js
index e517408d04..8ee8e7f0bb 100644
--- a/js/src/table/gis_visualization.js
+++ b/js/src/table/gis_visualization.js
@@ -12,52 +12,30 @@
 var zoomFactor = 1.5;
 var defaultX = 0;
 var defaultY = 0;
+var defaultScale = 1;
 
 // Variables
-var x = 0;
-var y = 0;
-var scale = 1;
+var x = defaultX;
+var y = defaultY;
+var scale = defaultScale;
 
-var svg;
+/** @type {SVGElement|undefined} */
+var gisSvg;
 
 /**
  * Zooms and pans the visualization.
  */
 function zoomAndPan () {
-    var g = svg.getElementById('groupPanel');
+    var g = gisSvg.getElementById('groupPanel');
     if (!g) {
         return;
     }
 
-    g.setAttribute('transform', 'translate(' + x + ', ' + y + ') scale(' + scale + ')');
-    var id;
-    var circle;
-    $('circle.vector').each(function () {
-        id = $(this).attr('id');
-        circle = svg.getElementById(id);
-        $(svg).on('change', circle, {
-            r : (3 / scale),
-            'stroke-width' : (2 / scale)
-        });
-    });
-
-    var line;
-    $('polyline.vector').each(function () {
-        id = $(this).attr('id');
-        line = svg.getElementById(id);
-        $(svg).on('change', line, {
-            'stroke-width' : (2 / scale)
-        });
-    });
-
-    var polygon;
-    $('path.vector').each(function () {
-        id = $(this).attr('id');
-        polygon = svg.getElementById(id);
-        $(svg).on('change', polygon, {
-            'stroke-width' : (0.5 / scale)
-        });
-    });
+    $('#groupPanel', gisSvg).attr('transform', 'translate(' + x + ', ' + y + ') scale(' + scale + ')');
+    $('circle.vector', gisSvg).attr('r', 3 / scale);
+    $('circle.vector', gisSvg).attr('stroke-width', 2 / scale);
+    $('polyline.vector', gisSvg).attr('stroke-width', 2 / scale);
+    $('path.vector', gisSvg).attr('stroke-width', 0.5 / scale);
 }
 
 /**
@@ -86,38 +64,31 @@ function styleOSM () {
 }
 
 /**
- * Loads the SVG element and make a reference to it.
+ * Store a reference to the gis svg element.
  */
-function loadSVG () {
-    var $placeholder = $('#placeholder');
-
-    $placeholder.svg({
-        onLoad: function (svgRef) {
-            svg = svgRef;
-        }
-    });
-
-    // Removes the second SVG element unnecessarily added due to the above command
-    $placeholder.find('svg').eq(1).remove();
+function storeGisSvgRef () {
+    gisSvg = $('#placeholder').find('svg').get(0);
 }
 
 /**
- * Adds controllers for zooming and panning.
+ * Adds controls for zooming and panning.
  */
 function addZoomPanControllers () {
-    var $placeholder = $('#placeholder');
-    if ($('#placeholder').find('svg').length > 0) {
-        var themeImagePath = $('#themeImagePath').val();
-        // add panning arrows
-        $('<img class="button" id="left_arrow" src="' + themeImagePath + 'west-mini.png">').appendTo($placeholder);
-        $('<img class="button" id="right_arrow" src="' + themeImagePath + 'east-mini.png">').appendTo($placeholder);
-        $('<img class="button" id="up_arrow" src="' + themeImagePath + 'north-mini.png">').appendTo($placeholder);
-        $('<img class="button" id="down_arrow" src="' + themeImagePath + 'south-mini.png">').appendTo($placeholder);
-        // add zooming controls
-        $('<img class="button" id="zoom_in" src="' + themeImagePath + 'zoom-plus-mini.png">').appendTo($placeholder);
-        $('<img class="button" id="zoom_world" src="' + themeImagePath + 'zoom-world-mini.png">').appendTo($placeholder);
-        $('<img class="button" id="zoom_out" src="' + themeImagePath + 'zoom-minus-mini.png">').appendTo($placeholder);
+    if (!gisSvg) {
+        return;
     }
+    var themeImagePath = $('#themeImagePath').val();
+    $('#placeholder').append(
+        // pan arrows
+        '<img class="button" id="left_arrow" src="' + themeImagePath + 'west-mini.png">',
+        '<img class="button" id="right_arrow" src="' + themeImagePath + 'east-mini.png">',
+        '<img class="button" id="up_arrow" src="' + themeImagePath + 'north-mini.png">',
+        '<img class="button" id="down_arrow" src="' + themeImagePath + 'south-mini.png">',
+        // zoom controls
+        '<img class="button" id="zoom_in" src="' + themeImagePath + 'zoom-plus-mini.png">',
+        '<img class="button" id="zoom_world" src="' + themeImagePath + 'zoom-world-mini.png">',
+        '<img class="button" id="zoom_out" src="' + themeImagePath + 'zoom-minus-mini.png">'
+    );
 }
 
 /**
@@ -130,19 +101,20 @@ function resizeGISVisualization () {
 
     // Assign new value for width
     $placeholder.width(visWidth);
-    $('svg').attr('width', visWidth);
+    $(gisSvg).attr('width', visWidth);
 
     // Assign the offset created due to resizing to defaultX and center the svg.
     defaultX = (visWidth - oldWidth) / 2;
     x = defaultX;
-    y = 0;
-    scale = 1;
+    y = defaultY;
+    scale = defaultScale;
 }
 
 /**
  * Initialize the GIS visualization.
  */
 function initGISVisualization () {
+    storeGisSvgRef();
     // Loads either SVG or OSM visualization based on the choice
     selectVisualization();
     // Resizes the GIS visualization to fit into the space available
@@ -152,8 +124,6 @@ function initGISVisualization () {
         // Adds necessary styles to the div that contains the openStreetMap
         styleOSM();
     }
-    // Loads the SVG element and make a reference to it
-    loadSVG();
     // Adds controllers for zooming and panning
     addZoomPanControllers();
     zoomAndPan();
@@ -285,6 +255,9 @@ AJAX.registerOnload('table/gis_visualization.js', function () {
     });
 
     $(document).on('dblclick', '#placeholder', function (event) {
+        if (event.target.classList.contains('button')) {
+            return;
+        }
         scale *= zoomFactor;
         // zooming in keeping the position under mouse pointer unmoved.
         var relCoords = getRelativeCoords(event);
@@ -298,9 +271,8 @@ AJAX.registerOnload('table/gis_visualization.js', function () {
         // zoom in
         scale *= zoomFactor;
 
-        var $placeholder = $('#placeholder').find('svg');
-        var width = $placeholder.attr('width');
-        var height = $placeholder.attr('height');
+        var width = $(gisSvg).attr('width');
+        var height = $(gisSvg).attr('height');
         // zooming in keeping the center unmoved.
         x = width / 2 - (width / 2 - x) * zoomFactor;
         y = height / 2 - (height / 2 - y) * zoomFactor;
@@ -320,9 +292,8 @@ AJAX.registerOnload('table/gis_visualization.js', function () {
         // zoom out
         scale /= zoomFactor;
 
-        var $placeholder = $('#placeholder').find('svg');
-        var width = $placeholder.attr('width');
-        var height = $placeholder.attr('height');
+        var width = $(gisSvg).attr('width');
+        var height = $(gisSvg).attr('height');
         // zooming out keeping the center unmoved.
         x = width / 2 - (width / 2 - x) / zoomFactor;
         y = height / 2 - (height / 2 - y) / zoomFactor;