Environment flood map along side with Google maps
Code below adds a link ("Show Env Flood Map") to a number of pages / tabs. By clicking the link environmental agency site generated map opened + Google map. The code is so complex since series of FRAMEs are required to center / cut flood map correctly
function showEnvMapPopup() {
var lines = $$('div.address')[3].descendants();
var postcode = lines[lines.length - 1].innerHTML;
w = window.open('', 'wnd', 'width=1520,height=510,menubar=0,toolbar=0,status=0,scrollbars=0,resizable=0');
w.document.open();
w.document.write(unescape('%3Chtml%3E%0A%3Chead%3E%0A%3Ctitle%3E%3C/title%3E%0A%3Cscript%20type%3D%22text/javascript%22%3E%0A%20%20%20%20function%20hack0%28%29%20%7B%0A%20%20%20%20%20%20%20%20parent.hack.document.open%28%29%3B%0A%20%20%20%20%20%20%20%20parent.hack.document.write%28%0A%27%3Chtml%3E%5C%0A%20%3Chead%3E%5C%0A%20%3Ctitle%3E%3C/title%3E%5C%0A%20%3C/head%3E%5C%0A%20%3Cbody%20onload%3D%22window.scrollTo%28210%2C%20258%29%3B%22%3E%5C%0A%20%3Ciframe%20src%3D%22http%3A//maps.environment-agency.gov.uk/wiyby/wiybyController%3Fvalue%3D'));
w.document.write(encodeURIComponent(postcode));
w.document.write(unescape('%26submit.x%3D0%26submit.y%3D0%26submit%3DSearch%2509%26lang%3D_e%26ep%3Dmap%26topic%3Dfloodmap%26layerGroups%3Ddefault%26scale%3D9%26textonly%3Doff%22%20height%3D%221000px%22%20width%3D%221000px%22%20frameborder%3D%220%22%20marginheight%3D%220%22%20marginwidth%3D%220%22%20scrolling%3D%22no%22%3E%5C%0A%20%3C/iframe%3E%5C%0A%20%3C/body%3E%5C%0A%20%3C/html%3E%27%29%3B%0A%20%20%20%20%20%20%20%20parent.hack.document.close%28%29%3B%0A%20%20%20%20%20%20%20%20parent.map.document.open%28%29%3B%0A%20%20%20%20%20%20%20%20parent.map.document.write%28%0A%27%3Chtml%3E%5C%0A%20%3Chead%3E%5C%0A%20%3Ctitle%3E%3C/title%3E%5C%0A%20%3Cscript%20type%3D%22text/javascript%22%20src%3D%22https%3A//maps.googleapis.com/maps/api/js%3Fkey%3DAIzaSyCVfbzcGbsl4VUHxXmOOGQ_2NxHFE8AQ2Q%26sensor%3Dfalse%26region%3DUK%22%3E%3C%5C/script%3E%5C%0A%20%3Cscript%20type%3D%22text/javascript%22%3E%5C%0A%20function%20initializeGMap%28%29%20%7B%5C%0A%20%20%20%20var%20elt%20%3D%20document.getElementById%28%22map%22%29%3B%5C%0A%20%20%20%20var%20geo%20%3D%20new%20google.maps.Geocoder%28%29%3B%5C%0A%20%20%20%20geo.geocode%28%20%7B%20%22address%22%20%3A%20%22'));
w.document.write(postcode);
w.document.write(unescape('%2CUK%22%2C%20%22region%22%20%3A%20%22UK%22%20%7D%2C%20function%20%28results%2C%20status%29%20%7B%5C%0A%20%20%20%20%20%20%20%20if%20%28status%20%3D%3D%20google.maps.GeocoderStatus.OK%29%20%7B%5C%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20options%20%3D%20%7B%20zoom%3A%2014%2C%20center%3A%20results%5B0%5D.geometry.location%2C%20mapTypeId%3A%20google.maps.MapTypeId.ROADMAP%20%7D%3B%5C%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20map%20%3D%20new%20google.maps.Map%28elt%2C%20options%29%3B%5C%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20marker%20%3D%20new%20google.maps.Marker%28%7B%20map%3A%20map%2C%20position%3A%20results%5B0%5D.geometry.location%20%7D%29%3B%5C%0A%20%20%20%20%20%20%20%20%7D%20else%20%7B%5C%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20%28console%29%20console.log%28%22geocode%20failure%20reason%3A%20%22%20+%20status%29%3B%5C%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20options%20%3D%20%7B%20zoom%3A%205%2C%20center%3A%20new%20google.maps.LatLng%2854.577349%2C%20-4.19403%29%2C%20mapTypeId%3A%20google.maps.MapTypeId.ROADMAP%20%7D%3B%5C%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20map%20%3D%20new%20google.maps.Map%28elt%2C%20options%29%3B%5C%0A%20%20%20%20%20%20%20%20%7D%5C%0A%20%20%20%20%7D%29%3B%5C%0A%20%7D%5C%0A%20%3C%5C/script%3E%5C%0A%20%3C/head%3E%5C%0A%20%3Cbody%20onload%3D%22initializeGMap%28%29%3B%22%3E%5C%0A%20%3Cdiv%20id%3D%22map%22%20style%3D%22width%3A%20750px%3B%20height%3A%20500px%3B%20border%3A%201px%20green%20solid%22/%3E%5C%0A%20%3C/body%3E%5C%0A%20%3C/html%3E%27%29%3B%0A%20%20%20%20%20%20%20%20parent.map.document.close%28%29%3B%0A%20%20%20%20%7D%0A%3C/script%3E%0A%3C/head%3E%0A%3Cframeset%20rows%3D%22502%2C*%22%20cols%3D%22752%2C*%22%20onload%3D%22hack0%28%29%3B%22%3E%0A%3Cframe%20src%3D%22%22%20noresize%3D%22yes%22%20frameborder%3D%220%22%20marginheight%3D%220%22%20marginwidth%3D%220%22%20scrolling%3D%22no%22%20name%3D%22hack%22%3E%0A%3Cframe%20src%3D%22%22%20noresize%3D%22yes%22%20frameborder%3D%220%22%20marginheight%3D%220%22%20marginwidth%3D%220%22%20scrolling%3D%22no%22%20name%3D%22map%22%3E%0A%3C/frameset%3E%0A%3C/html%3E'));
w.document.close();
}
Event.observe(window, 'load', function () {
if (document.URL.indexOf('/proposalpage.aspx') > 0 ||
document.URL.indexOf('/underwritingpage.aspx') > 0 ||
document.URL.indexOf('/calculationpage.aspx') > 0 ||
document.URL.indexOf('/documentspage.aspx') > 0 ||
document.URL.indexOf('/claimspage.aspx') > 0 ||
document.URL.indexOf('/notespage.aspx') > 0 ||
document.URL.indexOf('/moneypage.aspx') > 0 ||
document.URL.indexOf('/overviewpage.aspx') > 0) {
var elt = new Element('a', { href: '#', onclick: 'showEnvMapPopup();', style: 'font-family: "Lucida Grande", "Segoe UI", Arial, Helvetica, sans-serif; font-size: 15px; padding-left: 25px;' }).update('Show Env Flood Map');
$$('#pane_right')[0].appendChild(elt);
}
});
Please sign in to leave a comment.
Comments
1 comment