Widget:PlaceNamesNavigationMapEnglish: Difference between revisions

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.

@@ Line 235: / Line 235: @@
 	var tooltip, features, zoom, tooltipOffset;
 	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";
+				makeResponsive(svg);
 			} else {
 				return console.log(error);