more work on map data rendering rewrite

marker creation/style changing moved out of rendering code (to allow use from elsewhere, and possible overriding by plugins)

code/map_data_render.js

@@ -9,7 +9,7 @@ window.Render = function() {
 
 
 // start a render pass. called as we start to make the batch of data requests to the servers
-window.Render.prototype.startRenderPass = function() {
+window.Render.prototype.startRenderPass = function(bounds) {
   this.isRendering = true;
 
   this.deletedGuid = {};  // object - represents the set of all deleted game entity GUIDs seen in a render pass
@@ -17,8 +17,24 @@ window.Render.prototype.startRenderPass = function() {
   this.seenPortalsGuid = {};
   this.seenLinksGuid = {};
   this.seenFieldsGuid = {};
+
+  this.minPortalLevel = undefined;
+  // clear all entities outside of the bounds
 }
 
+window.Render.prototype.clearPortalsBelowLevel = function(level) {
+  if (this.minPortalLevel === undefined) {
+    this.minPortalLevel = level;
+    for (var guid in window.portals) {
+      var p = portals[guid];
+      if (parseInt(p.options.level) < level) {
+        this.deletePortalEntity(guid);
+      }
+    }
+  }
+}
+
+
 // process deleted entity list and entity data
 window.Render.prototype.processTileData = function(tiledata) {
   this.processDeletedGameEntityGuids(tiledata.deletedGameEntityGuids||[]);
@@ -165,29 +181,23 @@ window.Render.prototype.createPortalEntity = function(ent) {
 //ALSO: change API for highlighters - make them return the updated style rather than directly calling setStyle on the portal marker
 //(can this be done in a backwardly-compatable way??)
 
-  var marker = this.createMarker(portalLevel, latlng, team);
+  var dataOptions = {
-
-  marker.on('click', function() { window.renderPortalDetails(ent[0]); });
-  marker.on('dblclick', function() { window.renderPortalDetails(ent[0]); window.map.setView(latlng, 17); });
-
-  // we store various portal data within the portal options (style) data for use by IITC
-  // this data is constant throughout the life of the marker (as we destroy and re-create it if the ent data changes)
-  marker.setStyle ({
     level: portalLevel,
     team: team,
     ent: ent,  // LEGACY - TO BE REMOVED AT SOME POINT! use .guid, .timestamp and .details instead
     guid: ent[0],
     timestamp: ent[1],
     details: ent[2]
-  });
+  };
 
+  var marker = createMarker(latlng, dataOptions);
 
-  // portal highlighters
+  marker.on('click', function() { window.renderPortalDetails(ent[0]); });
-  highlightPortal(marker);
+  marker.on('dblclick', function() { window.renderPortalDetails(ent[0]); window.map.setView(latlng, 17); });
 
-  // handle re-rendering of the selected portal
+  // handle highlighting of the selected portal
   if (ent[0] === selectedPortal) {
-    marker.setStyle({color: COLOR_SELECTED_PORTAL});
+    setMarkerStyle (marker, true);
   }
 
 
@@ -200,32 +210,6 @@ window.Render.prototype.createPortalEntity = function(ent) {
 
 }
 
-window.Render.prototype.createMarker = function(portalLevel, latlng, team) {
-
-  var options = this.portalPolyOptions (portalLevel, team);
-
-  var marker = L.circleMarker (latlng, options);
-
-  return marker;
-}
-
-window.Render.prototype.portalPolyOptions = function(portalLevel, team) {
-  var lvWeight = Math.max(2, Math.floor(portalLevel) / 1.5);
-  var lvRadius = team === window.TEAM_NONE ? 7 : Math.floor(portalLevel) + 4;
-
-  var options = {
-    radius: lvRadius + (L.Browser.mobile ? PORTAL_RADIUS_ENLARGE_MOBILE : 0),
-    color: COLORS[team],
-    opacity: 1,
-    weight: lvWeight,
-    fillColor: COLORS[team],
-    fillOpacity: 0.5,
-    clickable: true
-  };
-
-  return options;
-}
-
 
 window.Render.prototype.createFieldEntity = function(ent) {
   this.seenFieldsGuid[ent[0]] = true;  // flag we've seen it

code/portal_detail_display.js

@@ -150,13 +150,14 @@ window.clearPortalIndicators = function() {
 window.selectPortal = function(guid) {
   var update = selectedPortal === guid;
   var oldPortal = portals[selectedPortal];
-//  if(!update && oldPortal) portalResetColor(oldPortal);
+  if(!update && oldPortal) setMarkerStyle(oldPortal,false);
 
   selectedPortal = guid;
 
   if(portals[guid]) {
 //    resonatorsSetSelectStyle(guid);
-    portals[guid].bringToFront().setStyle({color: COLOR_SELECTED_PORTAL});
+    portals[guid].bringToFront();
+   setMarkerStyle(portals[guid], true);
   }
 
   return update;
@@ -165,7 +166,7 @@ window.selectPortal = function(guid) {
 
 window.unselectOldPortal = function() {
   var oldPortal = portals[selectedPortal];
-//  if(oldPortal) portalResetColor(oldPortal);
+  if(oldPortal) setMarkerStyle(oldPortal,false);
   selectedPortal = null;
   $('#portaldetails').html('');
   if(isSmartphone()) {

code/portal_highlighter.js

@@ -4,7 +4,6 @@
 
 window._highlighters = null;
 window._current_highlighter = localStorage.portal_highlighter;
-window.changing_highlighters = false;
 window._no_highlighter = 'No Highlights';
 
 window.addPortalHighlighter = function(name, callback) {
@@ -46,10 +45,8 @@ window.portalHighlighterControl = function() {
 }
 
 window.changePortalHighlights = function(name) {
-  changing_highlighters = true;
   _current_highlighter = name;
   resetHighlightedPortals();
-  changing_highlighters = false;
   localStorage.portal_highlighter = name;
 }
 
@@ -62,10 +59,7 @@ window.highlightPortal = function(p) {
 }
 
 window.resetHighlightedPortals = function() {
-  $.each(portals, function(ind, portal) {
+  $.each(portals, function(guid, portal) {
-    try {
+    setMarkerStyle(portal, guid === selectedPortal);
-      renderPortal(portal.options.ent);
-    }
-    catch(e) {}
   });
 }

code/portal_marker.js

@@ -1,26 +1,50 @@
 // PORTAL MARKER //////////////////////////////////////////////
 // code to create and update a portal marker
 
-// sequence of calls:
-// 1. var marker = createMarker();
-// 2. // IITC (elsewhere) sets up options.details, options.guid, etc
-// 3. // IITC (elsewhere) calls marker.setLatLng()
-// 3. setMarkerStyle(selected);
 
 
-// create a blank marker. no data specified at this point
+
-window.createMarker = function() {
+// create a new marker. 'data' contain the IITC-specific entity data to be stored in the object options
-  return new L.CircleMarker();
+window.createMarker = function(latlng, data) {
+
+  // we assume non-selected - a selected portal will have an additional call to setMarkerStyle.
+  // inefficient - but it's only for a single portal
+  var styleOptions = window.getMarkerStyleOptions(data, false);
+
+  var options = L.extend({}, data, styleOptions, { clickable: true });
+
+  var marker = L.circleMarker(latlng, options);
+
+  highlightPortal(marker);
+
+  return marker;
 }
 
 
-window.setMarkerStyle = function(selected) {
+window.setMarkerStyle = function(marker, selected) {
+
+  var styleOptions = window.getMarkerStyleOptions(marker.options, selected);
+
+  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);
+}
+
+
+window.getMarkerStyleOptions = function(details, selected) {
+  var lvlWeight = Math.max(2, Math.floor(details.level) / 1.5);
+  var lvlRadius = details.team === window.TEAM_NONE ? 7 : Math.floor(details.level) + 4;
 
   var options = {
+    radius: lvlRadius + (L.Browser.mobile ? PORTAL_RADIUS_ENLARGE_MOBILE : 0),
+    color: selected ? COLOR_SELECTED_PORTAL : COLORS[details.team],
+    opacity: 1,
+    weight: lvlWeight,
+    fillColor: COLORS[details.team],
+    fillOpacity: 0.5
   };
 
-  // call highlighter
+  return options;
-
-
-
 }

code/utils_misc.js

@@ -223,35 +223,27 @@ window.reportPortalIssue = function(info) {
     location.href = 'https://support.google.com/ingress?hl=en&contact=1';
 }
 
-window._storedPaddedBounds = undefined;
-window.getPaddedBounds = function() {
-  if(_storedPaddedBounds === undefined) {
-    map.on('zoomstart zoomend movestart moveend', function() {
-      window._storedPaddedBounds = null;
-    });
-  }
-  if(window._storedPaddedBounds) return window._storedPaddedBounds;
-
-  var p = window.map.getBounds().pad(VIEWPORT_PAD_RATIO);
-  window._storedPaddedBounds = p;
-  return p;
-}
-
 
 window.getPortalDataZoom = function() {
-  var z = map.getZoom();
+  var mapZoom = map.getZoom();
 
-  // on mobile (at least), the map zoom has been non-integer occasionally. fix it.
+  var z = mapZoom;
-  z = Math.floor(z);
 
   // limiting the mazimum zoom level for data retrieval reduces the number of requests at high zoom levels
   // (as all portal data is retrieved at z=17, why retrieve multiple z=18 tiles when fewer z=17 would do?)
   // very effective along with the new cache code
   if (z > 17) z=17;
 
-  // we could consider similar zoom-level consolidation, as, e.g. level 16 and 15 both return L1+, always
+  // if the data zoom is above the map zoom we can step back if the detail level is the same
-  // request zoom 15 tiles. however, there are quirks in the current data stream, where small fields aren't
+  // with the new cache code this works rather well
-  // returned by the server. using larger tiles always would amplify this issue.
+  var minZoom = mapZoom;
+  // due to the new smaller tiles used for zoom <= 12, we can get away with using further out tiles
+  // this can mean better use of the cache, and less load on the niantic servers
+  if (mapZoom <= 12 && mapZoom > 0) minZoom -= 2;
+
+  while (z > minZoom && getMinPortalLevelForZoom(z) == getMinPortalLevelForZoom(z-1)) {
+    z = z-1;
+  }
 
   //sanity check - should never happen
   if (z < 0) z=0;
@@ -259,6 +251,7 @@ window.getPortalDataZoom = function() {
   return z;
 }
 
+
 window.getMinPortalLevelForZoom = function(z) {
 //based on code from stock gen_dashboard.js
   switch(z) {

main.js

@@ -233,15 +233,17 @@ window.DEG2RAD = Math.PI / 180;
 // global variables used for storage. Most likely READ ONLY. Proper
 // way would be to encapsulate them in an anonymous function and write
 // getters/setters, but if you are careful enough, this works.
-var refreshTimeout;
+window.refreshTimeout = undefined;
-var urlPortal = null;
+window.urlPortal = null;
 window.playersToResolve = [];
 window.playersInResolving = [];
 window.selectedPortal = null;
 window.portalRangeIndicator = null;
 window.portalAccessIndicator = null;
 window.mapRunsUserAction = false;
-var portalsLayers, linksLayer, fieldsLayer;
+window.portalsLayers = undefined;
+window.linksLayer = undefined;
+window.fieldsLayer = undefined;
 
 // contain references to all entities loaded from the server. If render limits are hit,
 // not all may be added to the leaflet layers