only add link entities to the layer if they're long enough to be visible

an improvement on 4838de6788 to prevent excessive links being drawn when lots of portals are loaded

code/map_data_render.js

@@ -10,8 +10,11 @@ window.Render = function() {
   this.CLUSTER_SIZE = L.Browser.mobile ? 16 : 8;  // the map is divited into squares of this size in pixels for clustering purposes. mobile uses larger markers, so therefore larger clustering areas
   this.CLUSTER_PORTAL_LIMIT = 4; // no more than this many portals are drawn in each cluster square
 
+  // link length, in pixels, to be visible. use the portal cluster size, as shorter than this is likely hidden
+  // under the portals
+  this.LINK_VISIBLE_PIXEL_LENGTH = this.CLUSTER_SIZE;
 
-  this.currentPortalClusterZoom = undefined;
+  this.entityVisibilityZoom = undefined;
 }
 
 
@@ -435,7 +438,9 @@ window.Render.prototype.createLinkEntity = function(ent,faked) {
 
   // only add the link to the layer if it's long enough to be seen
 
+  if (this.linkVisible(poly)) {
     linksFactionLayers[poly.options.team].addLayer(poly);
+  }
 }
 
 
@@ -490,14 +495,22 @@ window.Render.prototype.createLinksFromPortalData = function(portalGuid) {
 }
 
 
+window.Render.prototype.updateEntityVisibility = function() {
+  if (this.entityVisibilityZoom === undefined || this.entityVisibilityZoom != map.getZoom()) {
+    this.entityVisibilityZoom = map.getZoom();
+
+    this.resetPortalClusters();
+    this.resetLinkVisibility();
+  }
+}
+
+
 
 // portal clustering functionality
 
 window.Render.prototype.resetPortalClusters = function() {
-  if (this.currentPortalClusterZoom === undefined || this.currentPortalClusterZoom != map.getZoom()) {
 
   this.portalClusters = {};
-    this.currentPortalClusterZoom = map.getZoom();
 
   // first, place the portals into the clusters
   for (var pguid in window.portals) {
@@ -531,7 +544,6 @@ window.Render.prototype.resetPortalClusters = function() {
     }
   }
 
-  } //else zoom unchanged, no need to update
 }
 
 // add the portal to the visiable map layer unless we pass the cluster limits
@@ -578,3 +590,51 @@ window.Render.prototype.getPortalClusterID = function(portal) {
 
   return z+":"+clusterpoint.x+":"+clusterpoint.y;
 }
+
+
+// link length
+
+window.Render.prototype.getLinkPixelLength = function(link) {
+  var z = map.getZoom();
+
+  var latLngs = link.getLatLngs();
+  if (latLngs.length != 2) {
+    console.warn ('Link had '+latLngs.length+' points - expected 2!');
+    return undefined;
+  }
+
+  var point0 = map.project(latLngs[0]);
+  var point1 = map.project(latLngs[1]);
+
+  var dx = point0.x - point1.x;
+  var dy = point0.y - point1.y;
+
+  var lengthSquared = (dx*dx)+(dy*dy);
+
+  var length = Math.sqrt (lengthSquared);
+
+  return length;
+}
+
+
+window.Render.prototype.linkVisible = function(link) {
+  var length = this.getLinkPixelLength (link);
+
+  return length >= this.LINK_VISIBLE_PIXEL_LENGTH;
+}
+
+
+window.Render.prototype.resetLinkVisibility = function() {
+
+  for (var guid in window.links) {
+    var link = window.links[guid];
+
+    var visible = this.linkVisible(link);
+
+    if (visible) {
+      if (!linksFactionLayers[link.options.team].hasLayer(link)) linksFactionLayers[link.options.team].addLayer(link);
+    } else {
+      if (linksFactionLayers[link.options.team].hasLayer(link)) linksFactionLayers[link.options.team].removeLayer(link);
+    }
+  }
+}

code/map_data_request.js

@@ -205,7 +205,7 @@ window.MapDataRequest.prototype.refresh = function() {
 
   this.render.clearEntitiesOutsideBounds(dataBounds);
 
-  this.render.resetPortalClusters();
+  this.render.updateEntityVisibility();
 
 
   console.log('requesting data tiles at zoom '+zoom+' (L'+minPortalLevel+'+ portals), map zoom is '+map.getZoom());