Widget:PlaceNamesNavigationMapEnglish: Difference between revisions
From International Robin Hood Bibliography
mNo edit summary |
mNo edit summary |
||
(44 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<noinclude><div class="no-img">This widget displays the navigation map on country and administrative division landing pages in the place-names section of IRHB. It takes no parameters.</div></noinclude><includeonly><div id="navMapNav"></div><script> | <noinclude><div class="no-img">This widget displays the navigation map on country and administrative division landing pages in the place-names section of IRHB. It takes no parameters.</div></noinclude><includeonly><div id="navMapNav"></div><script>( function() { | ||
( function() { | |||
window.IRHB = window.IRHB || {}; | window.IRHB = window.IRHB || {}; | ||
window.IRHB.get = window.IRHB.get || function(elem) { | |||
if (typeof elem === "string") { | if (typeof elem === "string") { | ||
elem = document.getElementById(elem); | elem = document.getElementById(elem); | ||
Line 19: | Line 14: | ||
( function() { | ( function() { | ||
Line 27: | Line 21: | ||
var d = w.data; | var d = w.data; | ||
d.stats = false; | d.stats = false; | ||
var get = w.get; | |||
d.colours = [ | d.colours = [ | ||
Line 87: | Line 82: | ||
var cur = d.colours[i]; | var cur = d.colours[i]; | ||
if (val <= cur.limit) { | if (val <= cur.limit) { | ||
colour = cur.rgb; | colour = "#" + cur.rgb; | ||
break; | break; | ||
} | } | ||
Line 110: | Line 105: | ||
cur.pnperkm2popcol = getColour(cur.pnperkm2popidx); | cur.pnperkm2popcol = getColour(cur.pnperkm2popidx); | ||
} | } | ||
} | } | ||
Line 182: | Line 175: | ||
( function() { | ( function() { | ||
window.IRHB = window.IRHB || {}; | window.IRHB = window.IRHB || {}; | ||
var w = window.IRHB; | var w = window.IRHB; | ||
var d = w.data; | var d = w.data; | ||
w.choro = {}; | w.choro = {}; | ||
var c = w.choro; | var c = w.choro; | ||
var get = w.get; | |||
c.choropleth = function() { | c.choropleth = function() { | ||
var curMap = w.map.curMap; | var curMap = w.map.curMap; | ||
var mp = | var mp = get(curMap); | ||
var svg = mp.childNodes.length > 1 ? mp.firstChild.nextSibling.firstChild : mp.firstChild.firstChild; | var svg = mp.childNodes.length > 1 ? mp.firstChild.nextSibling.firstChild : mp.firstChild.firstChild; | ||
var paths = svg.getElementsByTagName("path"); | var paths = svg.getElementsByTagName("path"); | ||
Line 230: | Line 222: | ||
( function() { | ( function() { | ||
Line 236: | Line 227: | ||
var w = window.IRHB; | var w = window.IRHB; | ||
w.map = {}; | w.map = {}; | ||
var m = w.map | var m = w.map, d = w.data, get = w.get; | ||
var tooltip, features, zoom, tooltipOffset; | var tooltip, features, zoom, tooltipOffset; | ||
m.curMap = false; | m.curMap = false; | ||
function makeResponsive(svg) { | |||
var container = d3.select(svg.node().parentNode), | |||
w = parseInt(svg.style("width")), | |||
h = parseInt(svg.style("height")), | |||
aspect = w / h; | |||
svg.attr("viewBox", "0 0 " + w + " " + h) | |||
.attr("preserveAspectRatio", "xMinYMid") | |||
.call(resize); | |||
d3.select(window).on("resize." + container.attr("id"), resize); | |||
function resize() { | |||
var targetWidth = parseInt(container.style("width")); | |||
svg.attr("width", targetWidth); | |||
svg.attr("height", Math.round(targetWidth / aspect)); | |||
} | |||
} | |||
Line 244: | Line 253: | ||
var mp = get(m.curMap); | var mp = get(m.curMap); | ||
var width = 496, height = 550; | var width = 496, height = 550; | ||
var projection = d3.geo.conicEqualArea().scale(5165.269352442655).center([-1.4602454263940616,52.55675714793008]).parallels([49.95898294542323,55.81107189358492]).rotate([1.4602454263940616]).translate([202.798519176517,306.70813464248357]); | var projection = d3.geo.conicEqualArea() | ||
.scale(5165.269352442655).center([-1.4602454263940616,52.55675714793008]) | |||
.parallels([49.95898294542323,55.81107189358492]).rotate([1.4602454263940616]) | |||
.translate([202.798519176517,306.70813464248357]); | |||
var path = d3.geo.path().projection(projection); | var path = d3.geo.path().projection(projection); | ||
var svg = d3.select("div#" + m.curMap).append("svg").attr("width", width).attr("height", height); | var svg = d3.select("div#" + m.curMap).append("svg").attr("width", width).attr("height", height); | ||
Line 254: | Line 266: | ||
d3.json("/wiki/geo/england/country/England.json",function(error,geodata) { | d3.json("/wiki/geo/england/country/England.json",function(error,geodata) { | ||
if (!error) { | if (!error) { | ||
features.selectAll("path").data(geodata.features).enter().append("path").attr("d",path).on("mouseover",showTooltip).on("mousemove",moveTooltip).on("mouseout",hideTooltip).on("click",clicked); | features.selectAll("path").data(geodata.features).enter().append("path") | ||
.attr("d",path).on("mouseover",showTooltip).on("mousemove",moveTooltip) | |||
.on("mouseout",hideTooltip).on("click",clicked); | |||
if (m.curMap === "navMap" || m.curMap === "choroMap") { | if (m.curMap === "navMap" || m.curMap === "choroMap") { | ||
w.choro.choropleth(); | w.choro.choropleth(); | ||
Line 262: | Line 276: | ||
} | } | ||
mp.firstChild.style.display = "block"; | mp.firstChild.style.display = "block"; | ||
makeResponsive(svg); | |||
} else { | } else { | ||
return console.log(error); | return console.log(error); | ||
Line 271: | Line 286: | ||
m.initMap = function() { | m.initMap = function() { | ||
d.calcStats(); | d.calcStats(); | ||
}; | }; | ||
Line 277: | Line 291: | ||
m.addSpinner = function (elem) { | m.addSpinner = function (elem) { | ||
var svg = '<svg | var svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" xml:space="preserve">'; | ||
svg += '<path | svg += '<path stroke="none !important" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">'; | ||
svg += '<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50" to="360 50 50" repeatCount="indefinite"/>'; | svg += '<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50" to="360 50 50" repeatCount="indefinite"/>'; | ||
svg += '</path></svg>'; | svg += '</path></svg>'; | ||
elem.innerHTML = svg; | elem.innerHTML = svg; | ||
elem.firstElementChild.firstElementChild.style.strokeWidth = "0px"; | |||
}; | }; | ||
Line 288: | Line 303: | ||
function clicked(d, i) { | function clicked(d, i) { | ||
location.href = encodeURIComponent(d.properties.name) + " place-names"; | location.href = encodeURIComponent(d.properties.name) + " place-names"; | ||
} | } | ||
Line 315: | Line 325: | ||
( function() { | ( function() { | ||
Line 322: | Line 331: | ||
w.nav = {}; | w.nav = {}; | ||
var n = w.nav; | var n = w.nav; | ||
var get = w | 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 356: | Line 365: | ||
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>"; | ||
get("nmnOverview").onclick = n.toggleNav; | get("nmnOverview").onclick = n.toggleNav; | ||
get("nmnNav").onclick = n.toggleNav; | get("nmnNav").onclick = n.toggleNav; | ||
get("nmnChoro").onclick = n.toggleNav; | get("nmnChoro").onclick = n.toggleNav; | ||
get("choroMapLegend2").onclick = selectChoroVar; | var d = get("choroMapLegend2"); | ||
d.onclick = selectChoroVar; | |||
d.style.fontWeight = 600; | |||
d.style.color = "#4d8375"; | |||
get("choroMapLegend3").onclick = selectChoroVar; | d.style.cursor = "pointer"; | ||
d = get("choroMapLegend3"); | |||
d.onclick = selectChoroVar; | |||
d.style.fontWeight = 600; | |||
get("navMap").style.backgroundColor = "# | d.style.color = "#4d8375"; | ||
get("choroMap").style.backgroundColor = "# | d.style.cursor = "pointer"; | ||
get("navMap").style.backgroundColor = "#f9fafa"; | |||
get("choroMap").style.backgroundColor = "#f9fafa"; | |||
}; | }; | ||
n.toggleNav = function() { | n.toggleNav = function() { | ||
Line 387: | Line 396: | ||
get("ctyMapLegend").style.display = "block"; | get("ctyMapLegend").style.display = "block"; | ||
get("map_leaflet_1").style.display = "block"; | get("map_leaflet_1").style.display = "block"; | ||
w.maps.resizeMaps(); | |||
maps.leafletList[0].map.invalidateSize(); | |||
} else if (t === "nmnNav") { | } else if (t === "nmnNav") { | ||
get("navMap").style.display = "block"; | get("navMap").style.display = "block"; | ||
Line 434: | Line 445: | ||
script.type = 'text/javascript'; | script.type = 'text/javascript'; | ||
script.src = "https://www.irhb.org/wiki/js/d3js/d3.v3.min.js"; | script.src = "https://www.irhb.org/wiki/js/d3js/d3.v3.min.js"; | ||
script.onload = w.nav.prepareNav; | script.onload = w.nav.prepareNav; | ||
document.head.appendChild(script); | document.head.appendChild(script); | ||
}() ); | }());</script><p style="display:none;"></includeonly> | ||
</script></includeonly> |
Revision as of 13:02, 6 June 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.