portal marker scaling: when zoomed out, reduce the scale of portal markers

the stock intel map has done this for a while, so lets try it in IITC
This commit is contained in:
Jon Atkins 2014-01-26 17:53:10 +00:00
parent 9efe828ccb
commit 980e136508
3 changed files with 24 additions and 6 deletions

View File

@ -7,7 +7,7 @@ window.Render = function() {
// when there are lots of portals close together, we only add some of them to the map
// the idea is to keep the impression of the dense set of portals, without rendering them all
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_SIZE = L.Browser.mobile ? 10 : 4; // 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
@ -15,6 +15,8 @@ window.Render = function() {
this.LINK_VISIBLE_PIXEL_LENGTH = this.CLUSTER_SIZE;
this.entityVisibilityZoom = undefined;
this.portalMarkerScale = undefined;
}
@ -426,6 +428,15 @@ window.Render.prototype.updateEntityVisibility = function() {
this.resetPortalClusters();
this.resetLinkVisibility();
if (this.portalMarkerScale === undefined || this.portalMarkerScale != portalMarkerScale()) {
this.portalMarkerScale = portalMarkerScale();
console.log('Render: map zoom '+map.getZoom()+' changes portal scale to '+portalMarkerScale()+' - redrawing all portals');
//NOTE: we're not calling this because it resets highlights - we're calling it as it resets the style (inc size) of all portal markers
resetHighlightedPortals();
}
}
}

View File

@ -2,7 +2,10 @@
// code to create and update a portal marker
window.portalMarkerScale = function() {
var zoom = map.getZoom();
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) {
@ -35,11 +38,13 @@ window.setMarkerStyle = function(marker, selected) {
window.getMarkerStyleOptions = function(details) {
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 scale = window.portalMarkerScale();
var lvlWeight = Math.max(2, Math.floor(details.level) / 1.5) * scale;
var lvlRadius = (details.team === window.TEAM_NONE ? 7 : Math.floor(details.level) + 4) * scale;
var options = {
radius: lvlRadius + (L.Browser.mobile ? PORTAL_RADIUS_ENLARGE_MOBILE : 0),
radius: lvlRadius + (L.Browser.mobile ? PORTAL_RADIUS_ENLARGE_MOBILE*scale : 0),
stroke: true,
color: COLORS[details.team],
weight: lvlWeight,

View File

@ -22,7 +22,9 @@
window.plugin.portalHighlighterHideOwnership = function() {};
window.plugin.portalHighlighterHideOwnership.highlight = function(data) {
var params = {fillColor: COLORS[TEAM_NONE], color: COLORS[TEAM_NONE], opacity: 1, fillOpacity: 0.5, radius: 7+(L.Browser.mobile ? PORTAL_RADIUS_ENLARGE_MOBILE : 0), weight: 2};
var scale = window.portalMarkerScale();
var params = {fillColor: COLORS[TEAM_NONE], color: COLORS[TEAM_NONE], opacity: 1, fillOpacity: 0.5, radius: 7*scale+(L.Browser.mobile ? PORTAL_RADIUS_ENLARGE_MOBILE*scale : 0), weight: 2};
data.portal.setStyle(params);
}