Widget:PlaceNamesNavigationMapEnglish: Difference between revisions

From International Robin Hood Bibliography
mNo edit summary
m (Text replacement - "/wiki/" to "/w/")
 
(50 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() {
//Utility
( function() {
window.IRHB = window.IRHB || {};
window.IRHB = window.IRHB || {};
window.IRHB.get = window.IRHB || function(elem) {
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 16: Line 14:




//Data
( 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.pnperkm2popcol = getColour(cur.pnperkm2popidx);
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.Pnadmdiv[0];
var admdiv = PNs[key].printouts.AdministrativeDivision[0];
var interest = PNs[key].printouts.Pninterest[0];
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 = "https://www.irhb.org/wiki/api.php?action=ask&query=[[Category:English%20counties%20with%20place-names]]|?Area|?Population&format=json";
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 = "https://www.irhb.org/wiki/api.php?action=ask&query=[[Category:English%20place-names]]|?Pninterest|?Pnadmdiv|sort=Pnadmdiv&format=json";
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:




//Choropleth
( function() {
( function() {
window.IRHB = window.IRHB || {};
window.IRHB = window.IRHB || {};
var w = window.IRHB;
var w = window.IRHB;
var u = w.utility;
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 = u.get(curMap);
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");
if (curMap === "navMap") {
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.stroke = "#ffffff";
paths[ cur.path ].style.fill = cur[ props[ w.nav.choroVar ] ];
}
} else {
if (w.nav.choroVar === "count") {
for (var key in d.counties) {
var cur = d.counties[key];
paths[cur.path].style.fill = cur.totalcol;
paths[cur.path].style.stroke = "#ffffff";
}
} else if (w.nav.choroVar === "area") {
for (var key in d.counties) {
var cur = d.counties[key];
paths[cur.path].style.fill = cur.pnperkm2col;
paths[cur.path].style.stroke = "#ffffff";
}
} else {
for (var key in d.counties) {
var cur = d.counties[key];
paths[cur.path].style.fill = cur.pnperkm2popcol;
paths[cur.path].style.stroke = "#ffffff";
}
}
}
}
}
Line 226: Line 203:




//Map
( function() {
( function() {
Line 232: Line 208:
var w = window.IRHB;
var w = window.IRHB;
w.map = {};
w.map = {};
var m = w.map, u = w.utility, d = w.data, get = u.get;
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));
}
}
m.prepareMap = function() {
m.prepareMap = function() {
var mp = get(m.curMap);
var mp = get(m.curMap);
var width = 496, height = 550;
var width = "500px", height = "550px";
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 248: 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("/wiki/geo/england/country/England.json",function(error,geodata) {
d3.json("/w/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 258: Line 257:
}
}
mp.firstChild.style.display = "block";
mp.firstChild.style.display = "block";
makeResponsive(svg);
} else {
} else {
return console.log(error);
return console.log(error);
Line 267: Line 267:
m.initMap = function() {
m.initMap = function() {
//addSpinner(get(m.curMap));
d.calcStats();
d.calcStats();
};
};
Line 273: Line 272:
m.addSpinner = function (elem) {
m.addSpinner = function (elem) {
var svg = '<svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">';
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 fill="#fff" 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 += '<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 284: Line 284:
function clicked(d, i) {
function clicked(d, i) {
location.href = encodeURIComponent(d.properties.name) + " place-names";
location.href = encodeURIComponent(d.properties.name) + " place-names";
}
function zoomed() {
//features.attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")").selectAll("path").style("stroke-width", 1 / zoom.scale() + "px" );
}
}


Line 311: Line 306:




//Navigation
( function() {
( function() {
Line 318: Line 312:
w.nav = {};
w.nav = {};
var n = w.nav;
var n = w.nav;
var get = w.utility.get;
var get = w.get;
var m = w.map;
var m = w.map;
choroLegend = {
var choroLegend = {
'count': { 's1': 'Count', 's2': 'Area', 's3': 'Area&ndash;Population'},  
'count': { 's1': 'Count', 's2': 'Area', 's3': 'Area&ndash;Population'},  
'area': { 's1': 'Area', 's2': 'Count', 's3': 'Area&ndash;Population'},  
'area': { 's1': 'Area', 's2': 'Count', 's3': 'Area&ndash;Population'},  
Line 352: 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>";
/* Next 2 lines temporary, change CSS when implementing at site: */
get("ctyMapLegend").style.paddingBottom = 0;
get("navMapLegend").style.paddingBottom = 0;
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");
get("choroMapLegend2").style.fontWeight = 600;
d.onclick = selectChoroVar;
get("choroMapLegend2").style.color = "#4d8375";
d.style.fontWeight = 600;
get("choroMapLegend2").style.cursor = "pointer";
d.style.color = "#4d8375";
get("choroMapLegend3").onclick = selectChoroVar;
d.style.cursor = "pointer";
get("choroMapLegend3").style.fontWeight = 600;
d = get("choroMapLegend3");
get("choroMapLegend3").style.color = "#4d8375";
d.onclick = selectChoroVar;
get("choroMapLegend3").style.cursor = "pointer";
d.style.fontWeight = 600;
get("navMap").style.backgroundColor = "#f2f2f2";
d.style.color = "#4d8375";
get("choroMap").style.backgroundColor = "#f2f2f2";
d.style.cursor = "pointer";
get("navMap").style.backgroundColor = "#f9fafa";
get("choroMap").style.backgroundColor = "#f9fafa";
};
};
n.toggleNav = function() {
n.toggleNav = function() {
Line 383: Line 377:
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();
//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 426: Line 422:


     var w = window.IRHB;
     var w = window.IRHB;
     var gjson = "https://www.irhb.org/wiki/geo/england/country/England.json";
     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 = "https://www.irhb.org/wiki/js/d3js/d3.v3.min.js";
     script.src = "/w/js/d3js/d3.v3.min.js";
    //script.onreadystatechange = w.map.initMaps;
     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.
Retrieved from "https://www.irhb.org/w/index.php?title=Widget:PlaceNamesNavigationMapEnglish&oldid=332806"