pan & zoom a png by pbogden

index.html


<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>basemap -- pan & zoom</title>
<script src="//d3js.org/d3.v3.min.js"></script>
<style type="text/css">

.overlay {
  fill: none;
  pointer-events: all;
}

</style>
</head>

<body>
<script>

var imgHeight = 1025, imgWidth = 1538,      // Image dimensions (don't change these)
    width =  960, height = 650,             // Dimensions of cropped region
    translate0 = [-290, -180], scale0 = 1;  // Initial offset & scale

svg = d3.select("body").append("svg")
    .attr("width",  width + "px")
    .attr("height", height + "px");

svg.append("rect")
    .attr("class", "overlay")
    .attr("width", width + "px")
    .attr("height", height + "px");

svg = svg.append("g")
    .attr("transform", "translate(" + translate0 + ")scale(" + scale0 + ")")
    .call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))
  .append("g");

svg.append("image")
    .attr("width",  imgWidth + "px")
    .attr("height", imgHeight + "px")
    .attr("xlink:href", "Base.png");

function zoom() {
  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  console.log("translate: " + d3.event.translate + ", scale: " + d3.event.scale);
}

</script>
</body>

image.svg

index1.html

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<link type="text/css" rel="stylesheet" href="styles.css"/>

<title>basemap -- div</title>
<div id="map"></div>
<div style="width: 500px;">Base.png -- cropped for Nigeria.
Use pan & zoom to center the image in the div.
Look at console.log to get the translation & scale that you like best.
</div>

<script>

var imgHeight = 1025, imgWidth = 1538,    // Image dimensions (don't change these)
    width =  500, height = 270;           // Dimensions of cropped region
    offsetX = -550, offsetY = -400;       // Initial offset -- tweaked this to center Nigeria in <div>

svg = d3.select("div#map")
    .style("width",  width + "px")
    .style("height", height + "px")
  .append("svg").append("g")
    .call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))
  .append("g");

svg.append("rect")
    .attr("class", "overlay")
    .attr("width", width + "px")
    .attr("height", height + "px");

svg.append("image")
    .attr("width",  imgWidth + "px")
    .attr("height", imgHeight + "px")
    .attr("x", offsetX + "px")
    .attr("y", offsetY + "px")
    .attr("xlink:href", "Base.png");

function zoom() {
  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  console.log("translate: " + d3.event.translate + ", scale: " + d3.event.scale);
}

</script>
</body>

index2.html

<!DOCTYPE html>
<meta charset="utf-8">
<body>

<title>basemap -- no div</title>
<script src="//d3js.org/d3.v3.min.js"></script>

<script>

var imgHeight = 1025, imgWidth = 1538,              // Image dimensions (don't change these)
    width =  960, height = 500,                     // Dimensions of <svg>
    clipX0 = 550, clipY0 = 440,                     // (x,y) of the clipped region
    clipWidth = 500, clipHeight = 200;              // Dimensions of clipped region

var svg = d3.select("body").append("svg")
    .attr("width",  width + "px")
    .attr("height", height + "px");

// Define the SVG clipPath
var clip = svg.append("svg:defs").append("svg:clipPath")
    .attr("id", "rectClip")
  .append("svg:rect")
    .attr("id", "rect1")
    .attr("x", clipX0)
    .attr("y", clipY0)
    .attr("width", clipWidth)
    .attr("height", clipHeight);

// Define the overlay that catches mouse events
svg.append("rect")
    .attr("class", "overlay")
    .style("fill", "none")
    .style("pointer-events", "all")
    .attr("width", width + "px")
    .attr("height", height + "px");

// Use <g> to reset the origin and add pan & zoom behavior
var myImage = svg.append("g")
    .attr("id","myImage")
    .attr("transform","translate(" + (-clipX0) + "," + (-clipY0) + ")")
    .call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))
  .append("image")
    .attr("xlink:href", "Base.png")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width",  imgWidth + "px")
    .attr("height", imgHeight + "px")
    .style("clip-path","url(#rectClip)");

function zoom() {
  myImage.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  console.log("translate: " + d3.event.translate + ", scale: " + d3.event.scale);
}

</script>
</body>