This repository has been archived by the owner on Mar 3, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #13 from austinmoffa/refactor
Refactor main.js to modules
- Loading branch information
Showing
11 changed files
with
1,865 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,236 @@ | ||
var MaxMapChoroplethHelper = (function() { | ||
var queryParams, providers, base_layers, map, data_obj, map_params; | ||
|
||
var initSharedVars = function() { //convenience function | ||
queryParams = MaxMap.shared.queryParams; | ||
providers = MaxMap.providers; | ||
base_layers = MaxMap.shared.base_layers; | ||
map = MaxMap.shared.map; | ||
data_obj = MaxMap.shared.data_obj; | ||
map_params = MaxMap.shared.map_params; | ||
} | ||
|
||
/******************************** | ||
* Choropleth display helper functions | ||
*/ | ||
var getStyledChoroplethLabel = function(dataset, where) { | ||
var styledLabel = $("<span>"); | ||
styledLabel.css("font-weight", "bold"); | ||
styledLabel.text(dataset.label); | ||
if (dataset && dataset.hasOwnProperty("colors")) { | ||
var gradientBox = getChoroplethGradientBox(40, "px", 14, "px", dataset.colors, where); | ||
return gradientBox + styledLabel.prop("outerHTML"); | ||
} else { | ||
//console.log("Couldn't create gradient box for dataset "+dataset.slug+" -- no colors provided"); | ||
return styledLabel.prop("outerHTML"); | ||
} | ||
} | ||
|
||
function getChoroplethGradientBox(width, width_measure, height, height_measure, colors, where, orientation) { | ||
var colorBoxDiv = (where === undefined) ? "<div class=\"colorbox\"></div>" : "<div class=\"colorbox colorbox-"+where+"\"></div>"; | ||
var aDiv; | ||
var gradientBox = $(colorBoxDiv); | ||
gradientBox.width(width.toString()+width_measure) | ||
.height(height.toString()+height_measure) | ||
.css("border-width","0px") | ||
.css("padding","0") | ||
.css("line-height", "0") | ||
.css("vertical-align","middle"); | ||
colors.forEach(function (col) { | ||
aDiv = $("<div></div>") | ||
.css("border-width", "0px") | ||
.css("margin", "0") | ||
.css("padding", "0") | ||
.css("vertical-align","middle"); | ||
if (orientation && orientation === "vertical") { | ||
aDiv.width("100%") | ||
.height((100 / colors.length).toString()+"%"); | ||
} else { | ||
aDiv.height("100%") | ||
.width((100 / colors.length).toString()+"%") | ||
.css("display", "inline-block"); | ||
} | ||
if (queryParams.report) { | ||
aDiv.css("box-shadow","inset 0 0 0 1000px "+col); | ||
} else { | ||
aDiv.css("background-color", col); | ||
} | ||
if (orientation && orientation === "vertical") { | ||
gradientBox.append(aDiv); | ||
} else { | ||
gradientBox.prepend(aDiv); | ||
} | ||
}); | ||
return gradientBox.prop("outerHTML"); | ||
} | ||
var getBaselineChoropleths = function() { | ||
return map.baselineChoropleths; | ||
} | ||
|
||
var getChoropleths = function() { | ||
return Object.keys(data_obj).map(function(dataset) { | ||
if (data_obj.hasOwnProperty(dataset) | ||
&& data_obj[dataset].type === "choropleth") { | ||
return data_obj[dataset].layer_data; | ||
} | ||
}); | ||
} | ||
var getChoroplethVariableLabel = function(dataset, props) { | ||
var varlabels = dataset.variable_label; | ||
if (varlabels instanceof Array) { | ||
return varlabels.map(function (k) { | ||
return props[k]; | ||
}).join(", "); | ||
} | ||
return props[varlabels]; | ||
} | ||
|
||
var getChoroplethVariable = function(dataset, props) { | ||
return props[dataset.variable]; | ||
} | ||
|
||
var setChoroplethDisplayFunctions = function(dataset, cd) { | ||
cd.reset = function() { | ||
var hoverMessage = this.dataset.hover_instructions || map_params.default_hover_instructions; | ||
this.element.html("<strong>"+hoverMessage+"</strong>"); | ||
}; | ||
if (dataset.hasOwnProperty("colors")) { | ||
var cols = dataset.colors; | ||
for (var i = 0; i < cols.length; i++) { | ||
var col = cols[i]; | ||
cd[col] = '<div class="colorbox colorbox-popup" style="background-color:'+ | ||
col + '; height: 100px; margin: 0 auto; padding: 0; width: 25px;">'+ | ||
getChoroplethGradientBox(8, "px", 100, "%", cols, "info-gradient", "vertical")+ | ||
'</div>'; | ||
} | ||
} | ||
cd.update = function (e) { | ||
if (e && e.hasOwnProperty("target") && e.target.hasOwnProperty("feature") && e.target.feature.hasOwnProperty("properties")) { | ||
var props = e.target.feature.properties; | ||
if (this.dataset.category === "baseline") { | ||
this.element.html("<div>" | ||
+ this[MaxMap.providers.display.getColor(this.dataset, Math.round(this.variable(props)))] | ||
+ '<div class="choropleth-display-info"><strong>' + this.variable_label(props) | ||
+ "</strong><p><strong style=\"font-size: 2.0em;\">" | ||
+ Math.round(this.variable(props)) + "%</strong> " | ||
+ this.dataset.label+"</p></div>"); | ||
} | ||
if (this.dataset.category === "summary") { | ||
this.element.html("<div>" | ||
+ this[MaxMap.providers.display.getColor(this.dataset, Math.round(this.variable(props)))] | ||
+ '<div class="choropleth-display-info"><strong>' + this.variable_label(props) | ||
+ "</strong><p><strong style=\"font-size: 2.0em;\">" | ||
+ Math.round(this.variable(props)) + "</strong> initiatives</p></div>"); | ||
} | ||
} else { | ||
this.reset() | ||
} | ||
}; | ||
return cd; | ||
} | ||
|
||
var createChoroplethDisplay = function(dataset) { | ||
var cd = { | ||
"dataset": dataset, | ||
variable: function (p) { | ||
return getChoroplethVariable(dataset, p); | ||
}, | ||
variable_label: function (p) { | ||
return getChoroplethVariableLabel(dataset, p); | ||
}, | ||
"element": $('<div></div>').addClass('choropleth-display'), | ||
currentShape: null, | ||
outerHTML: function() { return this.element.prop('outerHTML'); } | ||
}; | ||
cd = setChoroplethDisplayFunctions(dataset, cd); | ||
return cd; | ||
} | ||
|
||
var styleChoroplethRegion = function(dataset, region) { | ||
var layerProps = region.feature.properties; | ||
var variable = parseInt(getChoroplethVariable(dataset, layerProps), 10); | ||
var theColor = MaxMap.providers.display.getColor(dataset, variable); | ||
region.setStyle({ "color": theColor }); | ||
} | ||
|
||
var addChoroplethRegionEventHandlers = function(region) { | ||
region.on("mouseover", function(e) { | ||
var targets = {}; | ||
MaxMap.providers.layers.getSummaryOverlays().map( function(summary) { | ||
var poly = MaxMap.providers.polygon.getLocationsForPointInDataset(e.latlng, data_obj[summary]); | ||
if (poly.length) { targets[summary] = poly[0]; } | ||
}); | ||
getBaselineChoropleths().map( function(choro) { | ||
var poly = MaxMap.providers.polygon.getLocationsForPointInDataset(e.latlng, data_obj[choro]); | ||
if (poly.length) { targets[choro] = poly[0]; } | ||
}); | ||
for (var overlay in targets) { | ||
if (targets.hasOwnProperty(overlay)) { | ||
if (targets[overlay]) { | ||
e.target = targets[overlay]; | ||
data_obj[overlay].choroplethLegend.update(e); | ||
} else { | ||
data_obj[overlay].choroplethLegend.update(); | ||
} | ||
} | ||
} | ||
}); | ||
region.on("mouseout", function(e) { | ||
MaxMap.providers.layers.getSummaryOverlays().forEach(function(overlay) { | ||
data_obj[overlay].choroplethLegend.update(); | ||
}); | ||
getBaselineChoropleths().forEach(function(overlay) { | ||
data_obj[overlay].choroplethLegend.update(); | ||
}); | ||
}); | ||
region.on("click", MaxMap.providers.display.displayPopup); | ||
} | ||
|
||
var choroplethUpdateCallback = function (e) { | ||
var legendString = "<strong>Legend: "+this.dataset.label+"</strong>"; | ||
var colors = this.dataset.colors; | ||
var thresholds = this.dataset.thresholds; | ||
legendString += '<div class="choropleth-legend-content">'; | ||
for (var i = 0; i < thresholds.length; i++) { | ||
if (i == 0) { | ||
legendString += '<div class="choropleth-legend-element">' | ||
+'<div class="colorbox colorbox-popup" style="background-color:' | ||
+colors[i]+";border-color:"+colors[i]+";\"></div><span>" | ||
+"> "+(thresholds[i]+1)+"</span></div>"; | ||
} else { | ||
legendString += '<div class="choropleth-legend-element">' | ||
+'<div class="colorbox colorbox-popup" style="background-color:' | ||
+colors[i]+";border-color:"+colors[i]+";\"></div><span>" | ||
+(thresholds[i]+1)+" - "+(thresholds[i-1])+"</span></div>"; | ||
} | ||
} | ||
legendString += '<div class="choropleth-legend-element">' | ||
+'<div class="colorbox colorbox-popup" style="background-color:' | ||
+colors[colors.length-1]+";border-color:"+colors[colors.length-1]+";\"></div>" | ||
+"<span>< "+(thresholds[thresholds.length-1])+"</span></div>"; | ||
legendString += "</div>"; | ||
this.display.update(e); | ||
legendString += this.display.outerHTML(); | ||
if (this.dataset.hasOwnProperty("legend_credits") && this.dataset.legend_credits) { | ||
var creditString = this.dataset.legend_credits; | ||
legendString += '<div class="choropleth-legend-data-credits">'+creditString | ||
+' (<a href="'+ MaxMap.providers.data.getAboutDataPath(map_params)+'#'+this.dataset.slug | ||
+'" target="_blank">more</a>)</div>'; | ||
} | ||
$(this._div).html(legendString); | ||
}; | ||
|
||
|
||
return { | ||
initSharedVars: initSharedVars, | ||
getStyledChoroplethLabel: getStyledChoroplethLabel, | ||
getChoropleths: getChoropleths, | ||
getBaselineChoropleths: getBaselineChoropleths, | ||
styleChoroplethRegion: styleChoroplethRegion, | ||
addChoroplethRegionEventHandlers: addChoroplethRegionEventHandlers, | ||
getChoroplethVariableLabel: getChoroplethVariableLabel, | ||
getChoroplethVariable: getChoroplethVariable, | ||
createChoroplethDisplay: createChoroplethDisplay, | ||
choroplethUpdateCallback: choroplethUpdateCallback, | ||
}; | ||
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
var MaxMap = (function() { | ||
var providers = {}; | ||
var shared= { | ||
//map, data_obj, map_params, numDatasets, layerOrdering, choropleths, queryParams, base_layers | ||
overlayCount: 0, | ||
}; | ||
|
||
var getProviders = function() { | ||
return providers; | ||
} | ||
|
||
var init = function () { | ||
this.providers = { | ||
choropleth: MaxMapChoroplethHelper, | ||
data: MaxMapDataProvider, | ||
display: MaxMapDisplayHelper, | ||
driver: MaxMapDriver, | ||
layers: MaxMapLayerHelper, | ||
map: MaxMapLeaflet, | ||
polygon: MaxMapPolygonHelper, | ||
query: MaxMapQueryParser, | ||
marker: MaxMapMarkers | ||
}; | ||
this.providers.driver.init(); | ||
} | ||
|
||
return { | ||
providers: providers, | ||
shared: shared, | ||
init: init, | ||
} | ||
|
||
})(); | ||
|
||
MaxMap.init(); |
Oops, something went wrong.