map.js
ResidentResearch = window.ResidentResearch || {};
ResidentResearch.map = function() {
var elementId = "",
popupOpened = false,
geojson = {},
style = {},
dataLayer = {},
map = {};
var getTemplateData = function(properties) {
var templateData = {
tractName: properties.name,
population: numberWithCommas(properties['2013_population_estimate']),
geoid: properties.geoid,
round: (properties.responses > 0 ? '~ ': ''),
responsePlural: (Math.ceil(properties.responses) == 1 ? '': 's'),
responses: Math.ceil(properties.responses)
}
if(properties.data) {
templateData.white = Math.ceil(properties.data["white percentage"].estimate);
templateData.black = Math.ceil(properties.data["black percentage"].estimate);
templateData.hispanic = Math.ceil(properties.data["hispanic percentage"].estimate);
templateData.asian = Math.ceil(properties.data["asian percentage"].estimate);
templateData.rentalPercentage = Math.ceil(properties.data["rental percentage"].estimate);
templateData.income = numberWithCommas(Math.ceil(properties.data["B19301001"].estimate));
}
return templateData;
};
var resetStyle = function(e) {
if(!popupOpened) {
dataLayer.setStyle(style);
}
popupOpened = false;
}
var highlightFeature= function(e) {
popupOpened = true;
dataLayer.setStyle(style);
var layer = e.target;
layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
}
var optionsForGeojson = function() {
var extent = calculateExtent(geojson.features),
xmin = extent[0], ymin = extent[1],
xmax = extent[2], ymax = extent[3],
center = new L.LatLng(ymax/2 + ymin/2, xmax/2 + xmin/2),
northeast = new L.LatLng(ymax, xmax),
southwest = new L.LatLng(ymin, xmin),
maxBounds = new L.latLngBounds(northeast, southwest),
options = {
center: center, zoom: 12,
maxBounds: maxBounds, minZoom: 9, maxZoom: 16,
scrollWheelZoom: false, attributionControl: false
};
return options;
};
var setEventListener = function() {
map.on('popupclose', resetStyle);
map.on('popupopen', function() { popupOpened = false; });
};
var layerOrderingHack = function(layer) {
var topPane = map._createPane('leaflet-top-pane', map.getPanes().mapPane);
topPane.appendChild(layer.getContainer());
layer.setZIndex(9);
};
var initMap = function() {
var layerOptions = { detectRetina: true },
tileLayerBg = new L.TileLayer(stamenLayer('toner-background', L.Browser.retina)),
tileLayerLabels = new L.TileLayer(stamenLayer('toner-labels', L.Browser.retina));
map = new L.Map(elementId, optionsForGeojson());
map.addLayer(tileLayerBg);
map.addLayer(tileLayerLabels);
map.addControl(attributions());
dataLayer = L.geoJson(geojson, {style: choropleth_style_null, onEachFeature: onEachFeature}).addTo(map);
setEventListener();
layerOrderingHack(tileLayerLabels);
return this;
};
var attributions = function() {
var attr = L.control.attribution({prefix: '', position: 'bottomright'});
attr.addAttribution('Demographic data via <a target="_blank" href="http://censusreporter.org">Census Reporter</a>');
attr.addAttribution('<a target="_blank" href="http://maps.stamen.com">Cartography</a> by <a target="_blank" href="http://stamen.com">Stamen</a>');
attr.addAttribution('Map Data <a target="_blank" href="http://www.openstreetmap.org/copyright">© OSM contributors</a>');
return attr;
};
var calculateExtent = function(features) {
var envelope, feature,
featureLength = features.length;
for(var i = 0; i < featureLength; i++)
{
feature = features[i];
if(envelope == undefined) {
envelope = turf.envelope(feature);
} else {
envelope = turf.envelope(turf.union(envelope, feature));
}
}
return turf.extent(turf.buffer(envelope, 6, 'kilometers'));
};
onEachFeature = function(feature, layer) {
layer.on({
click: highlightFeature
});
var templateData = getTemplateData(feature.properties);
if(feature.properties.data) {
html = document.getElementById("response-popup").innerHTML;
popupContent = L.Util.template(html, templateData);
}else {
popupContent = L.Util.template(tooltipTemplate(), templateData);
}
layer.bindPopup(popupContent);
};
return {
init: function(element, gjson) {
elementId = element;
geojson = gjson;
initMap();
},
updateDataLayer: function() {
dataLayer.clearLayers();
dataLayer.addData(geojson);
},
setData: function(data) {
geojson = data;
this.updateDataLayer();
},
setStyle: function(newStyle) {
style = newStyle;
},
reloadStyle: function() {
dataLayer.setStyle(style);
},
addControl: function(control) {
map.addControl(control);
},
};
}