MU counts for fields with limiting for small fields

Only at higher zoom levels will counts for small fields show.

code/map_data.js

@@ -522,17 +522,30 @@ window.renderField = function(ent) {
   if(Object.keys(fields).length >= MAX_DRAWN_FIELDS)
     return window.removeByGuid(ent[0]);
 
-  // assume that fields never change. If they do, they will have a
-  // different ID.
-  if(findEntityInLeaflet(fieldsLayer, fields, ent[0])) return;
-
-  var team = getTeam(ent[2]);
   var reg = ent[2].capturedRegion;
   var latlngs = [
-    [reg.vertexA.location.latE6/1E6, reg.vertexA.location.lngE6/1E6],
+    new L.LatLng(reg.vertexA.location.latE6/1E6, reg.vertexA.location.lngE6/1E6),
-    [reg.vertexB.location.latE6/1E6, reg.vertexB.location.lngE6/1E6],
+    new L.LatLng(reg.vertexB.location.latE6/1E6, reg.vertexB.location.lngE6/1E6),
-    [reg.vertexC.location.latE6/1E6, reg.vertexC.location.lngE6/1E6]
+    new L.LatLng(reg.vertexC.location.latE6/1E6, reg.vertexC.location.lngE6/1E6)
   ];
+  var areaZoomRatio = calcTriArea(latlngs)/Math.exp(14.2714860198866-1.384987247*map.getZoom())
+
+  // Do nothing if zoom did not change. We need to recheck the field if the
+  // zoom level is different then when the field was rendered as it could
+  // now be appropriate or not to show an MU count
+  var old = findEntityInLeaflet(fieldsLayer, window.fields, ent[0]);
+  if(old) {
+    if(map.getZoom() == old.options.creationZoom) return;
+	var layerCount = 0;
+	old.eachLayer(function(item) {
+		layerCount++;
+	});
+	if(areaZoomRatio > FIELD_MU_DISPLAY_AREA_ZOOM_RATIO && layerCount == 2) return;
+	if(areaZoomRatio <= FIELD_MU_DISPLAY_AREA_ZOOM_RATIO && layerCount == 1) return;
+    removeByGuid(ent[0]);
+  }
+
+  var team = getTeam(ent[2]);
 
   var poly = L.polygon(latlngs, {
     fillColor: COLORS[team],
@@ -562,16 +575,21 @@ window.renderField = function(ent) {
   var fieldMu = L.marker(centroid, {
     icon: L.divIcon({
       className: 'fieldmu',
-      iconSize: [100,12],
+      iconSize: [70,12],
-      html: 'MU: ' + digits(ent[2].entityScore.entityScore)}),
+      html: digits(ent[2].entityScore.entityScore)}),
     clickable: false
     });
 
   // put both in one group, so they can be handled by the same logic.
+  if (areaZoomRatio > FIELD_MU_DISPLAY_AREA_ZOOM_RATIO) {
     var f = L.layerGroup([poly, fieldMu]);
+  } else {
+    var f = L.layerGroup([poly]);
+  }
   f.options = {
     vertices: reg,
     lastUpdate: ent[1],
+    creationZoom: map.getZoom(),
     guid: ent[0]
   };
 

code/utils_misc.js

@@ -296,3 +296,8 @@ window.convertTextToTableMagic = function(text) {
   table += '</table>';
   return table;
 }
+
+// Given 3 sets of points in an array[3]{lat, lng} returns the area of the triangle
+window.calcTriArea = function(p) {
+  return Math.abs((p[0].lat*(p[1].lng-p[2].lng)+p[1].lat*(p[2].lng-p[0].lng)+p[2].lat*(p[0].lng-p[1].lng))/2);
+}

main.js

@@ -149,6 +149,8 @@ window.MAX_DRAWN_LINKS = 400;
 window.MAX_DRAWN_FIELDS = 200;
 // Minimum zoom level resonator will display
 window.RESONATOR_DISPLAY_ZOOM_LEVEL = 17;
+// Minimum area to zoom ratio that field MU's will display
+window.FIELD_MU_DISPLAY_AREA_ZOOM_RATIO = 0.001;
 
 window.COLOR_SELECTED_PORTAL = '#f00';
 window.COLORS = ['#FFCE00', '#0088FF', '#03DC03']; // none, res, enl

style.css

@@ -94,12 +94,12 @@ a:hover {
 }
 
 /* field mu count */
-
 .fieldmu {
   color: #FFCE00;
   font-size:13px;
   font-family: "coda",arial,helvetica,sans-serif; /*override leaflet-container */
   text-align: center;
+  text-shadow: 0 0 0.2em black, 0 0 0.2em black, 0 0 0.2em black;
 }