Jump to: navigation, search

Difference between revisions of "Widget:NavMapEnglishPlaceNames"

m
m
 
(31 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 || {};
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 178: Line 175:
  
  
//Choropleth
 
 
( function() {
 
( function() {
 
 
Line 226: Line 222:
  
  
//Map
 
 
( function() {
 
( function() {
 
 
Line 251: Line 246:
 
svg.attr("width", targetWidth);
 
svg.attr("width", targetWidth);
 
svg.attr("height", Math.round(targetWidth / aspect));
 
svg.attr("height", Math.round(targetWidth / aspect));
//container.attr("height", Math.round(targetWidth / aspect));
 
 
}
 
}
 
}
 
}
Line 264: Line 258:
 
.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);
.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 289: Line 282:
 
});
 
});
 
tooltipOffset = {x: 5, y: -25};
 
tooltipOffset = {x: 5, y: -25};
console.log(window);
 
 
}
 
}
  
Line 299: Line 291:
 
 
 
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" 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 332: Line 325:
  
  
//Navigation
 
 
( function() {
 
( function() {
 
 
Line 373: 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>";
/* Next 2 lines temporary, change CSS when implementing on 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";
 
};
 
};
  
Line 406: Line 397:
 
get("map_leaflet_1").style.display = "block";
 
get("map_leaflet_1").style.display = "block";
 
w.maps.resizeMaps();
 
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 456: Line 448:
 
     document.head.appendChild(script);
 
     document.head.appendChild(script);
 
 
}() );
+
}());</script><p style="display:none;"></includeonly>
</script></includeonly>
 

Latest revision as of 09: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.