Created
March 4, 2014 18:52
-
-
Save chrislkeller/9353077 to your computer and use it in GitHub Desktop.
A quick example of creating circle objects from data in a Fusion table and adding them to a map...
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
<style type="text/css" media="screen"> | |
#map-canvas {width: 620px; height: 600px;} | |
.circleBase { | |
-moz-border-radius: 999px; /* Firefox */ | |
-webkit-border-radius: 999px; /* Safari and Chrome */ | |
border-radius: 999px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ | |
behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */ | |
float: left; | |
} | |
.barrettcircle {width: 25px; height: 25px; background: #37949b; opacity: .7} | |
.falkcircle {width: 25px; height: 25px; background: #5341BF; opacity: .7} | |
</style> | |
<!-- begin scripts --> | |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | |
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyBJj_v-VYk6V7vzOIlIj88DiteiuMfpdN4&sensor=false®ion=us"></script> | |
<script type="text/javascript"> | |
var fn = fn || {}; | |
// begin main function | |
$(document).ready(function() { | |
fn.retrieveData(); | |
}); | |
// begin data configuration object | |
var fn = { | |
// array to hold our circle objects | |
countyMap: [], | |
// array to hold info windows we construct | |
infoWindows: [], | |
// retrieve json from fusion table | |
retrieveData: function(){ | |
$.getJSON("https://www.googleapis.com/fusiontables/v1/query?sql=SELECT+*FROM+1OHzhoE2ARzIh0fCfGTn7A9hMIit4neAnlS49oZI&key=AIzaSyBJj_v-VYk6V7vzOIlIj88DiteiuMfpdN4", fn.processData) | |
}, | |
// process json from fusion table | |
processData: function(data){ | |
// see the data coming back from the fusion tables api | |
console.log(data); | |
// shortcuts for accessing columns | |
var cityLatLngColumn = 3; | |
var cityNameColumn = 5; | |
var precinctsColumn = 4; | |
var falkVotesColumn = 6; | |
var falkPctColumn = 7; | |
var barrettVotesColumn = 8; | |
var barrettPctColumn = 9; | |
var cityFormulaColumn = 13; | |
var marginColumn = 12; | |
var cityColorColumn = 16; | |
// loop through the rows to build a circle object for each | |
for (var i = 0; i < data.rows.length; i++) { | |
var row = data.rows[i]; | |
// json source has lat/lng in a single column. split it on comma | |
var cityLatLngRaw = row[cityLatLngColumn]; | |
var commaPos = cityLatLngRaw.indexOf(','); | |
var lat = parseFloat(cityLatLngRaw.substring(0, commaPos)); | |
var lng = parseFloat(cityLatLngRaw.substring(commaPos + 2, cityLatLngRaw.length)); | |
var cityLatLng = new google.maps.LatLng(lat, lng) | |
// build our circle object | |
fn.countyMap[parseInt(i)] = { | |
'center': cityLatLng, | |
'formula': parseFloat(row[cityFormulaColumn]), | |
'name': row[cityNameColumn], | |
'fillColor': row[cityColorColumn], | |
'precincts': row[precinctsColumn], | |
'falkVotes': row[falkVotesColumn], | |
'falk': row[falkPctColumn], | |
'barrettVotes': row[barrettVotesColumn], | |
'barrett': row[barrettPctColumn], | |
'margin': row[marginColumn] | |
} | |
} | |
// see what our array of circle objects looks like | |
console.log(fn.countyMap); | |
// create the map based on the div id | |
fn.createMap("map-canvas"); | |
}, | |
// create the map | |
createMap: function(mapDiv){ | |
var map = new google.maps.Map(document.getElementById(mapDiv), { | |
center: new google.maps.LatLng(44.74648547505308, -89.84939737499997), | |
zoom: 7, | |
scrollwheel: false, | |
draggable: true, | |
mapTypeControl: false, | |
navigationControl: true, | |
streetViewControl: false, | |
panControl: true, | |
scaleControl: true, | |
mapTypeId: google.maps.MapTypeId.ROADMAP, | |
navigationControlOptions: { | |
style: google.maps.NavigationControlStyle.SMALL, | |
position: google.maps.ControlPosition.RIGHT_TOP} | |
}); | |
// add our circles to our map | |
fn.addCirclesToMap(map); | |
}, | |
// function to add our circles to map | |
addCirclesToMap: function(map){ | |
//begin circle loop | |
for (var i = 0; i < fn.countyMap.length; i++) { | |
// construct the circle for each value in countyMap array | |
var circleOptions = { | |
strokeColor: "#000000", | |
strokeOpacity: 0, | |
strokeWeight: 2, | |
fillColor: fn.countyMap[i].fillColor, | |
fillOpacity: 0.7, | |
map: map, | |
clickable: true, | |
center: fn.countyMap[i].center, | |
radius: fn.countyMap[i].formula * .5 | |
}; | |
// create a google map circle | |
var countyCircle = new google.maps.Circle(circleOptions); | |
// add it to the map | |
countyCircle.setMap(map); | |
// create an info window based on this circle | |
fn.createInfoWindowArray(countyCircle.center, fn.countyMap[i].precincts, fn.countyMap[i].falk, fn.countyMap[i].falkVotes, fn.countyMap[i].barrett, fn.countyMap[i].barrettVotes, fn.countyMap[i].margin, fn.countyMap[i].name, i); | |
// add a click event | |
fn.attachClick(countyCircle, i, map); | |
} | |
}, | |
// function to create an info window and push to an array | |
createInfoWindowArray: function(center, precincts, falk, falkVotes, barrett, barrettVotes, margin, name, iwIndex){ | |
// concatenating a whole lot of html | |
recallInfoWindow = | |
'<p style=\'font-family: \"Trebuchet MS\", Verdana, sans-serif; font-size: 13px; color: #555535;\'>' + | |
'<b>' + name + ' County</b><br>' + | |
'Wards reporting: ' + precincts + '<br>' + | |
'<hr style=\"background-color: #e6e6e6; color: #e6e6e6; text-align: center; height: 1px; width: auto;\" />' + | |
'<span style=\'font-family: \"Trebuchet MS\", Verdana, sans-serif; font-size: 13px; color: #555535; line-height: 15px;\'>' + | |
'<b>Barrett votes: </b>' + barrettVotes + ' - ' + barrett + '%<br />' + | |
'<b>Falk votes: </b>' + falkVotes + ' - ' + falk + '%<br>' + | |
'</span>' + | |
'<hr style="background-color: #ebebeb; color: #ebebeb; text-align: center; height: 1px; width: auto;" />' + | |
'<span class=\'googft-info-window\' style=\'font-family: \"Trebuchet MS\", Verdana, sans-serif; font-size: 18px; color: #555535; line-height: 15px;\'><b>Margin of win: </b>' + margin + '</span>' + | |
'</p>'; | |
var iwOptions = { | |
position: center, | |
content: recallInfoWindow, | |
}; | |
fn.infoWindows[iwIndex] = new google.maps.InfoWindow(iwOptions); | |
}, | |
// close an info window if one is open | |
closeExistingIWs: function(){ | |
for (var i = 0; i < fn.infoWindows.length; i++) { | |
fn.infoWindows[i].close(); | |
} | |
}, | |
// open a new info window | |
openIW: function(iwIndex, map){ | |
fn.infoWindows[iwIndex].open(map); | |
}, | |
// add click event to the circle | |
attachClick: function(circle, iwIndex, map){ | |
google.maps.event.addListener (circle, 'click', function(evt) { | |
fn.closeExistingIWs(); | |
fn.openIW(iwIndex, map); | |
}); | |
} | |
} | |
</script> | |
<!-- begin map container --> | |
<div id="map-container"> | |
<div id="map-canvas"></div> | |
</div> | |
<!-- end map container --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment