Widget:PlaceNamesNavigationMapEnglish: Difference between revisions

From International Robin Hood Bibliography
mNo edit summary
mNo edit summary
Line 238: Line 238:
function makeResponsive(svg) {
function makeResponsive(svg) {
// get container + svg aspect ratio
var container = d3.select(svg.node().parentNode),
var container = d3.select(svg.node().parentNode),
w = parseInt(svg.style("width")),
w = parseInt(svg.style("width")),
h = parseInt(svg.style("height")),
h = parseInt(svg.style("height")),
aspect = w / h;
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)
svg.attr("viewBox", "0 0 " + w + " " + h)
.attr("preserveAspectRatio", "xMinYMid")
.attr("preserveAspectRatio", "xMinYMid")
.call(resize);
.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);
d3.select(window).on("resize." + container.attr("id"), resize);


// get width of container and resize svg to fit it
function resize() {
function resize() {
var targetWidth = parseInt(container.style("width"));
var targetWidth = parseInt(container.style("width"));
Line 350: Line 340:
var get = w.get;
var get = w.get;
var m = w.map;
var m = w.map;
choroLegend = {
var choroLegend = {
'count': { 's1': 'Count', 's2': 'Area', 's3': 'Area–Population'},  
'count': { 's1': 'Count', 's2': 'Area', 's3': 'Area–Population'},  
'area': { 's1': 'Area', 's2': 'Count', 's3': 'Area–Population'},  
'area': { 's1': 'Area', 's2': 'Count', 's3': 'Area–Population'},  
Line 382: Line 372:
n.prepareNav = function() {
n.prepareNav = function() {
get("navMapNav").innerHTML = "<a id='nmnOverview'>Overview</a><a id='nmnNav'>Navigation</a><a id='nmnChoro'>Choropleths</a>";
get("navMapNav").innerHTML = "<a id='nmnOverview'>Overview</a><a id='nmnNav'>Navigation</a><a id='nmnChoro'>Choropleths</a>";
/* Next 2 lines temporary, change CSS when implementing at site: */
/* Next 2 lines temporary, change CSS when implementing on site: */
get("ctyMapLegend").style.paddingBottom = 0;
get("ctyMapLegend").style.paddingBottom = 0;
get("navMapLegend").style.paddingBottom = 0;
get("navMapLegend").style.paddingBottom = 0;
Line 399: Line 389:
get("choroMap").style.backgroundColor = "#f2f2f2";
get("choroMap").style.backgroundColor = "#f2f2f2";
};
};
//function keepLeafletMapFocused() {
//get("map_leaflet_1")
//}
n.toggleNav = function() {
n.toggleNav = function() {
Line 413: Line 409:
get("ctyMapLegend").style.display = "block";
get("ctyMapLegend").style.display = "block";
get("map_leaflet_1").style.display = "block";
get("map_leaflet_1").style.display = "block";
irhb.maps.resizeMaps();
//keepLeafletMapFocused();
} else if (t === "nmnNav") {
} else if (t === "nmnNav") {
get("navMap").style.display = "block";
get("navMap").style.display = "block";

Revision as of 13:16, 25 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.