diff --git a/code/map_data_render.js b/code/map_data_render.js index baace48d..4a21f7c9 100644 --- a/code/map_data_render.js +++ b/code/map_data_render.js @@ -10,6 +10,9 @@ window.Render = function() { this.CLUSTER_SIZE = L.Browser.mobile ? 16 : 8; // the map is divided 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.entityVisibilityZoom = undefined; @@ -395,7 +398,10 @@ window.Render.prototype.createLinkEntity = function(ent,faked) { window.links[ent[0]] = poly; - linksFactionLayers[poly.options.team].addLayer(poly); + // 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); + } } @@ -405,6 +411,7 @@ window.Render.prototype.updateEntityVisibility = function() { this.entityVisibilityZoom = map.getZoom(); this.resetPortalClusters(); + this.resetLinkVisibility(); if (this.portalMarkerScale === undefined || this.portalMarkerScale != portalMarkerScale()) { this.portalMarkerScale = portalMarkerScale(); @@ -511,3 +518,46 @@ window.Render.prototype.getPortalClusterID = function(portal) { } + +window.Render.prototype.linkVisible = function(link) { + var lengthSquared = this.getLinkPixelLengthSquared (link); + + return lengthSquared >= this.LINK_VISIBLE_PIXEL_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); + } + } +} + + +window.Render.prototype.getLinkPixelLengthSquared = 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); + + return lengthSquared; +}