The size of Wales.
To build wales.json:
curl -O "http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/10m/cultural/ne_10m_admin_0_map_subunits.zip" && unzip ne_10m_admin_0_map_subunits.zip && ogr2ogr -f GeoJSON -where "SUBUNIT IN ('Wales')" wales.subunit.json ne_10m_admin_0_map_subunits.shp && topojson --id-property su_a3 -p name=NAME -p name -o wales.json wales.subunit.json
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <style> | |
| html, body, #map-canvas { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .wales path { | |
| fill: #FF0000; | |
| stroke: #FF0000; | |
| stroke-width: 2; | |
| stroke-opacity: 0.3; | |
| fill-opacity: 0.2; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map-canvas"></div> | |
| <script type="text/javascript"> | |
| function initGoogleMaps() { | |
| var mapOptions = { | |
| center: new google.maps.LatLng(54.239551,-5.405273), | |
| zoom: 6, | |
| mapTypeId: google.maps.MapTypeId.ROADMAP | |
| }; | |
| map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); | |
| } | |
| google.maps.event.addDomListener(window, 'load', initGoogleMaps); | |
| d3.json("wales.json", function(error, json) { | |
| var overlay = new google.maps.OverlayView(); | |
| overlay.onAdd = function() { | |
| var layer = d3.select(this.getPanes().overlayLayer).append("div") | |
| .attr("class", "wales"); | |
| var svg = layer.append("svg") | |
| .attr("width", 100000) | |
| .attr("height", 100000); | |
| var wales = svg.append("g") | |
| .attr("class", "wales"); | |
| overlay.draw = function() { | |
| var d3Prj = this.getProjection(); | |
| var gPrj = function (c) { | |
| var latLng = new google.maps.LatLng(c[1], c[0]); | |
| var p = d3Prj.fromLatLngToDivPixel(latLng); | |
| return [p.x, p.y]; | |
| } | |
| var path = d3.geo.path().projection(gPrj); | |
| wales.selectAll("path") | |
| .data(topojson.feature(json, json.objects.wales).features) | |
| .attr("d", path) | |
| .enter().append("path") | |
| .attr("d", path); | |
| }; | |
| }; | |
| overlay.setMap(map); | |
| }); | |
| </script> | |
| </body> | |
| </html> |