London Air Quality Network :: Welcome to the London Air Quality Network

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" class="no-js"> <head> <title>London Air Quality Network :: Welcome to the London Air Quality Network » Statistics Maps</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=8" /> <meta name="keywords" content="Air, Pollution, Quality, smog, fumes, exhaust, emission, plume, health, environment, public health, asthma, respiratory, breathing, modeling, mapping, monitoring, data, Ozone, sulphur, sulfur, nitrogen, carbon, dioxide, monoxide, particulates, dust, pollutant, O3, SO2, NO2, CO, PM10, PM2.5, London, Kent, Kings, environmental, research, Seiph, south east institute, erg, network, LAQN, OMNI" /> <meta name="description" content="London Air Quality Network :: the comprehensive source of information about air pollution in London" /> <meta name="distribution" content="Global" /> <meta name="rating" content="General" /> <meta name="expires" content="never" /> <meta name="copyright" content="ERG LAQN Version 7.0 - 2012" /> <meta name="author" content="erg-web@imperial.ac.uk" /> <meta http-equiv="imagetoolbar" content="no" /> <link rel="icon" href="/favicon.ico" type="image/x-icon" />  <link rel="stylesheet" href="/london/css/laqn.css?version="23/11/2024 13:18:55" type="text/css" media="screen,print" title="default" />    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" /> <link rel="shortcut icon" href="/assets/img/logo/favicon.png"> <script type="text/javascript"> // Modernizr-style JS detection (used as non-JS UI CSS hook) // replace html tag's "no-js" class with "js" document.getElementsByTagName('html')[0].className = 'js'; </script> <link href="/assets/dist/bootstrap/css/bootstrap.min.css?v=1.0" rel="stylesheet" /> <link href="/assets/css/bootstrap-extend-ij.css?v=1.0" rel="stylesheet" /> <link href="/assets/dist/fontawesome/css/font-awesome.min.css?v=1.0" rel="stylesheet" /> <link href="/assets/css/base.css?v=31.01" rel="stylesheet" /> <link href="/assets/css/guide.css?v=1.0" rel="stylesheet" /> <link href="/assets/css/responsive.css?v=1.0" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic" rel="stylesheet" /> <link href="/assets/dist/courier-prime-sans/font.css?v=1.0" rel="stylesheet" /> <link href="/LondonAir/App_Themes/Kings/Print.css?v=1.0" type="text/css" rel="stylesheet" /> <link href="/LondonAir/App_Themes/Kings/Screen.css?v=1.6" type="text/css" rel="stylesheet" /> <script type="application/javascript" src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"> </script> <link href="/assets/css/accessibility.css?v=1" rel="stylesheet"> </head>  <body id="monitoringpage"> <noscript> <p class="no-javascript">JavaScript must be enabled in order for you to use Google Maps.</p> </noscript>   <div id="sfwrapper">  <header class="bg-ground breathe-2x"> <div class="container clearfix"> <div class="pull-left">  <a class="logo" href="/LondonAir/Default.aspx">London Air</a> </div> <div class="pull-right">  <div class="forecasts pull-left"> <h4 class="full-height hidden-xs">Forecast</h4>  <a href="http://londonair.org.uk/Forecast" title="Go to the Forecast page" class="aqi-box aqi-low"> <h5 class="time">Today</h5> <p class="prediction"> <span>Low</span> </p> </a> <a href="http://londonair.org.uk/Forecast" title="Go to the Forecast page" class="aqi-box aqi-low"> <h5 class="time">Tomorrow</h5> <p class="prediction"> <span>Low</span> </p> </a>  </div>  <a class="parent logo pull-right" href="https://www.imperial.ac.uk/school-public-health/environmental-research-group" target="_blank" title="Imperial College London">Imperial College London</a> </div> </div> </header>  <nav class="navbar navbar-inverse"> <div class="container">  <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>  </div>  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav">   <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Air Pollution <span class="caret"></span> </a> <ul class="dropdown-menu"> <li> <a href="/LondonAir/nowcast.aspx">Air Pollution Now</a> </li> <li> <a href="/Londonair/Forecast">Forecast</a> </li> <li> <a href="/london/asp/annualmaps.asp">Annual Maps</a> </li> <li> <a href="/london/asp/futuremaps.asp">Future Maps</a> </li> <li> <a href="https://londonair.org.uk/map-maker/" target="_blank">Create Pollution Map</a> </li> <li> <a href="/london/asp/publicepisodes.asp">Episodes</a> </li> </ul> </li>  <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Information <span class="caret"></span> </a> <ul class="dropdown-menu"> <li> <a href="/LondonAir/General/about.aspx">About Londonair</a> </li> <li><a href="/LondonAir/Guide/FAQ.aspx">FAQ</a></li> <li> <a href="/LondonAir/Guide/MyActionsForOthers.aspx">What can I do?</a> </li> <li> <a href="/LondonAir/guide/home.aspx">Air Pollution guide</a> </li> <li><a href="/LondonAir/General/research.aspx" title="Research">Research</a></li> <li> <a href="/LondonAir/Guide/SoundSlides/AllVideos.aspx">Videos</a> </li> <li> <a href="/LondonAir/general/news.aspx">News</a> </li> <li> <a href="/london/asp/reports.asp">Reports</a> </li> <li> <a href="/london/asp/LAQNSeminar/">Conferences</a> </li> <li><a href="http://email.londonair.org.uk/h/j/C181D943EF3ED945">Forecast Signup</a></li>  </ul> </li>  <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Monitoring <span class="caret"></span> </a> <ul class="dropdown-menu"> <li> <a href="/london/asp/lahome.asp">Local Authorities</a> </li> <li> <a href="/london/asp/publicdetails.asp">Monitoring Sites</a> </li> <li> <a href="/london/asp/publicbulletin.asp">Latest Bulletin</a> </li> <li> <a href="/london/asp/publicstats.asp">Annual Objectives</a> </li> </ul> </li>  <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Tools <span class="caret"></span> </a> <ul class="dropdown-menu"> <li> <a href="/Londonair/MobileApps">Apps & Widgets</a> </li> <li> <a href="/london/asp/datadownload.asp">Data Download</a> </li> <li> <a href="/london/asp/advgraphs.asp">Graph Plotting</a> </li> <li> <a href="/Londonair/API">Data Feeds</a> </li> <li> <a href="/london/asp/tools.asp">Statistics</a> </li> <li> <a href="http://davidcarslaw.github.io/openair/" target="_blank">Openair</a> </li> </ul> </li> <li class="dropdown" id="UserMenu" visible="true"> <a id="UserMenuLink" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Quick Links (Public) <span class="caret"></span> </a>  <ul class="dropdown-menu" id="PublicMenu" visible="true"> <li> <a href="/london/asp/nowcast.asp">Air Pollution Now</a> </li> <li> <a href="/Londonair/Forecast">Forecast</a> </li> <li> <a href="/london/asp/annualmaps.asp">Annual Maps</a> </li> <li> <a href="/london/asp/futuremaps.asp">Future Maps</a> </li> <li> <a href="/LondonAir/guide/home.aspx">Air Pollution Guide</a> </li>  <li> <a href="/LondonAir/general/news.aspx">News</a> </li> <li> <a href="/Londonair/MobileApps">Mobile Apps</a> </li> <li> <a href="/london/asp/publicstats.asp">Annual objectives</a> </li> </ul> </li> </ul>   <div class="navbar-form navbar-right search-submit-integrated expandable"> <div class="form-group"> <script language="javascript" src="/london/js/search.js" type="text/javascript"></script> <form action="/LondonAir/Search.aspx" id="" name="search" onsubmit="return CheckSearchForm();"> <input type="text" name="q" size="10" maxlength="30" id="SearchBox" title="Enter your search keywords here" Class="form-control" placeholder="Search" ToolTip="Enter your search keywords here" /> <input type="hidden" name="cx" value="014158417238164596157:txnjnzvxdha" /> <input type="hidden" name="cof" value="FORID:9" /> <input type="hidden" name="ie" value="UTF-8" /> <button type="submit" name="sa" id="btnSearch" class="btn btn-sm btn-link" title="Search the website" ><i class="fa fa-search fa-lg"></i></button> </form>  <script type="text/javascript" src="https://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script> </div> </div>  <ul class="nav navbar-nav navbar-right hidden-xs nav-social-icons"> <li> <a href="https://twitter.com/londonair/" title="Twitter" target="_blank"> <i class="fa fa-twitter fa-lg"></i> </a> </li> <li> <a href="https://www.facebook.com/LondonAir/" title="Facebook" target="_blank"> <i class="fa fa-facebook fa-lg"></i> </a> </li> <li> <a href="https://www.youtube.com/user/LondonAir0" title="YouTube" target="_blank"> <i class="fa fa-youtube-play fa-lg"></i> </a> </li> <li> <a href="/london/asp/rss.asp" title="RSS"> <i class="fa fa-rss fa-lg"></i> </a> </li> </ul>  <ul class="nav navbar-nav navbar-right visible-xs-block"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Social + RSS <span class="caret"></span> </a> <ul class="dropdown-menu"> <li> <a href="https://twitter.com/londonair/">Twitter</a> </li> <li> <a href="https://www.facebook.com/LondonAir/">Facebook</a> </li> <li> <a href="https://www.youtube.com/user/LondonAir0">YouTube</a> </li> <li> <a href="/london/asp/rss.asp">RSS</a> </li> </ul> </li> </ul> <asp:Label ID="lblError" runat="server" Text="" Visible="false" CssClass="red-bold"></asp:Label> </div>  </div>  </nav>  <div class="breadcrumb-wrapper"> <div class="container"> <div id="crumbTrail"> <ul title="You are on this page: Monitoring Sites "> <li>You are on this page: </li> <li>Monitoring Sites </li> </ul> </div> </div> </div>  <div id="mainContainermap" class="sfmainContainerMap bgd colscheme1"> <div class="container">  <div id="leftContentMap" class="col-sm-7"> <span class="contentbanner" title="London Air Quality Network Monitoring Sites" >LAQN Monitoring Sites</span>  <noscript> <p class="red-bold">JavaScript must be enabled in order for you to use Google Maps.</p> </noscript>  <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=AIzaSyDSafd79JQq2XMm1DWR5uy6oSuF4jgdl2E&sensor=false"></script> <script type="text/javascript" src="/LondonAir/Js/GoogleMapV3Utils.js"></script>  <script src="/LondonAir/Js/ArcGIS-10.js" type="text/javascript"></script>   <script src="/london/js/postcodes-v3.js" type="text/javascript"></script> <div class="row"> <div class="col-md-12 col-sm-6 col-xs-12"> <div class="search-submit-integrated"> <div class="form-group"> <input type="text" class="form-control" placeholder="Find postcode" name="address" id="address"> <a class="btn btn-sm btn-link" onclick="javascript: codeAddress(document.getElementById('address').value)"><i class="fa fa-search fa-lg"></i></a> </div> </div> </div> </div>   <form method="get" action="">  <div id="map_canvas" class="google-map"></div>  <div id="selection"></div>  <select name="species" id="species" title="Change species viewed on map" class="species"> <option value="All">All Species</option> <option value="CO" >Carbon Monoxide (CO)</option> <option value="NO2" >Nitrogen Dioxide (NO2)</option> <option value="O3" >Ozone (O3)</option> <option value="PM10" >PM10 Particulates</option> <option value="PM25" >PM2.5 Particulates</option> <option value="SO2" >Sulphur Dioxide (SO2)</option> </select>  <label>Include closed sites: <input type="checkbox" id="IncludeClosedSites" unchecked class="checkbox" /></label>  <br /><br /> <label> Show Authorities (<a href="https://www.ordnancesurvey.co.uk/election-maps/" target="_blank" title="Contains Ordnance Survey data (C) Crown copyright and database rights 2011">OS Data</a>):   </label>  <div id="LayersContainer" style="display: inline; width: auto; height: auto; padding: 0; border: 0px dotted #000; visibility: visible;"> </div>  <script type="text/javascript"> // In v3, all Google Maps JavaScript API code is stored in the google.maps.* namespace instead of the global namespace. // This will cause the map to render with newly styled base map tiles, markers, info windows and controls. google.maps.visualRefresh = true; // ====================== GLOBAL VARIABLES ============================ // ==== create first part of the select box === var select_html = '<select onchange="selectBoxChanged(this)" id="select-sites" title="Select a monitoring site to view">' + '<option selected="selected">Select a monitoring site to view:</option>'; // === initialise arrays and counter for XML nodes/site names etc === var gmarkers = []; var htmls = []; var names = []; var SortedNames = []; var sites = []; var i = 0; // === arcgis variables === var dynamap = null; // boundaries - get Y/N from ASP querystring var laEdge = ""; //console.log("laEdge=" + laEdge); // === google map settings == // array for tracking overlays and removing var overlays = []; var infowindow; // use global for map var map = null; // set zoom to ASP default var GlobalZoom = 9; // === site specific variables === // create a store of the current selected site var GlobalSite = ""; // make global var to avoid google api error var original_site = ""; // index of site selected var ChosenIndex; // if site selected reset index to 0 if (GlobalSite != "") { ChosenIndex = 0; }; // ====================== END GLOBAL VARIABLES ============================ // ========================== FUNCTIONS =================================== // ============ add ARCGIS layers to the map ================ function switchNames(name) { // get readable names switch (name) { case "district_borough_unitary_region_LatLon": LayerName = "Boundaries"; break; case "district_borough_unitary_region_LatLon_labels": LayerName = "Districts"; break; case "district_borough_unitary_region_LatLonDark": LayerName = "Boundaries (dark)"; break; case "district_borough_unitary_region_LatLonDarkNames": LayerName = "Districts (dark)"; break; } return LayerName; } // load in ARCGIS layers from webgis function loadARCGIS() { var LayersContainer = document.getElementById('LayersContainer'); LayersContainer.style.visibility = "visible"; // set the ArcGIS url var url = 'webgis.erg.ic.ac.uk/ergwebsvr/rest/services/LocalAuthorities/MapServer'; // if we are on Olympics page show venues //check if url is using http or https if ("https:" == document.location.protocol) { url = 'https://' + url; } else { /* unsecure */ url = 'http://' + url; } // create dynamic map object dynamap = new gmaps.ags.MapOverlay(url, {opacity: 0.5}); //console.log("load arcgis layers for url " + url + " show = " + show); // on service load google.maps.event.addListenerOnce(dynamap.getMapService(), 'load', function() { // add layers to map dynamap.setMap(map); // get the service var service = dynamap.getMapService(); // layer definitions filter on LA Name eg Richmond service.getLayer("district_borough_unitary_region_LatLon").definition = "NAME like '%'"; service.getLayer("district_borough_unitary_region_LatLon_labels").definition = "NAME like '%'"; service.getLayer("district_borough_unitary_region_LatLonDark").definition = "NAME like '%'"; service.getLayer("district_borough_unitary_region_LatLonDarkNames").definition = "NAME like '%'"; // create HTML var checkBoxesHTML = ""; //console.log(service.layers.length); // loop through service layers for (var i = 0; i < service.layers.length; i++) { // check map type var newMapType = map.getMapTypeId(); // on LA page show boundary layer only // bulletin/details pages etc // check if boundaries on from last page accessed if (laEdge == "Y") { // check map type changed // roadmap - dark boundaries if (newMapType == google.maps.MapTypeId.ROADMAP) { // set layer visibility service.layers[0].visible = false; service.layers[1].visible = false; service.layers[2].visible = true; service.layers[3].visible = false; // create checkbox createCheckBox("2"); } // satellite - light boundaries else if (newMapType == google.maps.MapTypeId.SATELLITE) { // set layer visibility service.layers[0].visible = true; service.layers[1].visible = false; service.layers[2].visible = false; service.layers[3].visible = false; // create checkbox createCheckBox("0"); } // hybrid - light boundaries else if (newMapType == google.maps.MapTypeId.HYBRID) { //console.log(newMapType); // set layer visibility service.layers[0].visible = true; service.layers[1].visible = false; service.layers[2].visible = false; service.layers[3].visible = false; // create checkbox createCheckBox("0"); } // greyscale (not a google map type) - dark boundaries else { //console.log("greyscale=" + google.maps.StyledMapType.name); // set layer visibility service.layers[0].visible = false; service.layers[1].visible = false; service.layers[2].visible = true; service.layers[3].visible = false; // create checkbox createCheckBox("2"); } } else // checkbox off so hide layers { service.layers[i].visible = false; // create checkbox by default for dark boundaries createCheckBox("2"); } // build up checkboxes in html for each layer //checkBoxesHTML += '<input type="checkbox" id="layer' + service.layers[i].id + '"'; // if visible set checked //if (service.layers[i].visible) //{ // checkBoxesHTML += ' checked="checked"'; //} // add click event and layer name //checkBoxesHTML += ' onclick="setVis()">' + switchNames(service.layers[i].name) + " "; } }); } // create HTML checkbox for layer ID passed in function createCheckBox(thisLayer) { var checkBoxesHTML = ""; checkBoxesHTML += '<input type="checkbox" id="layer' + thisLayer + '"'; // tick checkbox for LA pages and if set in previous page // also check box if layer visible var service = dynamap.getMapService(); if (service.layers[parseInt(thisLayer)].visible) { checkBoxesHTML += ' checked="checked"'; } // add click event checkBoxesHTML += ' onclick="setVisibility(' + thisLayer + ')">'; //console.log(checkBoxesHTML); // show checkbox on page document.getElementById('LayersContainer').innerHTML = checkBoxesHTML; // refresh map dynamap.refresh(); } var layer_1; var layers; function changeBoundaries(){ if(undefined !== layer_1){ if (layer_1.getMap() === null) { layer_1.setMap(map); }else { layer_1.setMap(null); } }else if(!_.isUndefined(layers)){ _.each(layers, function(lay){ if (lay.getMap() === null) { lay.setMap(map); } else { lay.setMap(null); } }) } } // show layers function setVisibility(thisLayer) { // get the service var service = dynamap.getMapService(); // get checkbox for current layer ID var checkBox = document.getElementById('layer' + thisLayer); // set layer visibility based on tick service.layers[thisLayer].visible = (checkBox.checked === true); // set laEdge variable if (checkBox.checked) { laEdge = "Y"; } else { laEdge = "N"; } //console.log(laEdge); // refresh map dynamap.refresh(); } // NOT USED - show all layers function setVis() { // get the service var service = dynamap.getMapService(); // loop through layers for (var i = 0; i < service.layers.length; i++) { // get checkbox for current layer var checkBox = document.getElementById('layer' + service.layers[i].id); // set visibility based on tick service.layers[i].visible = (checkBox.checked === true); } // refresh map dynamap.refresh(); } // ============ END ARCGIS ================ // =========== get icon path for icontype index ============== // v3 we just need to return a path url: '/path/to/icon.png' function GetIconType(icontype) { // get the icons based on the AQ Index // use a bigger dot if we are in close var IconSize = "Small"; // large if zoomed in if (GlobalZoom > 11) { IconSize = "Large"; }; //console.log(GlobalZoom + " " + IconSize); var monitoringIconIndustrial = "/london/Images/Newindex/Details" + IconSize + "Industrial.png"; var monitoringIconRoadside = "/london/Images/Newindex/Details" + IconSize + "Roadside.png"; var monitoringIconSuburban = "/london/Images/Newindex/Details" + IconSize + "Suburban.png"; var monitoringIconUrbanBackground = "/london/Images/Newindex/Details" + IconSize + "UrbanBack.png"; // store icons in array - so we can access by index number var icons = []; icons[14] = monitoringIconIndustrial; icons[15] = monitoringIconRoadside; icons[16] = monitoringIconSuburban; icons[17] = monitoringIconUrbanBackground; // return url path of icontype requested based on index number passed in return icons[icontype]; // ##### END ICONS ############### } // ========= get z-index based on icon type ================= function getZIndex(icontype) { // conditions for site details if needed later var zindex = icontype * 10; // return z index number for icons return zindex; } // ======== function if drop down sites list under map is changed ======================= // === If the dummy entry is selected, the info window is closed == function selectBoxChanged(option) { // get index (zero based minus 1) from <option> var j = option.selectedIndex - 1; // get the site name from index selected var name = SortedNames[j]; // reset selected index var SelectedIndex = -1; // loop through global markers array for (var m = 0; m <= i; m++) { // match sitecode index to markers index if (names[m] == name) { // get the index for the site that matched in drop down list and map markers SelectedIndex = m; } } // trigger click event when site selected in drop down if (SelectedIndex > -1) { // open window on global markers array of selected index google.maps.event.trigger(gmarkers[SelectedIndex],"click"); } else { // close info windows if (infowindow) infowindow.close(); } } // ================== function to create the marker and set up the event window =================== function createMarker(point,label,html,icontype,site,type) { //console.log(point,label,html,icontype,site); // define the icon settings var image = { url: GetIconType(icontype), // This marker is 30 pixels wide by 30 pixels tall. size: new google.maps.Size(30, 30), // The origin for this image is 0,0. //origin: new google.maps.Point(0,0), // The anchor for this image is the base of the icon at 0,32. //anchor: new google.maps.Point(0, 32) }; // create a marker object var marker = new google.maps.Marker( { position: point, // get icon from function - v3 we just need a path url: '/path/to/icon.png' //icon: GetIconType(icontype), icon: image, //shape: shape, // label is the variable for the site name title: label, // set z-index from function zIndex: getZIndex(icontype), // can add to map here //map: map, // add icontype for changing size on refresh function customInfo: icontype }); //console.log("zindex=" + getZIndex(icontype)); //console.log("icon=" + GetIconType(icontype)); //============== set Level text for window bubble ==================== var LevelText = ""; if (icontype==0) { LevelText = "No index" }; if (icontype==-1) { LevelText = "Site Closed" }; if (icontype>=1 && icontype < 11) { LevelText = "Index level "+ icontype }; if (icontype>=11 && icontype < 21) { LevelText = "Index level "+ (icontype-10) + " (predicted)" }; // ================= end level text ================ // ========= add click event to show window ================================= google.maps.event.addListener(marker, "click", function() { //console.log("clicked=" + label); // set Global site to current site code in loop GlobalSite = site; // get map centre var center = map.getCenter(); // ======== check if LA boundary on / off ====================== laEdge = ""; // var for layer from ArcGIS var layerID = ""; // check map type var newMapType = map.getMapTypeId(); // roadmap - dark boundaries if (newMapType == google.maps.MapTypeId.ROADMAP) { layerID = "2"; } // satellite - light boundaries else if (newMapType == google.maps.MapTypeId.SATELLITE) { layerID = "0"; } // hybrid - light boundaries else if (newMapType == google.maps.MapTypeId.HYBRID) { layerID = "0"; } // greyscale (not a google map type) - dark boundaries else { layerID = "2"; } // get checkbox for layer var checkBox = document.getElementById('layer' + layerID); //console.log("layerID=" + layerID); // set laEdge based on check // if (checkBox.checked === true) // { /// laEdge = "Y"; // } // else // { // laEdge = "N"; // } // === create the HTML for the link in the info window var WindowHtml= "<div class=\"info-window\"><strong>" + label + " - " + type + "</strong><br /><br /><a href=" + html + "&la_id=&zoom=" + map.getZoom() + "&lat=" + center.lat() + "&lon=" + center.lng() + "&laEdge=" + laEdge + "&details=" + " title=\"View monitoring site details\">View monitoring site details</a></div>"; // close window if open if (infowindow) infowindow.close(); // create new window with HTML in bubble infowindow = new google.maps.InfoWindow( { content: WindowHtml, maxWidth: 400, zIndex: 999 }); infowindow.open(map,marker); }); // =========== end marker click event listener ============ // set index of global markers array gmarkers[i] = marker; // set html array htmls[i] = html; // set the site code sites[i] = site; // set names names[i] = label //console.log("gmarkers=" + gmarkers[i]); //console.log("htmls=" + htmls[i]); //console.log("sites=" + sites[i]); //console.log("names=" + names[i]); // increment markers count i++; // return the marker object return marker; } // ========================== end createMarker =========================================== // ============ function to load XML into Google Map markers ======================= function loadXML(reload) { //console.log("load XML - reload " + reload); // ============ first set up the URL querystring for the XML path ======================= // show/hide species and closed sites var species = ""; var IncludeClosed = ""; // access species drop down list if (document.getElementById("species")) { var speciesDropDown = document.getElementById("species"); // add value to var for querystring species = "mapview=" + speciesDropDown.options[speciesDropDown.selectedIndex].value; // if closed checked then add to querystring var closedSitesCheckBox = document.getElementById("IncludeClosedSites"); if (closedSitesCheckBox.checked) { IncludeClosed = "&IncClosed=Y"; } else { IncludeClosed = "&IncClosed=N"; } } else { // drop down not selected so leave mapview to show all species species = "all"; } // ============ end URL querystring set up ======================= // ======================================== XML LOADING GOOGLE MAP API V3 ========================================================= // local JS callback function with querystring set with above variables for species/closed // returns data object in callback //console.log("/london/asp/XML/SiteDetailsXml.asp?" + species + IncludeClosed); downloadUrl("/london/asp/XML/SiteDetailsXml.asp?" + species + IncludeClosed, function(data) { // get all the <marker> nodes for each site markers = data.documentElement.getElementsByTagName("marker"); //console.log("XML nodes =" + markers.length); // reset the global array names list names = []; // on first load if (reload === false) { // v3 close any windows var infowindow = null; if (infowindow) { infowindow.close(); } // V3 All the polygons & markers are pushed to overlays array. //pop() method returns the last element of an array. It also removes that from the array. // while-loop removes the overlays both from the map and from the array. while(overlays[0]) { overlays.pop().setMap(null); } // empty the googleMarkers array gmarkers = []; } // reload the XML for species/closed sites as markers will change else if (reload === true) { // reset the counter i = 0; // set to global site original_site = GlobalSite; // V3 All the polygons & markers are pushed to overlays array. //pop() method returns the last element of an array. It also removes that from the array. // while-loop removes the overlays both from the map and from the array. while(overlays[0]) { overlays.pop().setMap(null); } } // ======== so sites dont hide each other ==============// // set offset calculation factor and max zoom // var factor = parseFloat(0.2/(90000)); // var MaxZoomLevel = parseFloat(16-1); var MaxZoomLevel = parseFloat(16-1); var factor = parseFloat(0.2/(90000*(MaxZoomLevel-8))); // latfactor corrects for an apparent latitude error in Google Maps when zooming out: var latfactor = parseFloat(0.2/(800)); // ============= loop through all XML marker nodes ========================== //for (m = 0; m < 5; m++) for (var m = 0; m < markers.length; m++) { // obtain the attribues of each marker from the XML file // site code var site = markers[m].getAttribute("code"); // lat and long positions var lat = parseFloat(markers[m].getAttribute("lat")); var lng = parseFloat(markers[m].getAttribute("lng")); // get offsets var latoffset = parseFloat(markers[m].getAttribute("latoffset")); var lonoffset = parseFloat(markers[m].getAttribute("lonoffset")); // CHECK THESE OFFSETS STILL WORK IN V3 // calculate new lat/long with calculation factors - get zoom level from the Global Var // var newLat = parseFloat(lat + (latoffset * factor * Math.pow(1.8,(MaxZoomLevel+1) - GlobalZoom)/(MaxZoomLevel-8))); // var newLong = parseFloat(lng + (lonoffset * factor * Math.pow(1.8,(MaxZoomLevel+1) - GlobalZoom)/(MaxZoomLevel-8))); var newLat = parseFloat(lat + (latoffset * factor * Math.pow(1.8,(MaxZoomLevel+1) - GlobalZoom)) - (latfactor * Math.pow(2,(MaxZoomLevel+1) - GlobalZoom))); var newLong = parseFloat(lng + (lonoffset * factor * Math.pow(1.8,(MaxZoomLevel+1) - GlobalZoom))); // create point from lat/lng //var point = new google.maps.LatLng(lat,lng); var point = new google.maps.LatLng(newLat,newLong); // get site HTML for link and site name var html = markers[m].getAttribute("html"); var label = markers[m].getAttribute("label"); // =========== set up icons for network type ============================ var network = ""; network = markers[m].getAttribute("network"); var type = markers[m].getAttribute("type"); // sort out icon var icontype = ""; switch(type) { case "Industrial": icontype = 14; break; case "Roadside": icontype = 15; break; case "Suburban": icontype = 16; break; case "Urban Background": icontype = 17; break; case "Rural": icontype = 16; break; default: icontype = 15; break; } // Index Source var IndexSource = markers[m].getAttribute("IndexSource"); // change icon for triggers/predicted if (IndexSource == "Trigger") { icontype = icontype + 10; } // create the marker with values from the XML node - call createMarker function on each node/site // type added for network icons //console.log("create marker for index = " + m); var marker = createMarker(point,label,html,icontype,site,type); //console.log("marker created - icon type = " + marker.customInfo); // add to map marker.setMap(map); // remove //marker.setMap(null); // push marker to overlays array overlays.push(marker); // repeat loop again for next monitoring site } // ============= END loop through XML marker nodes ========================== //=========== OLYMPIC 2012 VENUES =================== //=================== DROP DOWN LIST UNDER THE MAP ALSO FILLED FROM XML ==================================== // ====== change select list every time, as list might have changed. select_html = '<select onchange="selectBoxChanged(this)" id="select-sites">' + '<option selected="selected" title="Select a monitoring site to view">Select a monitoring site to view:</option>'; // sort global names array list // gmarkers/htmls/sites/names array variables are set in createMarker function //The slice() method returns the selected elements in an array, as a new array object. SortedNames = names.slice(0); SortedNames.sort(); // loop through markers and add as items in drop down for (n = 0; n < m; n++) { select_html += '<option value="' + SortedNames[n] + '"> ' + SortedNames[n] + '</option>'; } // close the select box here select_html += '</select>'; // now add <select> to the DIV container document.getElementById("selection").innerHTML = select_html; //=================== END DROP DOWN LIST ==================================== //=================== find out chosen index ==================================== // add the marker if we need to //console.log("original site = " + original_site); // if original site var has been set if (original_site != "") { // reset chosen index var ChosenIndex = -1; // loop through markers - i to total number read in from XML for (var m = 0; m <= markers.length; m++) { // match sitecode index to markers index if (sites[m] == original_site) { // get the index for the site ChosenIndex = m; } } // need to act as if we have selected the site to keep bubble ChosenIndex = -1; google.maps.event.trigger(gmarkers[ChosenIndex],"click"); } // ========= end downloadUrl function =============== //console.log("end downloadUrl function"); }); //console.log("end loadXML function"); } // ================== end loadXML function ===================== // ================== Refresh icon markers and lat/lng offsets (based on zoom level) when zooming ===================== function RefreshMarkers() { //console.log("refresh " + gmarkers.length + " map markers from gmarker array"); //console.log("refresh " + markers.length + " map markers from markers XML"); // same code as in LoadXML but without loading the XML just refresh markers and apply offset based on zoom level // reset the gmarkers loop counter i = 0; // set to global site original_site = GlobalSite; // ======== clear existing markers ========== // V3 All the polygons & markers are pushed to overlays array. pop() method returns the last element of an array. It also removes that from the array. // while-loop removes the overlays both from the map and from the array. while(overlays[0]) { overlays.pop().setMap(null); } // ======== so sites dont hide each other ==============// // set offset calculation factor and max zoom // var factor = parseFloat(0.2/(90000)); // var MaxZoomLevel = parseFloat(16-1); var MaxZoomLevel = parseFloat(16-1); var factor = parseFloat(0.2/(90000*(MaxZoomLevel-8))); // latfactor corrects for an apparent latitude error in Google Maps when zooming out: var latfactor = parseFloat(0.2/(800)); // loop through current markers on the map // these ones stored in gmarker array //for(i = 0; i < gmarkers.length; i ++ ) // these are from XML loop if(!!markers){ //in IE edge the markers are null for unknown reason, reload markers loadXML(true); }else{ for (var m = 0; m < markers.length; m++) { // obtain the attribues of each marker from the MARKERS array variable // site code var site = markers[m].getAttribute("code"); // lat and long positions var lat = parseFloat(markers[m].getAttribute("lat")); var lng = parseFloat(markers[m].getAttribute("lng")); // get offsets var latoffset = parseFloat(markers[m].getAttribute("latoffset")); var lonoffset = parseFloat(markers[m].getAttribute("lonoffset")); // calculate new lat/long with calculation factors - get zoom level from the Global Var //var newLat = parseFloat(lat + (latoffset * factor * Math.pow(1.8,(MaxZoomLevel+1) - GlobalZoom)/(MaxZoomLevel-8))); //var newLong = parseFloat(lng + (lonoffset * factor * Math.pow(1.8,(MaxZoomLevel+1) - GlobalZoom)/(MaxZoomLevel-8))); var newLat = parseFloat(lat + (latoffset * factor * Math.pow(1.8,(MaxZoomLevel+1) - GlobalZoom)) - (latfactor * Math.pow(2,(MaxZoomLevel+1) - GlobalZoom))); var newLong = parseFloat(lng + (lonoffset * factor * Math.pow(1.8,(MaxZoomLevel+1) - GlobalZoom))); // create point from lat/lng //var point = new google.maps.LatLng(lat,lng); var point = new google.maps.LatLng(newLat,newLong); // get site HTML for link and site name var html = markers[m].getAttribute("html"); var label = markers[m].getAttribute("label"); // =========== set up icons for network type ============================ var network = ""; network = markers[m].getAttribute("network"); var type = markers[m].getAttribute("type"); var icontype = ""; switch(type) { case "Industrial": icontype = 14; break; case "Roadside": icontype = 15; break; case "Suburban": icontype = 16; break; case "Urban Background": icontype = 17; break; case "Rural": icontype = 16; break; default: icontype = 15; break; } // Index Source var IndexSource = markers[m].getAttribute("IndexSource"); // change icon for triggers/predicted if (IndexSource == "Trigger") { icontype = icontype + 10; } // create the marker with values from the XML node - call createMarker function on each node/site // type added for network icons //console.log("create marker for index = " + m); var marker = createMarker(point,label,html,icontype,site,type); //console.log("marker created - icon type = " + marker.customInfo); // add to map marker.setMap(map); // remove //marker.setMap(null); // push marker to overlays array overlays.push(marker); // ======= CODE TAKEN FROM ZOOM EVENT ============== // set site name to one selected - GlobalSite is set in the click event listener site = GlobalSite; // reset the chosen index of site ChosenIndex = -1; // if site not empty if (site != "" ) { // if the current site clicked matches the one current in markers loop if (sites[m] == site) { //console.log("sites[m]=" + sites[m] + " site=" + site); // set the chosen index to the array number for the site - so we can track it by a number eg sites[10] ChosenIndex = m; //console.log("ChosenIndex=" + ChosenIndex + " original_site" + original_site); } } // =================== ZOOM EVENT CODE ============== // stop infowindow closing on zoom // if site has been selected before zoom // 0 treated as empty so change condition if (ChosenIndex >= 0) { // if site selected if (original_site != "" ) { // trigger click event on chosen site to show infowindow (bubble) //console.log("keep infowindow open"); google.maps.event.trigger(gmarkers[ChosenIndex],"click"); //google.maps.event.trigger(markers[ChosenIndex],"click"); } } // >>>>>>>>> repeat loop again for next monitoring site // end marker loop } } } // ================== end Refresh function ===================== // ==================== the initialize function called first on page load - before everthing else ============== function initialize() { //console.log("initialize called"); // Create an array of styles - json format. var greyscaleMap = [{ featureType: "all", stylers: [ { saturation:-80 } ] }]; // Create a new StyledMapType object, passing it the array of styles, // as well as the name to be displayed on the map type control. var greyMapType = new google.maps.StyledMapType(greyscaleMap, { name : "Greyscale" }); //============= create the map ================== var mapOptions = { // get values from ASP request object center: new google.maps.LatLng(51.4750, -0.119824), zoom: 9, panControl: true, panControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT }, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE, position: google.maps.ControlPosition.TOP_LEFT }, scaleControl: true, scaleControlOptions: { position: google.maps.ControlPosition.TOP_LEFT }, mapTypeControl: true, mapTypeControlOptions: { mapTypeIds : [google.maps.MapTypeId.ROADMAP,google.maps.MapTypeId.HYBRID,google.maps.MapTypeId.SATELLITE, 'greyscale'], style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.TOP_CENTER }, mapTypeId: 'greyscale', streetViewControl: true } // add map to page with options map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); //Associate the styled map with the MapTypeId and set it to display. map.mapTypes.set('greyscale', greyMapType); //console.log("zoom = " + map.getZoom()); //============= end create the map ================== // ======= call ARCGIS function ========== //loadARCGIS(); // ================= section to add querystring variables to the links within the google map ========================= // check browser can use DOM if (!document.getElementById) return false; // check container DIV exists from ASP variable // find out what DIV is holding the map if (document.getElementById("mainContainerMap")) { // get map container DIV var CentralArea = document.getElementById("mainContainerMap"); if (CentralArea != null) { CentralArea = document.getElementById("mainContainerMap"); } // get all <a> links in map container var links = CentralArea.getElementsByTagName("a"); // loop through and add click function for (var i = 0; i < links.length; i++) { // if not external hyperlink if (links[i].getAttribute("href").indexOf("http") == -1) { // ========== create function for when any of these links are clicked ============= links[i].onclick = function() { // on click centre the map var center = map.getCenter(); // check Link ID - make sure JQuery links are not included if(this.getAttribute("id") != "linkText" && this.getAttribute("id") != "FancyBox") { // check if <a> href does has a ? in the querystring if (this.getAttribute("href").indexOf("?") == -1) // add map zoom/lat/lng/species/LA boundary/WHo to the querystring { // create whole querystring strating from ? var newlink = this.getAttribute("href") + "?zoom=" + map.getZoom() + "&lat=" + center.lat() + "&lon=" + center.lng() + "&Species=" + document.getElementById("species").value + "&laEdge=" + laEdge + "&WhoBulletin=" + WhoBulletin; } else { // just append to existing querystring with & var newlink = this.getAttribute("href") + "&zoom=" + map.getZoom() + "&lat=" + center.lat() + "&lon=" + center.lng() + "&Species=" + document.getElementById("species").value + "&laEdge=" + laEdge + "&WhoBulletin=" + WhoBulletin; }; // reload page with new url window.location = newlink; return false; } }; // ========== end on click ============= }; // ================== end if not external hyperlink }; // ======= end links loop ========== } // ========= load XML to map - first load so reload boolean is false //console.log("loadXML called"); loadXML(false); // load arcgis layers $.getJSON( '/assets/data/london-boroughs.json?v=1.4', function( data ) { // loadARCGIS(data); var laName = ''; var borough = _.filter(data, function(item) { return item.properties.LAD15NM.toLowerCase() == laName.toLowerCase(); }); if(!_.isEmpty(borough)){ var boroughGeoJson = borough[0]; layer_1 = new google.maps.Data(); layer_1.addGeoJson(boroughGeoJson); layer_1.setStyle(function(feature) { var color = 'purple'; if (feature.getProperty('isColorful')) { color = feature.getProperty('color'); } return /** @type {google.maps.Data.StyleOptions} */({ fillColor: color, strokeColor: color, strokeWeight: 2 }); }); layer_1.setMap(map); }else{ layers = []; _.each(data, function(item){ var lay = new google.maps.Data(); lay.addGeoJson(item); lay.setStyle(function(feature) { var color = 'purple'; if (feature.getProperty('isColorful')) { color = feature.getProperty('color'); } return /** @type {google.maps.Data.StyleOptions} */({ fillColor: 'transparent', strokeColor: color, strokeWeight: 2 }); }); lay.setMap(map); layers.push(lay); }) } }); createLocalFileCheckBox(); // create HTML checkbox for layer ID passed in function createLocalFileCheckBox(){ var checkBoxesHTML = ""; checkBoxesHTML += '<input type="checkbox" id="layer" '; // tick checkbox for LA pages and if set in previous page checkBoxesHTML += ' checked="checked"'; // add click event checkBoxesHTML += ' onclick="changeBoundaries()">'; //console.log(checkBoxesHTML); // show checkbox on page document.getElementById('LayersContainer').innerHTML = checkBoxesHTML; // refresh map // dynamap.refresh(); } // =========== MAP EVENT LISTENERS INSIDE THE INITIALIZE FUNCTION =================================== // =========== map type changed function ================= google.maps.event.addListener(map, 'maptypeid_changed', function() { // check map type var newMapType = map.getMapTypeId(); //console.log(newMapType); //console.log("maptypeid_changed=" + map.getMapTypeId()); //console.log("greyscale=" + google.maps.StyledMapTypeOptions); // only update ArcGIs layers if checkbox on if (laEdge == "Y") { // get the dynamic map service var service = dynamap.getMapService(); // "Boundaries"; // layerid 0 - satellite // "Districts"; // layerid 1 - satellite / labels // "Boundaries (dark)"; // layerid 2 - roadmap and greyscales // "Districts (dark)"; // layerid 3 - not used // check map type changed // roadmap - dark boundaries if (newMapType == google.maps.MapTypeId.ROADMAP) { // set layer visibility service.layers[0].visible = false; service.layers[1].visible = false; service.layers[2].visible = true; service.layers[3].visible = false; // create checkbox createCheckBox("2"); } // satellite - light boundaries else if (newMapType == google.maps.MapTypeId.SATELLITE) { // set layer visibility service.layers[0].visible = true; service.layers[1].visible = false; service.layers[2].visible = false; service.layers[3].visible = false; // create checkbox createCheckBox("0"); } // hybrid - light boundaries else if (newMapType == google.maps.MapTypeId.HYBRID) { //console.log(newMapType); // set layer visibility service.layers[0].visible = true; service.layers[1].visible = false; service.layers[2].visible = false; service.layers[3].visible = false; // create checkbox createCheckBox("0"); } // greyscale (not a google map type) - dark boundaries else { //console.log("greyscale=" + google.maps.StyledMapType.name); // set layer visibility service.layers[0].visible = false; service.layers[1].visible = false; service.layers[2].visible = true; service.layers[3].visible = false; // create checkbox createCheckBox("2"); } // end laEdge check } // ====== OLYMPIC VENUES ===== }); // ============= add event listener for the zoom changed event ================ google.maps.event.addListener(map, "zoom_changed", function() { var zoomLevel = map.getZoom(); // set global variable to current zoom GlobalZoom = zoomLevel; //console.log("zoomed changed - global zoom=" + GlobalZoom); // refresh markers to change icon size RefreshMarkers(); // ===== close zoom listener }); // ========== event listender for closing infowindow ============== google.maps.event.addListener(map, "infowindowclose", function() { // reset the selected site GlobalSite = ""; }); } // =============== end initialize function =============== // ============= HTML controls event functions ================== // === when species select box changed document.getElementById("species").onchange=function() { // close the window to stop IE null error if (infowindow) infowindow.close(); // reload XML loadXML(true); }; // === when include sites checked document.getElementById("IncludeClosedSites").onclick=function() { // close the window to stop IE null error if (infowindow) infowindow.close(); // reload XML loadXML(true); }; // ============= END HTML controls event functions ================== // =========== call initialize function on page load - add it to the DOM event google.maps.event.addDomListener(window, 'load', initialize); </script> <br /> <p> </p> <table id="keyaq" style="font-weight: 700"> <tr> <td><img src="/london/images/newindex/DetailsSmallRoadside.png" alt="Roadside" title="Roadside" /></td> <td><img src="/london/images/newindex/DetailsSmallSuburban.png" alt="Suburban" title="Suburban" /></td> <td><img src="/london/images/newindex/DetailsSmallUrbanBack.png" alt="Urban Background" title="Urban Background" /></td> <td><img src="/london/images/newindex/DetailsSmallIndustrial.png" alt="Industrial" title="Industrial" /></td> </tr> <tr> <td style="font-size: 0.75em;">Roadside</td> <td style="font-size: 0.75em;">Suburban</td> <td style="font-size: 0.75em;">Urban Background</td> <td style="font-size: 0.75em;">Industrial</td> </tr> </table> </div>  <div id="rightContentMap" class="col-sm-5"> <form action="/london/asp/publicdetails.asp" method="get">  <table id="rightcolumn"> <tr> <td id="bulletintab"> <div id="bulletintabs2"> <ul> <li><a href="publicbulletin.asp?region=0&site=&bulletin=hourly&la_id=&network=All&postcode=&MapType=Google&VenueCode=" title="Showing pollution levels throughout London updated each hour and day. You can also view details of monitoring in your area." tabindex="101">Bulletins</a></li> <li title="Details of continuous monitoring sites in London including location maps and photographs." class="selected">Site Details</li> <li><a href="publicstats.asp?region=0&site=&la_id=&network=All&postcode=&MapType=Google&VenueCode=" title="Comparison of results from each monitoring site to the Air Quality Strategy Objectives from 1993 onward." tabindex="102">Statistics</a></li> <li><a href="publicepisodes.asp?region=0&site=&la_id=&network=All&postcode=&MapType=Google&VenueCode=" title="Details of major pollution episodes for your selected area, including peak values recorded, animation of hourly data and likely causes." tabindex="103">Pollution Episodes</a></li> </ul> </div> </td> </tr> <tr class="top"> <td id="maincontent">  <table id="rightcolumnsub">    <tr> <td>This page gives information about each of the continuous monitoring sites in the region you have selected.</td> </tr> <tr> <td style="padding-top: 20px; padding-bottom: 20px;">You can find out more information about each location (monitoring site) by clicking on the map icons or selecting from the drop down list.</td> </tr>  </table> </td> </tr>  </table> </form>  </div> </div> </div> <section class="bg-sky bg-push breathe-2x"> <div class="container"> <div class="row col-gutter-half col-gutter-vertical-half"> <div class="col-xs-12 col-sm-4"> <div class="promo-tile"> <div class="promo-tile"> <header> <h6>Follow Us</h6> </header> <a class="twitter-timeline" href="https://twitter.com/LondonAir" data-widget-id="361844812036587520" width="600" height="250">Tweets by @LondonAir</a> <script> !function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + "://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } } (document, "script", "twitter-wjs"); </script> </div> </div> </div> <div class="col-xs-12 col-sm-4">   <div class="promo-tile"> <header> <h6>Our newsletter</h6> </header> <div class="promo-img"> <img src="/assets/img/promo/newsletter.jpg" src="/assets/img/promo/newsletter.jpg" class="img-responsive" /> <b>Privacy Notice Summary:</b> <br /> <ul> <li> <b>Who this is for: </b>You must be at least 13 years old to use this service. </li> <li> <b>What we collect: </b>We store your email address </li> <li> <b>Who we share it with: </b>We use "Campaign Monitor" to store it, and do not share it with anyone else. </li> <li> <b>More Info: </b>You can see our full privacy notice <a href="/LondonAir/PrivacyNotice.aspx" title="LAQN Privacy Notice">here</a> </li> </ul> <form action="http://email.londonair.org.uk/t/j/s/djitdk/" method="post" id="subForm"> <div class="input-group"> <input type="email" class="form-control" name="cm-djitdk-djitdk" id="djitdk-djitdk" placeholder="Your email..."> <span class="input-group-btn"> <button class="btn btn-primary" type="button">Subscribe</button> </span> </input> </div> </form> </div> <h3>AirMail newsletter </h3> <p> The latest news and research from ERG: <a href="/LondonAir/AirMail.aspx">View the archive</a> </p> </div> </div> <div class="col-xs-12 col-sm-4">  <div class="promo-tile"> <div class="promo-img"> <a href="/londonair/guide/home.aspx"> <header> <h6>Guide</h6> </header> <div class="promo-img"> <img src="/assets/img/promo/guide.jpg" alt="Go to guide" class="img-responsive" /> </div> <h3>Our Guide to Air Pollution, Health and Actions</h3> <p>We try to answer common questions about air pollution in London, and explain how our website can keep you informed.</p> </a> </div> </div> </div> </div> </div> </section>   <footer class="bg-ground breathe-3x"> <div class="container"> <div class="row col-gutter-vertical"> <div class="col-xs-6 col-sm-3"> <h3>Pollution</h3> <ul class="list-unstyled"> <li><a href="/LondonAir/nowcast.aspx">Air Pollution Now</a></li> <li><a href="/LondonAir/Forecast/">Forecast</a></li> <li><a href="/london/asp/annualmaps.asp">Annual Maps</a></li> <li><a href="/london/asp/futuremaps.asp">Future Maps</a></li> <li> <a href="https://londonair.org.uk/map-maker/" target="_blank">Create Pollution Map</a> </li> <li><a href="/london/asp/publicepisodes.asp?region=0">Episodes</a></li> </ul> </div> <div class="col-xs-6 col-sm-3"> <h3>Information</h3> <ul class="list-unstyled"> <li><a href="/LondonAir/General/about.aspx">About Londonair</a></li> <li> <a href="/LondonAir/Guide/FAQ.aspx">FAQ</a></li> <li><a href="/LondonAir/Guide/MyActionsForOthers.aspx">What can I do?</a></li> <li><a href="/LondonAir/guide/home.aspx">Air pollution guide</a></li> <li><a href="/LondonAir/General/research.aspx" title="Research">Research</a></li> <li><a href="/LondonAir/Guide/Soundslides/AllVideos.aspx">Videos</a></li> <li><a href="/LondonAir/general/news.aspx">News</a></li> <li><a href="/LondonAir/MediaCoverage/Default.aspx">Media Coverage</a></li> <li><a href="/london/asp/reports.asp">Reports</a></li> <li><a href="/london/asp/LAQNSeminar/">Conferences</a></li> <li><a href="http://email.londonair.org.uk/h/j/C181D943EF3ED945">Forecast Signup</a></li>  <li><a href="/LondonAir/guide/AirQualityBands.aspx">Air Quality Index</a></li> </ul> </div> <div class="col-xs-6 col-sm-3"> <h3>Monitoring</h3> <ul class="list-unstyled"> <li><a href="/london/asp/lahome.asp">Local Authorities</a></li> <li><a href="/london/asp/publicdetails.asp?region=0">Monitoring Sites</a></li> <li><a href="/london/asp/publicbulletin.asp">Latest Bulletin</a></li> <li><a href="/london/asp/publicstats.asp?region=0">Annual Limits</a></li> </ul> </div> <div class="col-xs-6 col-sm-3"> <h3>Tools</h3> <ul class="list-unstyled"> <li><a href="/LondonAir/MobileApps/">Apps & Widgets</a></li> <li><a href="/london/asp/datadownload.asp">Data Download</a></li> <li><a href="/london/asp/advgraphs.asp">Graph Plotting</a></li> <li><a href="/LondonAir/API/">Data Feeds</a></li> <li><a href="/london/asp/tools.asp">Statistics</a></li> <li><a href="http://davidcarslaw.github.io/openair/" target="_blank">Openair</a></li> </ul> </div> </div> </div> </footer>   <footer class="sub-footer bg-ground bg-push breathe"> <div class="container clearfix"> <small> <p class="pull-left"> © 2018 <a href="https://www.imperial.ac.uk/school-public-health/environmental-research-group" target="_blank">ERG, Imperial College London</a> </p> <ul class="list-inline pull-right"> <li> <a href="/london/asp/contact.asp">Contact</a> </li> <li> <a href="/london/asp/copyright.asp">About</a> </li> <li> <a href="/london/asp/accessibility.asp">Accessibility</a> </li> <li> <a href="/LondonAir/Cookie.aspx">Cookies</a> </li> <li> <a href="/LondonAir/privacynotice.aspx">Privacy Notice</a> </li> <li> <a href="/london/asp/sitemap.asp">Site Map</a> </li> </ul> </div> </small> </footer> <script src="/assets/js/enterKeySearchAddress.js"></script>  <script type="text/javascript" language="javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript" language="javascript"> try { var pageTracker = _gat._getTracker("UA-9887258-9"); pageTracker._trackPageview(); } catch(err) {}</script> </div> </body>   <script src="/assets/dist/jquery/jquery-2.2.2.min.js"></script>   <script type="text/javascript" src="/assets/dist/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="/assets/dist/fastclick/fastclick.js"></script> <script type="text/javascript" src="/assets/js/base.js"></script>  <div id="cookie-consent"> </div> <script src="/react/cookie-widget.js"></script> <script> CookieWidget.mount('cookie-consent'); </script> </html>

CINXE.COM

London Air Quality Network :: Welcome to the London Air Quality Network » Statistics Maps