Permalink
Browse files

Added jump links, optional pie chart, changed fusion table styling an…

…d legend code (greatly simplified), and lots of polishing and bug fixes.
  • Loading branch information...
tobinbradley committed Jan 12, 2012
1 parent bb1a7b2 commit 915dab655d2c432b8c94cfa370d9fa01fcd23567
Showing with 288 additions and 324 deletions.
  1. +6 −3 css/style.css
  2. BIN img/quicklink.png
  3. +7 −15 index.html
  4. +47 −115 js/map.js
  5. +160 −181 js/metrics.json
  6. +6 −1 js/plugins.js
  7. +62 −9 js/script.js
View
@@ -264,9 +264,11 @@ input::-moz-placeholder, textarea::-moz-placeholder { color: #7C7C7C; }
/* main map area */
aside { float: left; width: 49%; min-width: 280px; padding-bottom: 10px; }
#map { width: 50%; min-width: 280px; float: right; text-align: right; padding-bottom: 10px; }
-#map-canvas { width: 99%; height: 475px; border: 1px solid #b2b2b2; border-radius: 5px; text-align: left; }
+#map-canvas { position: relative; width: 99%; height: 475px; border: 1px solid #b2b2b2; border-radius: 5px; text-align: left; }
.googft-info-window { text-align: left; }
.googft-info-window h3 { margin-bottom: 5px; }
+#legend { position: absolute; top: 10; right: 10; z-index: -1; margin: 5px 5px 0 0; padding: 5px; background: #fff; border: 1px solid black; box-shadow: 3px 3px 7px #ccc; min-width: 80px; min-height: 50px; }
+#legend span { width: 15px; height: 15px; display: block; float: left; margin-right: 3px; }
/* data area */
@@ -304,12 +306,13 @@ aside { float: left; width: 49%; min-width: 280px; padding-bottom: 10px; }
border-right: 6px solid #a2d6eb;
margin-top: -6px;
}
+.quickLink { background: url("../img/quicklink.png") center right no-repeat; padding: 0 13px 0 0; }
.ie7 .measureDetails h3 a { display: none; } /* hide the busted spiffy thing from IE7 */
#selectedNeighborhood { text-align: center; }
#details_chart { text-align: center; padding-top: 10px; }
-#details_chart img { max-width: 90%; }
+.measuredetails div img { max-width: 90%; }
#permalink a { font-size: 10px; }
-
+#indicator_auxchart { margin-top: 15px; text-align: center; }
/* PDF Report Form */
#report-dialog label { margin-left: 8px; }
View
Binary file not shown.
View
@@ -69,6 +69,7 @@ <h1>Dashboard</h1>
<div id="map">
<select id="mapIndicie"></select>
<div id="map-canvas"></div>
+ <div id="legend" class="hidden"></div>
</div>
<aside>
@@ -91,25 +92,16 @@ <h3>Metric 1 <a href="#" class="transition">Blue</a></h3>
<h4 id="selectedNeighborhood">Neighborhood</h4>
<div id='details_chart' class="chart"><img src="http://chart.apis.google.com/chart?chf=bg,s,00000000&chxr=0,0,100&chxl=1:|2010&chxt=x&chbh=a,4,9&chs=350x75&cht=bhg&chco=4D89F9,C6D9FD&chds=0,100,0,100&chd=t:81|49&chdl=Neightborhood|County+Average&chdlp=t&chg=-1,0" /></div>
<h4>What is this Indicator?</h4>
- <div id="indicator_description">
- In vel auctor ante. Suspendisse rhoncus commodo ipsum, eget consectetur urna aliquet ac. Donec a hendrerit magna. Aliquam erat volutpat. Integer lacinia justo et quam adipiscing pharetra.
- </div>
+ <div id="indicator_description"></div>
+ <div id="indicator_auxchart"></div>
<h4>Why is this Important?</h4>
- <div id="indicator_why">
- In vel auctor ante. Suspendisse rhoncus commodo ipsum, eget consectetur urna aliquet ac. Donec a hendrerit magna. Aliquam erat volutpat. Integer lacinia justo et quam adipiscing pharetra.
- </div>
+ <div id="indicator_why"></div>
<h4>Technical Notes</h4>
- <div id="indicator_technical">
- In vel auctor ante. Suspendisse rhoncus commodo ipsum, eget consectetur urna aliquet ac. Donec a hendrerit magna. Aliquam erat volutpat. Integer lacinia justo et quam adipiscing pharetra.
- </div>
+ <div id="indicator_technical"></div>
<h4>Data Source</h4>
- <div id="indicator_source">
- In vel auctor ante. Suspendisse rhoncus commodo ipsum, eget consectetur urna aliquet ac. Donec a hendrerit magna. Aliquam erat volutpat. Integer lacinia justo et quam adipiscing pharetra.
- </div>
+ <div id="indicator_source"></div>
<h4>Additional Resources</h4>
- <div id="indicator_resources">
- <a href="javascript:void(0)">Link 1</a>, <a href="javascript:void(0)">Link 2</a>, <a href="javascript:void(0)">Link 3</a>
- </div>
+ <div id="indicator_resources"></div>
<h4>Permalink</h4>
<div>
<span id="permalink"><a href=""></a></span>
View
162 js/map.js
@@ -14,11 +14,13 @@ function mapInit() {
};
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
+
+ // add legend div
+ var legendDiv = document.getElementById('legend');
+ map.controls[google.maps.ControlPosition.TOP_RIGHT].push(legendDiv);
// style the base map
styleMap();
-
-
// Add layer
layer = new google.maps.FusionTablesLayer({ query: { select: 'geometry', from: tableID }, map: map });
@@ -41,7 +43,7 @@ function mapInit() {
$("img[src*='mapslt']").each(function(){
$(this).attr("src",$(this).attr("src")+"&"+(new Date()).getTime());
});
- },2000);
+ }, 2000);
}
@@ -74,9 +76,9 @@ function addMarker(lon, lat, featuretype, label) {
infowindow.open(map,marker);
});
- // zoom to marker
- map.setCenter(new google.maps.LatLng(lat, lon));
- map.setZoom(14);
+ // zoom to marker
+ //map.setCenter(new google.maps.LatLng(lat, lon));
+ //map.setZoom(14);
// Intersection
performIntersection(lat, lon);
@@ -125,134 +127,64 @@ function selectNeighborhoodByID(idvalue) {
/**
* Fusion tables layer styling
*/
-function styleFusionTable(measure) {
-
- theField = measure;
+function styleFusionTable(measure) {
// highlight neighborhood if selected
neighborhood = (activeRecord.ID) ? activeRecord.ID : 0;
-
- var defined_styles = measure.style;
- var colors = defined_styles.colors;
- var min_num = defined_styles.min;
- var max_num = defined_styles.max;
- var step = (max_num - min_num) * 1.0 / colors.length;
- var mapStyleJSON = [];
- for (var j = 0; j < colors.length; j++) {
-
- var lower = step * j;
- var upper = step * (j + 1);
- if (j == colors.length - 1) {
- //textBlock.innerHTML = Math.round(lower) + '+';
- mapStyleJSON.push( { where: measure.field + " > " + lower, polygonOptions: { fillColor: colors[j], fillOpacity: 0.5 } });
- } else {
- //textBlock.innerHTML = Math.round(lower) + ' - ' + Math.round(upper);
- mapStyleJSON.push({ where: measure.field + " > " + lower + " and " + measure.field + " < " + upper, polygonOptions: { fillColor: colors[j], fillOpacity: 0.5 } });
- }
-
+ var mapStyleJSON = [];
+
+ if (measure.style.type == "range") {
+ $.each(measure.style.breaks, function(index, value) {
+ if (index == measure.style.breaks.length - 1) {
+ mapStyleJSON.push( { where: measure.field + " > " + value, polygonOptions: { fillColor: measure.style.colors[index], fillOpacity: 0.5 } });
+ }
+ else if (index == 0) {
+ mapStyleJSON.push( { where: measure.field + " < " + measure.style.breaks[index + 1], polygonOptions: { fillColor: measure.style.colors[index], fillOpacity: 0.5 } });
+ }
+ else {
+ mapStyleJSON.push({ where: measure.field + " > " + value + " and " + measure.field + " <= " + measure.style.breaks[index + 1], polygonOptions: { fillColor: measure.style.colors[index], fillOpacity: 0.5 } });
+ }
+ });
+
+ }
+ else if (measure.style.type == "value") {
+
}
mapStyleJSON.push( { where: "ID = " + neighborhood, polygonOptions: { strokeColor: "#rrggbb", strokeWeight: 6 }});
layer.setOptions({ styles: mapStyleJSON });
-
- // Hack for fusion tables tiles not loading
- /*setTimeout(function(){
- $("img[src*='mapslt']").each(function(){
- $(this).attr("src",$(this).attr("src")+"&"+(new Date()).getTime());
- });
- },2000);*/
// Legend
createLegend(measure);
+
}
/**
* Functions to create legend
*/
// Legend
-function createLegend(type) {
- var legendDiv = document.createElement('div');
- var legend = new Legend(legendDiv, type);
- legendDiv.index = 1;
- map.controls[google.maps.ControlPosition.TOP_RIGHT].pop();
- map.controls[google.maps.ControlPosition.TOP_RIGHT].push(legendDiv);
-}
-
-// Generate the content for the legend
-function Legend(controlDiv, type) {
- controlDiv.style.padding = '10px';
- var controlUI = document.createElement('div');
- controlUI.style.backgroundColor = 'white';
- controlUI.style.borderStyle = 'solid';
- controlUI.style.borderWidth = '1px';
- controlUI.style.padding = '5px';
- controlUI.style.width = '80px';
- controlUI.style.height = '80px';
- controlUI.title = 'Legend';
- controlDiv.appendChild(controlUI);
- var controlText = document.createElement('div');
- legendContent(controlText, type);
- controlUI.appendChild(controlText);
-}
-
-function legendContent(controlText, type) {
- controlText.style.fontFamily = 'Arial,sans-serif';
- controlText.style.fontSize = '14px';
- controlText.style.padding = '4px';
-
- var header = document.createElement('p');
- header.style.margin = '0px 0px 5px 0px';
- header.style.fontWeight = 'bold';
- header.innerHTML = 'Legend';
- //controlText.appendChild(header);
-
- var defined_styles = type.style;
- var colors = defined_styles.colors;
- var min_num = defined_styles.min;
- var max_num = defined_styles.max;
- var step = (max_num - min_num) * 1.0 / colors.length;
- for (var j = 0; j < colors.length; j++) {
- var colorBlock = document.createElement('div');
- colorBlock.style.height = '15px';
- colorBlock.style.width = '10px';
- colorBlock.style.margin = '0px 3px 0px 0px';
- colorBlock.style.cssFloat = 'left';
- colorBlock.style.styleFloat = 'left';
- colorBlock.style.clear = 'both';
- colorBlock.style.background = colors[j];
- controlText.appendChild(colorBlock);
-
- var textBlock = document.createElement('p');
- textBlock.style.margin = '0px';
- textBlock.style.cssFloat = 'left';
- textBlock.style.styleFloat = 'left';
- textBlock.style.display = 'inline';
- textBlock.style.width = '55px';
- var lower = step * j;
- var upper = step * (j + 1);
- if (j == colors.length - 1) {
- textBlock.innerHTML = Math.round(lower) + '+';
- } else {
- textBlock.innerHTML = Math.round(lower) + ' - ' + Math.round(upper);
+function createLegend(measure) {
+
+ // empty div
+ $("#legend").empty();
+ $("#legend").show();
+
+ if (measure.style.type == "range") {
+ $.each(measure.style.breaks, function(index, value) {
+ if (index == measure.style.breaks.length - 1) {
+ $("#legend").append('<div><span style="background-color: ' + measure.style.colors[index] + '"></span>> ' + value + '</div>');
+ }
+ else {
+ $("#legend").append('<div><span style="background-color: ' + measure.style.colors[index] + '"></span>' + value + ' - ' + measure.style.breaks[index + 1] + '</div>');
+ }
+ });
}
- controlText.appendChild(textBlock);
- }
-}
-
-
-var layer_styles = {
- 'Base 100': {
- 'min': 0,
- 'max': 100,
- 'colors': [
- '#e0ffd4',
- '#a5ef63',
- '#50aa00',
- '#1f5b10'
- ]
- }
+ else if (measure.style.type == "value") {
+
+ }
+
}
Oops, something went wrong.

0 comments on commit 915dab6

Please sign in to comment.