Skip to content

Instantly share code, notes, and snippets.

@typeofgraphic
Created January 4, 2013 23:47
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save typeofgraphic/4458566 to your computer and use it in GitHub Desktop.
Adaptation of Google Maps + D3.js Data file looks like this: [ {"country": "eth", "city": "adis abeba", "time": "2012-12-04T04:00:00", "count": 5}, {"country": "deu", "city": "munich", "time": "2012-12-04T19:00:00", "count":21}, {"country": "chn", "city": "wuhan", "time": "2012-12-04T18:00:00", "count": 1}, {"country": "usa", "city": "winthrop",…
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
<style type="text/css">
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.stations, .stations svg {
position: absolute;
}
.stations svg {
width: 60px;
height: 20px;
padding-right: 100px;
font: 10px sans-serif;
}
.stations circle {
fill: brown;
stroke: black;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// Create the Google Map…
var map = new google.maps.Map(d3.select("#map").node(), {
zoom: 2,
center: new google.maps.LatLng(37.76487, -122.41948),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
//geocoding
var geocoder = new google.maps.Geocoder();
var d3pos = { };
// Load the station data. When the data comes back, create an overlay.
d3.json("countryCityTimeAlt.json", function(data) {
var overlay = new google.maps.OverlayView();
// Add the container when the overlay is added to the map.
overlay.onAdd = function() {
var layer = d3.select(this.getPanes().overlayLayer).append("div")
.attr("class", "stations");
// Draw each marker as a separate SVG element.
// We could use a single SVG, but what size would it have?
overlay.draw = function() {
var projection = this.getProjection(),
padding = 10;
var marker = layer.selectAll("svg")
.data(data)
.each(transform) // update existing markers
.enter().append("svg:svg")
.each(geo)
.each(transform)
.attr("class", "marker");
// Add a circle.
marker.append("svg:circle")
.attr("r", 4.5)
.attr("cx", padding)
.attr("cy", padding);
// Add a label.
marker.append("svg:text")
.attr("x", padding + 7)
.attr("y", padding)
.attr("dy", ".31em")
.text(function(d) { return d.count; });
function geo(d) {
geocoder.geocode( { 'address': d.city}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var point = {
position: results[0].geometry.location
};
d3pos = { lat: point.position.Ya,
lon : point.position.Za
};
console.log(d3pos.lat, d3pos.lon)
return d3pos
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
console.log(d3pos.lat, d3pos.lon);
function transform(d) {
d = new google.maps.LatLng(d3pos.lat, d3pos.lon)
d = projection.fromLatLngToDivPixel(d);
return d3.select(this)
.style("left", (d.x - padding) + "px")
.style("top", (d.y - padding) + "px");
}
};
};
// Bind our overlay to the map…
overlay.setMap(map);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment