Skip to content

Instantly share code, notes, and snippets.

@shearichard
Forked from punkish/index.html
Created November 16, 2012 03:15
Show Gist options
  • Save shearichard/4083682 to your computer and use it in GitHub Desktop.
Save shearichard/4083682 to your computer and use it in GitHub Desktop.
D3 overlaying grid onto maps (forked from original - changed js src to CDN's)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&sensor=false"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/OpenLayers.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<style type="text/css">
#map, #viz {
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 400px;
}
#map {
z-index: -1;
}
#viz {
z-index: 1;
}
</style>
</head>
<body>
<div id="main">
<div id="map" style="border: 1px solid black;"></div>
<div id="viz" style="border: 1px solid black;"></div>
<div id="coords"></div>
</div>
<script type="text/javascript">
var m = {width: 800, height: 400}, grid = {width: 40, height: 40};
grid.cols = m.width / grid.width, grid.rows = m.height / grid.height;
var map = new OpenLayers.Map("map");
map.addLayer(new OpenLayers.Layer.Google(
"Google Physical",
{type: google.maps.MapTypeId.TERRAIN}
));
map.setCenter(new OpenLayers.LonLat(0, 0).transform(
new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")
), 5);
var data = [];
for (var r = 0; r < grid.rows; r++) {
for (var c = 0; c < grid.cols; c++) {
data.push([c, r]);
}
}
var sampleSVG = d3.select("#viz")
.append("svg:svg")
.attr("width", m.width)
.attr("height", m.height);
sampleSVG.selectAll("rect")
.data(data)
.enter()
.append("svg:rect")
.style("stroke", "gray")
.style("fill", "none")
.attr("x", function(i) { return i[0] * grid.width; })
.attr("y", function(i) { return i[1] * grid.height; })
.attr("height", grid.height)
.attr("width", grid.width)
.attr("pointer-events", "all")
.on("mouseover", function() {d3.select(this).style("fill", "yellow");})
.on("mouseout", function() {d3.select(this).style("fill", "none");})
.on("click", function(i) { $("#coords").empty().html( i[1] + " row x " + i[0] + " col")});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment