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
Last active
April 22, 2019 10:52
-
-
Save pbogden/7363519 to your computer and use it in GitHub Desktop.
pan & zoom a png
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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