Widget:PlaceNamesNavigationMapEnglish: Difference between revisions
From International Robin Hood Bibliography
mNo edit summary |
m (Text replacement - "/wiki/" to "/w/") |
||
(39 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 || {}; | ||
Line 16: | Line 14: | ||
( function() { | ( function() { | ||
Line 85: | 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 106: | Line 103: | ||
cur.totalcol = getColour(cur.totalidx); | cur.totalcol = getColour(cur.totalidx); | ||
cur.pnperkm2col = getColour(cur.pnperkm2idx); | cur.pnperkm2col = getColour(cur.pnperkm2idx); | ||
cur. | cur.pnperkm2PopularCollection = getColour(cur.pnperkm2popidx); | ||
} | } | ||
} | } | ||
Line 140: | Line 137: | ||
var PNs = res.query.results; | var PNs = res.query.results; | ||
for (var key in PNs) { | for (var key in PNs) { | ||
var admdiv = PNs[key].printouts. | var admdiv = PNs[key].printouts.AdministrativeDivision[0]; | ||
var interest = PNs[key].printouts. | var interest = PNs[key].printouts.PlaceNamesInterest[0]; | ||
var admdivObj = d.counties[admdiv]; | var admdivObj = d.counties[admdiv]; | ||
admdivObj.total++; | admdivObj.total++; | ||
Line 158: | Line 155: | ||
if (!d.stats) { | if (!d.stats) { | ||
w.map.addSpinner(get(w.map.curMap)); | w.map.addSpinner(get(w.map.curMap)); | ||
var url = " | var url = "/w/api.php?action=ask&query=[[Category:English%20counties%20with%20place-names]]|?Area|?Population&format=json"; | ||
fetch(url).then(res => res.json()).then((jsnCty) => { | fetch(url).then(res => res.json()).then((jsnCty) => { | ||
calcCounties(jsnCty); | calcCounties(jsnCty); | ||
url = " | url = "/w/api.php?action=ask&query=[[Category:English%20place-names]]|?PlaceNamesInterest|?AdministrativeDivision|sort=AdministrativeDivision&format=json"; | ||
fetch(url).then(res => res.json()).then((jsnPN) => { | fetch(url).then(res => res.json()).then((jsnPN) => { | ||
calcPlaceNames(jsnPN); | calcPlaceNames(jsnPN); | ||
Line 178: | Line 175: | ||
( function() { | ( function() { | ||
Line 194: | Line 190: | ||
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"); | ||
if (curMap | var props = { "count": "totalcol", "area": "pnperkm2col", "areaPop": "pnperkm2PopularCollection" }; | ||
if (curMap !== "navMap") { | |||
for (var key in d.counties) { | for (var key in d.counties) { | ||
var cur = d.counties[key]; | var cur = d.counties[key]; | ||
paths[cur.path].style. | paths[ cur.path ].style.fill = cur[ props[ w.nav.choroVar ] ]; | ||
} | } | ||
} | } | ||
Line 226: | Line 203: | ||
( function() { | ( function() { | ||
Line 251: | Line 227: | ||
svg.attr("width", targetWidth); | svg.attr("width", targetWidth); | ||
svg.attr("height", Math.round(targetWidth / aspect)); | svg.attr("height", Math.round(targetWidth / aspect)); | ||
} | } | ||
} | } | ||
Line 258: | Line 233: | ||
m.prepareMap = function() { | m.prepareMap = function() { | ||
var mp = get(m.curMap); | var mp = get(m.curMap); | ||
var width = | var width = "500px", height = "550px"; | ||
var projection = d3.geo.conicEqualArea() | var projection = d3.geo.conicEqualArea() | ||
.scale(5165.269352442655).center([-1.4602454263940616,52.55675714793008]) | .scale(5165.269352442655).center([-1.4602454263940616,52.55675714793008]) | ||
Line 264: | Line 239: | ||
.translate([202.798519176517,306.70813464248357]); | .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) | var svg = d3.select("div#" + m.curMap).append("svg").attr("width", width).attr("height", height); | ||
if (mp.childNodes.length > 1) { | if (mp.childNodes.length > 1) { | ||
mp.firstChild.nextSibling.style.display = "none"; | mp.firstChild.nextSibling.style.display = "none"; | ||
Line 271: | Line 245: | ||
features = svg.append("g").attr("class","features"); | features = svg.append("g").attr("class","features"); | ||
tooltip = d3.select("body").append("div").attr("class","ttip"); | tooltip = d3.select("body").append("div").attr("class","ttip"); | ||
d3.json("/ | d3.json("/w/geo/england/country/England.json",function(error,geodata) { | ||
if (!error) { | if (!error) { | ||
features.selectAll("path").data(geodata.features).enter().append("path") | features.selectAll("path").data(geodata.features).enter().append("path") | ||
Line 289: | Line 263: | ||
}); | }); | ||
tooltipOffset = {x: 5, y: -25}; | tooltipOffset = {x: 5, y: -25}; | ||
} | } | ||
Line 299: | Line 272: | ||
m.addSpinner = function (elem) { | m.addSpinner = function (elem) { | ||
var svg = '<svg | var svg = '<svg xmlns="http://www.w3.org/2000/svg" xml:id="spinner" id="spinner" 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 332: | Line 306: | ||
( function() { | ( function() { | ||
Line 373: | Line 346: | ||
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"; | |||
}; | }; | ||
Line 406: | Line 378: | ||
get("map_leaflet_1").style.display = "block"; | get("map_leaflet_1").style.display = "block"; | ||
w.maps.resizeMaps(); | w.maps.resizeMaps(); | ||
//NOW CAUSES A BUG AND FOR SOME REASON IS NO LONGER NEEDED: maps.leafletList[0].map.invalidateSize(); | |||
} else if (t === "nmnNav") { | } else if (t === "nmnNav") { | ||
get("navMap").style.display = "block"; | get("navMap").style.display = "block"; | ||
Line 449: | Line 422: | ||
var w = window.IRHB; | var w = window.IRHB; | ||
var gjson = " | var gjson = "/w/geo/england/country/England.json"; | ||
var script = document.createElement('script'); | var script = document.createElement('script'); | ||
script.type = 'text/javascript'; | script.type = 'text/javascript'; | ||
script.src = " | script.src = "/w/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> |
Latest revision as of 03:56, 6 June 2022
This widget displays the navigation map on country and administrative division landing pages in the place-names section of IRHB. It takes no parameters.