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

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              image.svg
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## 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>

	<!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>