javascriptd3.jsdatamaps

Map zooming with D3 and Datamaps

I need your help. I'm using datamaps and I want to implement a zoom on a country. I can find loads of examples how I can achieve this, but the difference is, I want to be able to do this with a external button.

Let's say outside of my <div id="worldmap"></div> where the map is being rendered I have a button: <button data-location="AUS">. How am I able to zoom using these values? I know the datamaps uses these short names (AUS = australia) to notate the name. I can also provide long lat coordinates if this is the way to do it.

Can somebody help me with this issue? I'm fairly new to D3 and datamaps.

Solution

  • One way could be that you translate and scale to your region of choice using translate scale as shown below.

    function gotoAustralia(){
  map.svg.selectAll(".datamaps-subunits").transition().duration(750).attr("transform", "scale(1.5)translate(-400,-100)");
}
function gotoSouthAmerica(){
  map.svg.selectAll(".datamaps-subunits").transition().duration(750).attr("transform", "scale(1.5)translate(-50,-300)");
}
function reset(){
  map.svg.selectAll(".datamaps-subunits").transition().duration(750).attr("transform", "");
}

    working code here