diff --git a/code/map_data.js b/code/map_data.js
index c0c3c852..693e842d 100644
--- a/code/map_data.js
+++ b/code/map_data.js
@@ -337,7 +337,7 @@ window.renderResonators = function(ent, portalLayer) {
     var resoGuid = portalResonatorGuid(ent[0], i);
 
     // the resonator
-    var resoStyle = 
+    var resoStyle =
       ent[0] === selectedPortal ? OPTIONS_RESONATOR_SELECTED : OPTIONS_RESONATOR_NON_SELECTED;
     var resoProperty = $.extend({
         opacity: 1,
@@ -350,7 +350,7 @@ window.renderResonators = function(ent, portalLayer) {
     var reso =  L.circleMarker(Rlatlng, resoProperty);
 
     // line connecting reso to portal
-    var connStyle = 
+    var connStyle =
       ent[0] === selectedPortal ? OPTIONS_RESONATOR_LINE_SELECTED : OPTIONS_RESONATOR_LINE_NON_SELECTED;
     var connProperty =  $.extend({
         color: '#FFA000',
@@ -376,9 +376,9 @@ window.renderResonators = function(ent, portalLayer) {
     // doesn’t matter to which element these are bound since Leaflet
     // will add/remove all elements of the LayerGroup at once.
     reso.on('remove', function() { delete window.resonators[this.options.guid]; });
-    reso.on('add',    function() { 
+    reso.on('add',    function() {
       if(window.resonators[this.options.guid]) throw('duplicate resonator detected');
-      window.resonators[this.options.guid] = r; 
+      window.resonators[this.options.guid] = r;
     });
 
     r.addTo(portalsLayers[parseInt(portalLevel)]);
@@ -412,33 +412,26 @@ window.portalResetColor = function(portal) {
 }
 
 window.resonatorsResetStyle = function(portalGuid) {
-  for(var i = 0; i < 8; i++) {
-    resonatorLayerGroup = resonators[portalResonatorGuid(portalGuid, i)];
-    if(!resonatorLayerGroup) continue;
-    resonatorLayerGroup.eachLayer(function(layer) {
-      if (layer.options.guid) {
-        // Resonator
-        layer.setStyle(OPTIONS_RESONATOR_NON_SELECTED);
-      } else {
-        // Resonator line
-        layer.setStyle(OPTIONS_RESONATOR_LINE_NON_SELECTED);
-      }
-    });
-  }
+  window.resonatorsSetStyle(portalGuid, OPTIONS_RESONATOR_NON_SELECTED, OPTIONS_RESONATOR_LINE_NON_SELECTED);
 }
 
 window.resonatorsSetSelectStyle = function(portalGuid) {
+  window.resonatorsSetStyle(portalGuid, OPTIONS_RESONATOR_SELECTED, OPTIONS_RESONATOR_LINE_SELECTED);
+}
+
+window.resonatorsSetStyle = function(portalGuid, resoStyle, lineStyle) {
   for(var i = 0; i < 8; i++) {
     resonatorLayerGroup = resonators[portalResonatorGuid(portalGuid, i)];
     if(!resonatorLayerGroup) continue;
+    // bring resonators and their connection lines to front separately.
+    // this way the resonators are drawn on top of the lines.
     resonatorLayerGroup.eachLayer(function(layer) {
-      if (layer.options.guid) {
-        // Resonator
-        layer.bringToFront().setStyle(OPTIONS_RESONATOR_SELECTED);
-      } else {
-        // Resonator line
-        layer.bringToFront().setStyle(OPTIONS_RESONATOR_LINE_SELECTED);
-      }
+      if (!layer.options.guid)  // Resonator line
+        layer.bringToFront().setStyle(lineStyle);
+    });
+    resonatorLayerGroup.eachLayer(function(layer) {
+      if (layer.options.guid) // Resonator
+        layer.bringToFront().setStyle(resoStyle);
     });
   }
 }