pbogden/Base.png

## README.md

      
    Raw
  

              README.md
            
          
    Pan & zoom a png
index.html  -- adds D3 pan & zoom to a PNG -- no rescaling or cropping
index1.html -- clips using an HTML div element
index2.html -- clips using SVG clipPath element


## Base.png

      
    Raw
  

              Base.png
            
          
## image.svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="1538px" height="1025px" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <desc>This graphic links to an external image
  </desc>
  <image preserveAspectRatio="xMinYMin meet"
         x="0" y="0" width="1538" height="1025"
         xlink:href="Base.png">
    <title>My image</title>
  </image>
  <rect x="0" y="0" width="1538" height="1025"
        fill="none" stroke="blue" stroke-width="12"  />


  <g fill="none" stroke="black" stroke-width="3" >
    <line x1="0" y1="1.5" x2="1538" y2="1.5" />
    <line x1="1.5" y1="0" x2="1.5" y2="1025" />
  </g>
  <g fill="red" stroke="none" >
    <rect x="0" y="0" width="3" height="3" />
    <rect x="1535" y="0" width="3" height="3" />
    <rect x="0" y="1022" width="3" height="3" />
  </g>
  <g font-size="14" font-family="Verdana" >
    <text x="10" y="20">(0,0)</text>
    <text x="240" y="20">(300,0)</text>
    <text x="10" y="90">(0,100)</text>
  </g>

</svg>

## index.html

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>basemap -- pan & zoom</title>
<script src="http://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>

## index1.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://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="http://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>
	<?xml version="1.0" standalone="no"?>
	<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

	<svg width="1538px" height="1025px" version="1.1"
	xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

	<desc>This graphic links to an external image
	</desc>
	<image preserveAspectRatio="xMinYMin meet"
	x="0" y="0" width="1538" height="1025"
	xlink:href="Base.png">
	<title>My image</title>
	</image>
	<rect x="0" y="0" width="1538" height="1025"
	fill="none" stroke="blue" stroke-width="12" />


	<g fill="none" stroke="black" stroke-width="3" >
	<line x1="0" y1="1.5" x2="1538" y2="1.5" />
	<line x1="1.5" y1="0" x2="1.5" y2="1025" />
	</g>
	<g fill="red" stroke="none" >
	<rect x="0" y="0" width="3" height="3" />
	<rect x="1535" y="0" width="3" height="3" />
	<rect x="0" y="1022" width="3" height="3" />
	</g>
	<g font-size="14" font-family="Verdana" >
	<text x="10" y="20">(0,0)</text>
	<text x="240" y="20">(300,0)</text>
	<text x="10" y="90">(0,100)</text>
	</g>

	</svg>

	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<title>basemap -- pan & zoom</title>
	<script src="http://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>