Skip to content

Instantly share code, notes, and snippets.

@chrislkeller
Created March 4, 2014 18:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chrislkeller/9353077 to your computer and use it in GitHub Desktop.
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...
<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&region=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