<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v3.js"></script>
<script src="https://unpkg.com/topojson@3"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="map-container"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="script.js"></script>
</body>
</html>
/* Styles go here */
body,
html,
#map-container {
width: 100%;
height: 100%;
}
D3 Projection on Google Maps
[Details are on my blog]: https://oceanzy.wordpress.com/2017/04/14/d3-projection-on-google-maps/
{"type":"FeatureCollection","totalFeatures":4572,"features":[{"type":"Feature","id":"91e70237_d9d1_4719_a82f_e71b811154c6.1","geometry":{"type":"MultiPolygon","coordinates":[[[[151.11700001,-33.89151547],[151.11698148,-33.89161556],[151.11683972,-33.8916108],[151.11682928,-33.89183047],[151.11674593,-33.89182714],[151.1166635,-33.89182426],[151.11667624,-33.89160442],[151.11652821,-33.89159839],[151.11638009,-33.89159222],[151.11634628,-33.89159134],[151.11631485,-33.89197545],[151.11617214,-33.89197],[151.11611177,-33.89196757],[151.11610363,-33.8920931],[151.11609594,-33.89220096],[151.11608774,-33.89231373],[151.11608042,-33.89242469],[151.11607289,-33.89253562],[151.11651574,-33.89255335],[151.11650571,-33.89269029],[151.11649586,-33.89282852],[151.11638879,-33.89282552],[151.1163801,-33.89296209],[151.11637264,-33.89309849],[151.11653632,-33.89310197],[151.11652273,-33.89333054],[151.11652137,-33.89335041],[151.11660884,-33.89333164],[151.11664534,-33.89341808],[151.11668213,-33.89350421],[151.11668742,-33.89350321],[151.11669285,-33.89350294],[151.11669825,-33.89350341],[151.1167035,-33.8935046],[151.11670843,-33.89350649],[151.11671293,-33.89350904],[151.11671688,-33.89351215],[151.11672016,-33.89351575],[151.1167227,-33.89351976],[151.11672442,-33.89352406],[151.11672528,-33.89352854],[151.11672525,-33.89353306],[151.11672434,-33.89353753],[151.11683299,-33.89351455],[151.1168183,-33.89366537],[151.11680511,-33.89380071],[151.11679642,-33.89388996],[151.11679356,-33.89391928],[151.11679095,-33.89394606],[151.11661717,-33.89572981],[151.11651749,-33.8957356],[151.11611552,-33.89573103],[151.11610241,-33.89573091],[151.11602384,-33.89573048],[151.11552787,-33.89572728],[151.11536681,-33.89572476],[151.11522537,-33.89580116],[151.11507521,-33.89591586],[151.11500454,-33.89605703],[151.11490603,-33.89717932],[151.11489566,-33.89729742],[151.11488594,-33.89740823],[151.11473896,-33.89908279],[151.11472643,-33.89918181],[151.11458105,-33.8991705],[151.11445122,-33.8991603],[151.11441057,-33.8991571],[151.1143736,-33.8991542],[151.11367966,-33.89909966],[151.1135442,-33.899089],[151.11338928,-33.89907683],[151.11261683,-33.89901612],[151.11248359,-33.89900565],[151.11241161,-33.89899984],[151.11193049,-33.89896239],[151.11192804,-33.89898347],[151.11191505,-33.89909198],[151.11188856,-33.89932342],[151.11186637,-33.89945795],[151.11185009,-33.89959469],[151.11183819,-33.89973357],[151.11182065,-33.89987006],[151.11181714,-33.89992081],[151.11180277,-33.90004238],[151.11179054,-33.90014648],[151.11178781,-33.90016902],[151.11177504,-33.9002766],[151.11177386,-33.90028705],[151.11175817,-33.90041598],[151.11174469,-33.90053393],[151.11174126,-33.9005557],[151.11173019,-33.90065666],[151.1117276,-33.90068941],[151.11171591,-33.90077747],[151.11170088,-33.90090481],[151.11169385,-33.90096362],[151.11168659,-33.90102568],[151.11167226,-33.90114695],[151.11166143,-33.90124218],[151.11165761,-33.90127093],[151.11164344,-33.90139087],[151.1116291,-33.9015161],[151.11161302,-33.90164819],[151.11159682,-33.90178531],[151.11158582,-33.90188082],[151.11157597,-33.90196637],[151.11156259,-33.90207659],[151.11154894,-33.90218819],[151.11154023,-33.90224129],[151.11153548,-33.90229818],[151.11152547,-33.90237336],[151.11152143,-33.90241306],[151.11150936,-33.90251174],[151.11150822,-33.90252105],[151.11149467,-33.90263181],[151.11149288,-33.9026474],[151.11148096,-33.90274394],[151.11146595,-33.90286091],[151.11145354,-33.90296806],[151.11143457,-33.90310369],[151.1113658,-33.90309755],[151.1110687,-33.90307061],[151.11104742,-33.9030691],[151.11102748,-33.90306759],[151.11084839,-33.90305407],[151.11065391,-33.90303979],[151.11037485,-33.9030097],[151.11002022,-33.90297148],[151.10968483,-33.90278644],[151.10941892,-33.90264875],[151.10875794,-33.90226164],[151.10805249,-33.90188232],[151.10782896,-33.90183005],[151.10775646,-33.90181716],[151.10763253,-33.90179514],[151.10752733,-33.90179266],[151.10751068,-33.90179227],[151.10749453,-33.90179238],[151.10733019,-33.90179349],[151.10727507,-33.90179264],[151.1071701,-33.90179102],[151.10706326,-33.90178535],[151.1069598,-33.90177985],[151.10623609,-33.90181459],[151.10562076,-33.90183257],[151.10532847,-33.90186436],[151.10523154,-33.90187826],[151.1049581,-33.90191748],[151.10460629,-33.90198168],[151.10429737,-33.90207398],[151.10395807,-33.90221091],[151.10380826,-33.90228607],[151.10355223,-33.90243213],[151.10344235,-33.90249522],[151.10337597,-33.90253334],[151.10318928,-33.90262752],[151.10283753,-33.90279563],[151.10246351,-33.90296046],[151.10225939,-33.90304556],[151.1020431,-33.90309614],[151.10181346,-33.90311221],[151.10160681,-33.90309923],[151.1013539,-33.90305121],[151.10119027,-33.90301329],[151.10115896,-33.90300168],[151.10107243,-33.90297411],[151.10106174,-33.90297092],[151.10103287,-33.9029622],[151.10098709,-33.90294381],[151.10090203,-33.90291164],[151.10083062,-33.90288646],[151.1008161,-33.90288212],[151.10072872,-33.90285826],[151.10061258,-33.90282925],[151.10049531,-33.90280295],[151.10037722,-33.90278048],[151.10025864,-33.902763],[151.10013985,-33.90275164],[151.10003529,-33.90274562],[151.09992975,-33.90274255],[151.09982425,-33.90274412],[151.09971978,-33.90275204],[151.09964147,-33.90276427],[151.09939023,-33.90282824],[151.09911366,-33.90294707],[151.09808326,-33.90345511],[151.09799383,-33.90349665],[151.09795284,-33.90351235],[151.09791161,-33.90352744],[151.09787012,-33.90354192],[151.09782845,-33.9035558],[151.09778659,-33.90356904],[151.09774288,-33.90358247],[151.09769897,-33.90359553],[151.09765485,-33.90360778],[151.09761047,-33.90361873],[151.0975658,-33.90362792],[151.09751321,-33.90363617],[151.09746013,-33.90364217],[151.09740674,-33.90364632],[151.09735327,-33.90364906],[151.09729987,-33.90365079],[151.09724755,-33.9036517],[151.09719511,-33.90365157],[151.09714268,-33.90365011],[151.09709039,-33.90364705],[151.0970384,-33.9036421],[151.0969911,-33.90363591],[151.09694391,-33.90362824],[151.09689691,-33.90361919],[151.0968502,-33.90360885],[151.09678425,-33.90359291],[151.09666803,-33.90355932],[151.09657894,-33.90352669],[151.09648159,-33.90348693],[151.09630325,-33.90339904],[151.09618341,-33.90332497],[151.09605842,-33.90324976],[151.09593357,-33.90316863],[151.09580159,-33.90308791],[151.09565734,-33.90300755],[151.09552669,-33.90292578],[151.09542989,-33.90286124],[151.09538673,-33.90283651],[151.09532538,-33.90280066],[151.09506646,-33.90264062],[151.09486938,-33.90252334],[151.09456732,-33.90233276],[151.09438746,-33.90222598],[151.09427745,-33.90217525],[151.09412933,-33.9021125],[151.0939928,-33.90207331],[151.09381985,-33.90203345],[151.09366073,-33.90201159],[151.09348773,-33.90200299],[151.09335258,-33.90200736],[151.09319403,-33.9020173],[151.09302703,-33.9020298],[151.09285554,-33.90204115],[151.09268532,-33.90205307],[151.09262037,-33.90205779],[151.09251443,-33.90206605],[151.09241034,-33.90206821],[151.09228243,-33.90206623],[151.09216767,-33.90205474],[151.09205964,-33.90203894],[151.09192284,-33.90201086],[151.09178833,-33.90197118],[151.09165635,-33.90192375],[151.09046707,-33.90129072],[151.08977294,-33.90091893],[151.08968741,-33.90087126],[151.08960769,-33.90082422],[151.08951797,-33.90076194],[151.08943924,-33.90069929],[151.08937654,-33.90064174],[151.08931458,-33.90058043],[151.08927176,-33.90053123],[151.08920664,-33.90044684],[151.08915486,-33.90036775],[151.08912849,-33.90032456],[151.0890844,-33.90023901],[151.08904401,-33.90013815],[151.08901138,-33.90003635],[151.08898343,-33.89989905],[151.0889556,-33.89975767],[151.08901015,-33.89971134],[151.08921396,-33.8993352],[151.08934761,-33.89867923],[151.08958032,-33.89754588],[151.08959552,-33.89745703],[151.08961599,-33.89733737],[151.08965743,-33.89713066],[151.08967609,-33.89705818],[151.08968753,-33.89701378],[151.08973423,-33.89671755],[151.08975171,-33.89663638],[151.08977721,-33.896518],[151.08998514,-33.89541619],[151.09000204,-33.89532341],[151.09002589,-33.89519248],[151.09004056,-33.89510665],[151.09006729,-33.89495036],[151.09026089,-33.89394001],[151.09038783,-33.89327754],[151.09040362,-33.89316712],[151.09068152,-33.89317558],[151.09161154,-33.89330368],[151.09169038,-33.89331453],[151.0918163,-33.89333188],[151.09375762,-33.89359926],[151.0938423,-33.89361093],[151.09391155,-33.89362047],[151.09424288,-33.89366607],[151.09433034,-33.89367853],[151.09440874,-33.89368895],[151.09490738,-33.89375763],[151.09525314,-33.89380785],[151.09533664,-33.89381998],[151.09542598,-33.89383296],[151.09842528,-33.89426866],[151.09851114,-33.89428114],[151.09859852,-33.89429383],[151.1000841,-33.89450963],[151.10020259,-33.89452684],[151.10021945,-33.89444623],[151.10035641,-33.89379122],[151.10037497,-33.89370244],[151.10039073,-33.89362711],[151.10064074,-33.89243148],[151.10066436,-33.89231849],[151.10069175,-33.89218753],[151.10080798,-33.89163171],[151.10081851,-33.89154663],[151.10092345,-33.89155983],[151.10194442,-33.89171088],[151.10201491,-33.89172016],[151.10207614,-33.89172859],[151.10239883,-33.89177436],[151.10251487,-33.89179147],[151.1026249,-33.8918077],[151.10352494,-33.89194023],[151.10363287,-33.89195607],[151.10376226,-33.89197498],[151.10456048,-33.89209086],[151.10468353,-33.89210948],[151.10470048,-33.89202374],[151.10483766,-33.8914284],[151.10484876,-33.89136425],[151.10499973,-33.89138713],[151.1052774,-33.89141559],[151.10526661,-33.8914692],[151.105266,-33.89147225],[151.10524545,-33.89157431],[151.10522314,-33.89168258],[151.10520115,-33.89178987],[151.1053311,-33.89180905],[151.10530899,-33.89192269],[151.10546811,-33.89194568],[151.10549396,-33.89181295],[151.10551865,-33.89168929],[151.10554314,-33.89156665],[151.1055509,-33.89152692],[151.10585564,-33.89141305],[151.10586753,-33.89142115],[151.10597594,-33.89138529],[151.10597939,-33.89140523],[151.10592459,-33.89167719],[151.10603535,-33.89169167],[151.10632107,-33.89172905],[151.10646618,-33.89174834],[151.10647186,-33.89172342],[151.10649979,-33.89158993],[151.1066417,-33.89161181],[151.10678731,-33.89163403],[151.10692713,-33.89165554],[151.1070297,-33.89167133],[151.10708636,-33.8913961],[151.10718967,-33.89141067],[151.10733533,-33.89143123],[151.10747704,-33.89145169],[151.10761961,-33.89147255],[151.10776159,-33.89149299],[151.1079094,-33.89151458],[151.10804643,-33.89153374],[151.10826074,-33.89156671],[151.10840827,-33.8915875],[151.10854937,-33.89160721],[151.10868857,-33.89162674],[151.10868243,-33.89165654],[151.10883517,-33.89166207],[151.10897966,-33.89166648],[151.10912462,-33.89167058],[151.10934825,-33.89167209],[151.10950272,-33.89167857],[151.10964887,-33.89168463],[151.10979503,-33.8916908],[151.10993834,-33.89171177],[151.11008639,-33.8917332],[151.11024343,-33.89175524],[151.11047152,-33.89171981],[151.11061809,-33.89173848],[151.11076381,-33.89175791],[151.11090743,-33.89177664],[151.11091381,-33.89174424],[151.11092557,-33.89168899],[151.11106042,-33.89170514],[151.1112047,-33.89172281],[151.11136753,-33.89174273],[151.1115288,-33.89176226],[151.11168929,-33.89182332],[151.1119001,-33.89183317],[151.11206321,-33.89184106],[151.11214886,-33.89184526],[151.1122298,-33.89184887],[151.11241682,-33.89185771],[151.11243494,-33.89168722],[151.11262435,-33.89169358],[151.11269964,-33.89169611],[151.11272716,-33.89145883],[151.1127389,-33.89135535],[151.11284544,-33.8913594],[151.11362553,-33.89138847],[151.11376088,-33.89139359],[151.1138587,-33.89139733],[151.11462099,-33.89142587],[151.11470981,-33.89142919],[151.11479939,-33.89143253],[151.11559828,-33.89146245],[151.11569532,-33.89146598],[151.11577715,-33.89146911],[151.11700001,-33.89151547]]]]},"geometry_name":"geom","properties":{"lc_ply_pid":"25113","dt_create":"2015-09-03Z","dt_retire":null,"loc_pid":"NSW1147","nsw_locali":"2015-11-10Z","nsw_loca_1":null,"nsw_loca_2":"CROYDON PARK","nsw_loca_3":null,"nsw_loca_4":null,"nsw_loca_5":"G","nsw_loca_6":null,"nsw_loca_7":"1"}}]}
var map = new google.maps.Map(document.getElementById('map-container'), {
center: {
lat: -33.89296209,
lng: 151.1163801
},
scrollwheel: false,
zoom: 14
});
var overlay = new google.maps.OverlayView();
overlay.onAdd = function() {}
overlay.draw = function() {}
overlay.setMap(map);
function googleProjection(prj) {
return function(lnglat) {
ret = prj.fromLatLngToDivPixel(new google.maps.LatLng(lnglat[1],lnglat[0]))
return [ret.x, ret.y]
};
}
map.addListener('idle', function() {
// code to initialize svg and path
var svg;
var path;
if(!svg) {
var projection = googleProjection(overlay.getProjection());
var northWest = projection([139.499822,-27.183773]);
var southEast = projection([155.642935,-38.559921]);
var width = southEast[0] - northWest[0];
var height = southEast[1] - northWest[1];
svg = d3.select(overlay.getPanes().overlayMouseTarget)
.append("svg")
.style("position", "absolute")
.style("top", northWest[1])
.style("left", northWest[0])
.attr("height", height)
.attr("width", width);
path = d3.geo.path().projection(projection);
}
// add handler to clear svg contents on zoom change
map.addListener('zoom_changed', function() {
if(svg) {
svg.selectAll("*").remove();
}
});
// add handler to clear svg contents on drag drop
map.addListener('dragend', function() {
if(svg) {
svg.selectAll("*").remove();
}
});
d3.json('travelzone.json', function(error, data) {
svg.selectAll("path")
.data(data.features)
.enter().append("path")
.attr('transform', 'translate('+(-northWest[0])+' '+(-northWest[1])+')')
.attr("d", path)
.attr("fill", "#666666")
.attr("fill-opacity", 0.3)
.attr("stroke", "black")
.on("mouseover", mapMouseOver)
.on("mouseout", mapMouseOut);
});
});
var tipSvg = d3.select('body').append('div')
.style('position', 'absolute')
.style('max-width', '400px')
.style('height', 'auto')
.style('background-color', '#ffffff')
.style('opacity', 0)
.style('width', 600);
function mapMouseOver(d) {
var tip = '<p>' + d.properties.nsw_loca_2 + '</p>';
tipSvg.html(tip)
.style('left', (d3.event.pageX) + 'px')
.style('top', (d3.event.pageY) + 'px');
tipSvg.transition()
.duration(500)
.style('opacity', 1);
}
function mapMouseOut(d) {
tipSvg.transition()
.duration(500)
.style('opacity', 0);
}