diff --git a/code/portal_detail_display.js b/code/portal_detail_display.js
index 4d2cec279..9574d85ef 100644
--- a/code/portal_detail_display.js
+++ b/code/portal_detail_display.js
@@ -262,28 +262,25 @@ window.setPortalIndicators = function(p) {
 // on old selection. Returns false if the selected portal changed.
 // Returns true if it's still the same portal that just needs an
 // update.
-window.selectPortal = function(guid) {
-  var update = selectedPortal === guid;
+window.selectPortal = function (newPortalGuid) {
+  var update = selectedPortal === newPortalGuid;
   var oldPortalGuid = selectedPortal;
-  selectedPortal = guid;
+  selectedPortal = newPortalGuid;
 
   var oldPortal = portals[oldPortalGuid];
-  var newPortal = portals[guid];
+  var newPortal = portals[newPortalGuid];
 
   // Restore style of unselected portal
-  if(!update && oldPortal) setMarkerStyle(oldPortal,false);
+  if (oldPortal) { oldPortal.setSelected(false); }
 
   // Change style of selected portal
-  if(newPortal) {
-    setMarkerStyle(newPortal, true);
-
-    if (map.hasLayer(newPortal)) {
-      newPortal.bringToFront();
-    }
-  }
+  if (newPortal) { newPortal.setSelected(true); }
 
   setPortalIndicators(newPortal);
 
-  runHooks('portalSelected', {selectedPortalGuid: guid, unselectedPortalGuid: oldPortalGuid});
+  runHooks('portalSelected', {
+    selectedPortalGuid: newPortalGuid,
+    unselectedPortalGuid: oldPortalGuid
+  });
   return update;
-}
+};
diff --git a/code/portal_marker.js b/code/portal_marker.js
index 967375f07..a8e6c76bb 100644
--- a/code/portal_marker.js
+++ b/code/portal_marker.js
@@ -1,46 +1,58 @@
 // PORTAL MARKER //////////////////////////////////////////////
 // code to create and update a portal marker
 
+L.PortalMarker = L.CircleMarker.extend({
+
+  options: {
+    interactive: true
+  },
+
+  initialize: function (latlng, data) {
+    var options = getMarkerStyleOptions(data);
+    // 'data' contain the IITC-specific entity data to be stored in the object options
+    options = L.extend(options,data);
+    // this.data = data;
+    L.CircleMarker.initialize.call(this,latlng,options);
+    highlightPortal(this);
+  },
+
+  setStyle: function (style) { // stub for highlighters
+    L.Util.setOptions(this, style);
+    return this;
+  },
+
+  setMarkerStyle: function (style) {
+    style = L.extend(getMarkerStyleOptions(this.options), style);
+    L.Util.setOptions(this,style);
+    highlightPortal(this);
+    var selected = this._selected && { color: COLOR_SELECTED_PORTAL };
+    return L.Path.prototype.setStyle.call(this,selected);
+  },
+
+  setSelected: function (action) {
+    var same = this._selected === action;
+    this._selected = action;
+    if (!same || this._selected) { this.setMarkerStyle(); }
+    if (this._selected) {
+      if (map.hasLayer(this)) { this.bringToFront(); }
+    }
+  }
+
+});
 
-window.portalMarkerScale = function() {
+L.portalMarker = function (latlng, data) {
+  return new L.PortalMarker(latlng,data);
+};
+
+window.portalMarkerScale = function () {
   var zoom = map.getZoom();
   if (L.Browser.mobile)
     return zoom >= 16 ? 1.5 : zoom >= 14 ? 1.2 : zoom >= 11 ? 1.0 : zoom >= 8 ? 0.65 : 0.5;
   else
     return zoom >= 14 ? 1 : zoom >= 11 ? 0.8 : zoom >= 8 ? 0.65 : 0.5;
-}
-
-// create a new marker. 'data' contain the IITC-specific entity data to be stored in the object options
-window.createMarker = function(latlng, data) {
-  var styleOptions = window.getMarkerStyleOptions(data);
-
-  var options = L.extend({}, data, styleOptions, { interactive: true });
-
-  var marker = L.circleMarker(latlng, options);
-
-  highlightPortal(marker);
-
-  return marker;
-}
-
-
-window.setMarkerStyle = function(marker, selected) {
-
-  var styleOptions = window.getMarkerStyleOptions(marker.options);
-
-  marker.setStyle(styleOptions);
-
-  // FIXME? it's inefficient to set the marker style (above), then do it again inside the highlighter
-  // the highlighter API would need to be changed for this to be improved though. will it be too slow?
-  highlightPortal(marker);
+};
 
-  if (selected) {
-    marker.setStyle ({color: COLOR_SELECTED_PORTAL});
-  }
-}
-
-
-window.getMarkerStyleOptions = function(details) {
+window.getMarkerStyleOptions = function (details) {
   var scale = window.portalMarkerScale();
 
   //   portal level      0  1  2  3  4  5  6  7  8
@@ -54,23 +66,33 @@ window.getMarkerStyleOptions = function(details) {
 
   var dashArray = null;
   // thinner and dashed outline for placeholder portals
-  if (details.team != TEAM_NONE && level==0) {
+  if (details.team !== TEAM_NONE && level===0) {
     lvlWeight = 1;
     dashArray = '1,2';
   }
 
   var options = {
-    radius: lvlRadius,
     stroke: true,
-    color: COLORS[details.team],
-    weight: lvlWeight,
     opacity: 1,
     fill: true,
-    fillColor: COLORS[details.team],
+    fillColor: null, // same as color by default
     fillOpacity: 0.5,
+
+    radius: lvlRadius,
+    color: COLORS[details.team],
+    weight: lvlWeight,
     dashArray: dashArray
   };
 
   return options;
-}
+};
+
+// deprecated functions (subject to remove):
+
+// create a new marker. 'data' contain the IITC-specific entity data to be stored in the object options
+window.createMarker = L.portalMarker;
 
+// eslint-disable-next-line no-unused-vars
+window.setMarkerStyle = function (marker, selected) {
+  marker.setMarkerStyle()
+};