Skip to content

Instantly share code, notes, and snippets.

@pbogden

pbogden/Base.png

Last active April 22, 2019 10:52
Show Gist options
  • Save pbogden/7363519 to your computer and use it in GitHub Desktop.
Save pbogden/7363519 to your computer and use it in GitHub Desktop.
Download ZIP
pan & zoom a png
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
Display the source blob
Display the rendered blob
Raw
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>
Raw
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>
Raw
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>
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment