Widget:PlaceNamesNavigationMapEnglish: Difference between revisions
From International Robin Hood Bibliography
mNo edit summary |
mNo edit summary |
||
Line 235: | Line 235: | ||
var tooltip, features, zoom, tooltipOffset; | var tooltip, features, zoom, tooltipOffset; | ||
m.curMap = false; | m.curMap = false; | ||
function makeResponsive(svg) { | |||
// get container + svg aspect ratio | |||
var container = d3.select(svg.node().parentNode), | |||
var w = parseInt(svg.style("width")), | |||
var h = parseInt(svg.style("height")), | |||
aspect = w / h; | |||
// add viewBox and preserveAspectRatio properties, | |||
// and call resize so that svg resizes on inital page load | |||
svg.attr("viewBox", "0 0 " + w + " " + h) | |||
.attr("preserveAspectRatio", "xMinYMid") | |||
.call(resize); | |||
// to register multiple listeners for same event type, | |||
// you need to add namespace, i.e., 'click.foo' | |||
// necessary if you call invoke this function for multiple svgs | |||
// api docs: https://github.com/mbostock/d3/wiki/Selections#on | |||
d3.select(window).on("resize." + container.attr("id"), resize); | |||
// get width of container and resize svg to fit it | |||
function resize() { | |||
var targetWidth = parseInt(container.style("width")); | |||
svg.attr("width", targetWidth); | |||
svg.attr("height", Math.round(targetWidth / aspect)); | |||
} | |||
} | |||
Line 258: | Line 286: | ||
} | } | ||
mp.firstChild.style.display = "block"; | mp.firstChild.style.display = "block"; | ||
makeResponsive(svg); | |||
} else { | } else { | ||
return console.log(error); | return console.log(error); |
Revision as of 19:15, 22 May 2019
This widget displays the navigation map on country and administrative division landing pages in the place-names section of IRHB. It takes no parameters.