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="17/02/2025 09:10:44" 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"> <link rel="alternate" type="application/rss+xml" title="LAQN Moderate" href="http://londonair.org.uk/london/rss/RssModerate.asp" /> </head> <body id="bulletinpage"> <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-none"> <h5 class="time">Tomorrow</h5> <p class="prediction"> <span>Issued by 1pm</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: Bulletin Maps "> <li>You are on this page: </li> <li>Bulletin Maps </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="LAQN Pollution Levels" >LAQN Pollution Levels</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 type="text/javascript" src="/LondonAir/Js/arcgislink.min.js"></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> <div class="clear"></div>  <label> Show WHO Guidelines (2005*): <a href="#WhoStandardsTable" id="ShowInfo" class="fancybox-link" title="World Health Organisation (WHO) Guidelines">(More Information)</a>  <input type="checkbox" id="WhoBulletin" unchecked class="checkbox" /></label> <br /> <i>*updated WHO 2021 standards coming soon</i> <br /> <div style="display: none;"> <div id="WhoStandardsTable" style="font-size: 0.9em;"> <table class="airpollutionindex" style="width: 800px !important;"> <tr> <th>2005 Guidelines</th> <th>Ozone</th> <th>Nitrogen Dioxide</th> <th colspan="2">Sulphur Dioxide</th> <th>PM2.5 Particles</th> <th>PM10 Particles</th> </tr> <tr> <td class="title">Period</td> <td>Running 8 hourly mean</td> <td>Hourly mean</td> <td>15 minute mean</td> <td>24 hour mean</td> <td>24 hour mean</td> <td>24 hour mean</td> </tr> <tr> <td class="title">Units</td> <td>µg m-3</td> <td>µg m-3</td> <td>µg m-3</td> <td>µg m-3</td> <td>µg m-3</td> <td>µg m-3</td> </tr> <tr> <td class="title">Exceedance point</td> <td>100</td> <td>200</td> <td>333</td> <td>20</td> <td>35</td> <td>50</td> </tr> <tr> <td colspan="7" class="padding-top small-text" style="text-align: left;">For pollutants with only daily limits (PM10, PM2.5, O3), we have used the same trigger system which is used to predict levels for the UK Daily Air Quality Index. The WHO SO2 Guideline is specified as a ten minute mean, but our instruments are set to take 15 minute measurements. We have converted the WHO 500 ug/m3 ten minute mean into the equivalent 366 ug/m3 15 minute mean, and are reporting to this in line with the recommendations of the UK Expert Committee on Air Quality Standards. Please note that the PM2.5 Guideline for the UK has been determined using the UK average PM2.5:PM10 ratio of 0.7, as per the WHO guidance, rather than the 'global' ratio of 0.5 which is indented for developing countries. For UK conditions this means that the daily WHO Guideline for PM2.5 is 35ug/m3. </td> </tr> </table> </div> </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 this console.log(9); 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"; // layerid 0 - satellite break; case "district_borough_unitary_region_LatLon_labels": LayerName = "Districts"; // layerid 1 - satellite / labels break; case "district_borough_unitary_region_LatLonDark": LayerName = "Boundaries (dark)"; // layerid 2 - roadmap and greyscales break; case "district_borough_unitary_region_LatLonDarkNames": LayerName = "Districts (dark)"; // layerid 3 - not used 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); // 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 // {"country":"POP_CNTRY>100000000","rivers":"NAME LIKE 'Amazon'"} // {"district_borough_unitary_region_LatLon""NAME LIKE 'Brent%'"} 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); // Air Quality Index -1 - closed var AQm2Icon = "/london/Images/NewIndex/AQ" + IconSize + "-2.png"; // Air Quality Index -1 - closed var AQm1Icon = "/london/Images/NewIndex/AQ" + IconSize + "-1.png"; // Air Quality Index 0 - NO DATA var AQ0Icon = "/london/Images/NewIndex/AQ" + IconSize + "0.png"; // Air Quality Index 1 var AQ1Icon = "/london/Images/NewIndex/AQ" + IconSize + "1.png"; // Air Quality Index 2 var AQ2Icon = "/london/Images/NewIndex/AQ" + IconSize + "2.png"; // Air Quality Index 3 var AQ3Icon = "/london/Images/NewIndex/AQ" + IconSize + "3.png"; // Air Quality Index 4 var AQ4Icon = "/london/Images/NewIndex/AQ" + IconSize + "4.png"; // Air Quality Index 5 var AQ5Icon = "/london/Images/NewIndex/AQ" + IconSize + "5.png"; // Air Quality Index 6 var AQ6Icon = "/london/Images/NewIndex/AQ" + IconSize + "6.png"; // Air Quality Index 7 var AQ7Icon = "/london/Images/NewIndex/AQ" + IconSize + "7.png"; // Air Quality Index 8 var AQ8Icon = "/london/Images/NewIndex/AQ" + IconSize + "8.png"; // Air Quality Index 9 var AQ9Icon = "/london/Images/NewIndex/AQ" + IconSize + "9.png"; // Air Quality Index 10 var AQ10Icon = "/london/Images/NewIndex/AQ" + IconSize + "10.png"; // Air Quality Index 1 T var AQ1IconT = "/london/Images/NewIndex/AQ" + IconSize + "1T.png"; // Air Quality Index 2 var AQ2IconT = "/london/Images/NewIndex/AQ" + IconSize + "2T.png"; // Air Quality Index 3 var AQ3IconT = "/london/Images/NewIndex/AQ" + IconSize + "3T.png"; // Air Quality Index 4 var AQ4IconT = "/london/Images/NewIndex/AQ" + IconSize + "4T.png"; // Air Quality Index 5 var AQ5IconT = "/london/Images/NewIndex/AQ" + IconSize + "5T.png"; // Air Quality Index 6 var AQ6IconT = "/london/Images/NewIndex/AQ" + IconSize + "6T.png"; // Air Quality Index 7 var AQ7IconT = "/london/Images/NewIndex/AQ" + IconSize + "7T.png"; // Air Quality Index 8 var AQ8IconT = "/london/Images/NewIndex/AQ" + IconSize + "8T.png"; // Air Quality Index 9 var AQ9IconT = "/london/Images/NewIndex/AQ" + IconSize + "9T.png"; // Air Quality Index 10 var AQ10IconT = "/london/Images/NewIndex/AQ" + IconSize + "10T.png"; // ======= WHO STANDARDS ICONS =================== // WHO Air Quality Index Meets var AQWHOMeets = "/london/Images/NewIndex/WHOMeets" + IconSize + ".png"; // WHO Air Quality Index Exceeds var AQWHOExceeds = "/london/Images/NewIndex/WHOExceeds" + IconSize + ".png"; // WHO Air Quality Index None var AQWHONone = "/london/Images/NewIndex/WHONone" + IconSize + ".png"; // WHO Air Quality Closed var AQWHOClosed = "/london/Images/NewIndex/WHOClosed" + IconSize + ".png"; // WHO Air Quality Index Meets - Predicted var AQWHOMeetsT = "/london/Images/NewIndex/WHOMeets" + IconSize + "T.png"; // WHO Air Quality Index Exceeds - Predicted var AQWHOExceedsT = "/london/Images/NewIndex/WHOExceeds" + IconSize + "T.png"; // WHO Air Quality Index None - Predicted var AQWHONoneT = "/london/Images/NewIndex/WHONone" + IconSize + ".png"; // WHO Air Quality Closed - Predicted var AQWHOClosedT = "/london/Images/NewIndex/WHOClosed" + IconSize + ".png"; // store icons in array - so we can access by index number var icons = []; icons[-2] = AQm2Icon; icons[-1] = AQm1Icon; icons[0] = AQ0Icon; icons[1] = AQ1Icon; icons[2] = AQ2Icon; icons[3] = AQ3Icon; icons[4] = AQ4Icon; icons[5] = AQ5Icon; icons[6] = AQ6Icon; icons[7] = AQ7Icon; icons[8] = AQ8Icon; icons[9] = AQ9Icon; icons[10] = AQ10Icon; icons[11] = AQ1IconT; icons[12] = AQ2IconT; icons[13] = AQ3IconT; icons[14] = AQ4IconT; icons[15] = AQ5IconT; icons[16] = AQ6IconT; icons[17] = AQ7IconT; icons[18] = AQ8IconT; icons[19] = AQ9IconT; icons[20] = AQ10IconT; // WHO index icons icons[21] = AQWHOMeets; icons[22] = AQWHOExceeds; icons[23] = AQWHONone; icons[24] = AQWHOClosed; icons[31] = AQWHOMeetsT; icons[32] = AQWHOExceedsT; icons[33] = AQWHONoneT; icons[34] = AQWHOClosedT; // 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) { var zindex = null; // WHO standards if (icontype >= 21 && icontype <= 34) { //alert(icontype); switch(icontype) { //AQWHOMeets case 21: zindex = icontype * 10; break; //AQWHOExceeds case 22: zindex = icontype * 20; break; //AQWHONone case 23: zindex = icontype * 10; break; //AQWHOClosed case 24: zindex = icontype * 10; break; //AQWHOMeetsT case 31: zindex = (icontype - 10) * 10 - 5; break; //AQWHOExceedsT case 32: zindex = (icontype - 20) * 20 - 5; break; //AQWHONoneT case 33: zindex = (icontype - 10) * 10 - 5; break; //AQWHOClosedT case 34: zindex = (icontype - 10) * 10 - 5; break; } } // reduce z-index for predicted else if (icontype > 10) { zindex = (icontype - 10) * 10 - 5; } // increase z-index for measurements else { 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) { //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("marker 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)" }; // ========= WHO standards level text ======== switch(icontype) { case 21: LevelText = "WHO Standard Met"; break; case 22: LevelText = "WHO Standard Exceeded"; break; case 23: LevelText = "WHO Standard Not Available"; break; case 24: LevelText = "Site Closed"; break; case 31: LevelText = "WHO Standard Met (predicted)"; break; case 32: LevelText = "WHO Standard Exceeded (predicted)"; break; case 33: LevelText = "WHO Standard Not Available"; break; case 34: LevelText = "Site Closed"; break; } // ================= 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(); // ===== WHO bulletin ============= var WhoBulletin = ""; // get checkbox var WhoBulletinCheckBox = document.getElementById("WhoBulletin"); // set querystring value if (WhoBulletinCheckBox.checked) { WhoBulletin = "&WhoBulletin=Y"; } else { WhoBulletin = "&WhoBulletin=N"; } // ======== 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"; } console.log(layerID); // 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 + "</strong> - <br />" + LevelText + "<br /><a href=" + html + "&la_id=&zoom=" + map.getZoom() + "&lat=" + center.lat() + "&lon=" + center.lng() + "&laEdge=" + laEdge + "&Species=" + document.getElementById("species").value + WhoBulletin + "&VenueCode=" + ">View monitoring data</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: getZIndex(100) }); infowindow.open(map,marker); //console.log("infowindow zindex=" + infowindow.getZIndex()); }); // =========== end marker click event listener ============ // set index of global markers array to current marker created // so we have a record of all markers/sites for the map 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 = "&species=" + speciesDropDown.options[speciesDropDown.selectedIndex].value; // if closed checked then add to querystring var closedSitesCheckBox = document.getElementById("IncludeClosedSites"); if (closedSitesCheckBox.checked) { IncludeClosed = "&IncClosed=Y"; } }; // if first load and species not All (default from ASP) if (reload == false && "All" != "All") { // add species to querystring - get value from ASP species = "&species=All" }; // ===== WHO bulletin ============= var WhoBulletin = ""; // get checkbox var WhoBulletinCheckBox = document.getElementById("WhoBulletin"); // set querystring value if (WhoBulletinCheckBox.checked) { WhoBulletin = "&WhoBulletin=Y"; } else { WhoBulletin = "&WhoBulletin=N"; } // ============ end URL querystring set up ======================= // ======================================== XML LOADING GOOGLE MAP API V3 ========================================================= // local JS callback function with querystring set with above variables for species/closed & WHO bulletin // returns data object in callback console.log("/london/asp/XML/BulletinXml.asp?bulletin=hourly&bulletindate=17/02/2025 07:00:00&region=" + species + IncludeClosed + WhoBulletin); downloadUrl("/london/asp/XML/BulletinXml.asp?bulletin=hourly&bulletindate=17/02/2025 07:00:00&region=" + species + IncludeClosed + WhoBulletin, 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))); // debug //console.log("lat =" + lat + " latoffset=" + latoffset + " lng =" + lng + " lngoffset=" + lonoffset +" factor=" + factor + " MaxZoomLevel=" + MaxZoomLevel + " GlobalZoom=" + 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 ============================ // convert to integer for DAQI icons var icontype = parseInt(markers[m].getAttribute("icontype")); // check WHO index icontype - convery to array index for new icons switch(icontype) { case "Meets": icontype = 21; break; case "Exceeds": icontype = 22; break; case "None": icontype = 23; break; case "Closed": icontype = 24; break; default: icontype = icontype; 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 //console.log("create marker for index = " + m); var marker = createMarker(point,label,html,icontype,site); //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 ========================== //=================== 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 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 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"); //=== REFRESH ICON TYPE CODE - NOT NEEDED AS WE NOW RECREATE WHOLE MARKER POSITION ================ //console.log("marker icon type=" + gmarkers[i].customInfo); // get current icon in loop //var icon = gmarkers[i].getIcon(); // get icon type from custom info //var icontype = gmarkers[i].customInfo; // current icon URL for marker //var iconURL = icon.url; //console.log(iconURL); //console.log(GetIconType(icontype)); // for current marker set icon using icontype - globalzoom + 11 shows large icon //gmarkers[i].setIcon //( // GetIconType(icontype) //); //=== END ICON CODE ================ // =========== set up icons ============================ // convert to integer for DAQI icons var icontype = parseInt(markers[m].getAttribute("icontype")); // check WHO index icontype - convery to array index for new icons switch(icontype) { case "Meets": icontype = 21; break; case "Exceeds": icontype = 22; break; case "None": icontype = 23; break; case "Closed": icontype = 24; break; default: icontype = icontype; 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 //console.log("create marker for index = " + m); var marker = createMarker(point,label,html,icontype,site); //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 ================== // ================= 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") != null) { // get map container DIV var CentralArea = document.getElementById("mainContainerMap"); if (CentralArea != null) { //console.log("Found central area") 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(); // ========= WHO bulletin passed as JS variable NOT ASP ===== var WhoBulletin = ""; // get checkbox WhoBulletinCheckBox = document.getElementById("WhoBulletin"); if (WhoBulletinCheckBox.checked) { WhoBulletin = "Y"; }; // 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 // load arcgis layers $.getJSON( '/assets/data/london-boroughs.json?v=1.71', function( data ) { // loadARCGIS(data); var laName = ''; var borough = _.filter(data, function(item) { return item.properties.LAD15NM.toLowerCase() == laName.toLowerCase(); }); console.log(borough); 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 ===== }); // ============ WHEN ZOOM PRESSED =============================== // // ============= 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); }; // === when WHO standards checked document.getElementById("WhoBulletin").onclick=function() { // close the window to stop IE null error if (infowindow) infowindow.close(); var WhoBulletin = ""; // get checkbox var WhoBulletinCheckBox = document.getElementById("WhoBulletin"); // get value from checkbox if (WhoBulletinCheckBox.checked) { WhoBulletin = "Y"; } else { WhoBulletin = "N"; } // will need to reload page to change inc files querystring etc var NewURL = ""; // create URL with parameters //NewURL = "/london/asp/publicbulletin.asp?region=0&bulletin=hourly&site=&lat=51.4750&lon=-0.119824&Species=All&laEdge=&VenueCode=&zoom=9&WhoBulletin=" + WhoBulletin; NewURL = "/london/asp/publicbulletin.asp?region=0&bulletin=hourly&site=&lat=51.4750&lon=-0.119824&Species=All&laEdge=&VenueCode=&zoom=9&WhoBulletin=" + WhoBulletin; // redirect with new url window.location = NewURL; }; // ============= 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> <p id="timestamp"> Air pollution levels for Monday 17 February 2025, 07:00-08:00GMT<br /> </p> <table id="keyaq" class="laqn-bolden-text">  <tr> <td><a href="airpollutionindex.asp?BulletinDate=17/02/2025 07:00:00" title="How is the Defra Air Pollution Index calculated?"><img src="/london/images/newindex/low.png" alt="Low (1-3)" title="Low (1-3)" /></a></td> <td><a href="airpollutionindex.asp?BulletinDate=17/02/2025 07:00:00" title="How is the Defra Air Pollution Index calculated?"><img src="/london/images/newindex/moderate.png" alt="Moderate (4-6)" title="Moderate (4-6)" /></a></td> <td><a href="airpollutionindex.asp?BulletinDate=17/02/2025 07:00:00" title="How is the Defra Air Pollution Index calculated?"><img src="/london/images/newindex/high.png" alt="High (7-9)" title="High (7-9)" /></a></td> <td><a href="airpollutionindex.asp?BulletinDate=17/02/2025 07:00:00" title="How is the Defra Air Pollution Index calculated?"><img src="/london/images/newindex/veryhigh.png" alt="Very High (10)" title="Very High (10)" /></a></td> <td><a href="airpollutionindex.asp?BulletinDate=17/02/2025 07:00:00" title="How is the Defra Air Pollution Index calculated?"><img src="/london/images/newindex/Predicted.png" alt="Predicted" title="Predicted" /></a></td> <td><a href="airpollutionindex.asp?BulletinDate=17/02/2025 07:00:00" title="How is the Defra Air Pollution Index calculated?"><img src="/london/images/newindex/AQsmall0.png" alt="No Index" title="No Index" /></a></td> <td><a href="airpollutionindex.asp?BulletinDate=17/02/2025 07:00:00" title="How is the Defra Air Pollution Index calculated?"><img src="/london/images/newindex/AQsmall-1.png" alt="Closed" title="Closed" /></a></td> </tr> <tr> <td style="font-size: 0.75em;">Low<br />(1-3)</td> <td style="font-size: 0.75em;">Moderate<br />(4-6)</td> <td style="font-size: 0.75em;">High<br />(7-9)</td> <td style="font-size: 0.75em;">Very High<br />(10)</td> <td style="font-size: 0.75em;">Predicted</td> <td style="font-size: 0.75em;">No Index</td> <td style="font-size: 0.75em;">Closed</td> </tr> </table> <div class="row">  <div class="col-md-8 col-xs-12"> <a href="airpollutionindex.asp?la_id=&region=0&bulletin=hourly&site=&bulletindate=17/02/2025 07:00:00&level=All&MapType=Google&VenueCode=" tabindex="71" title="How is the Defra Air Pollution Index calculated?" class="silver-button">How is the Air Pollution Index calculated?</a> </div>  <br class="visible-xs visible-sm" /> <br class="visible-xs visible-sm" /> <div class="col-md-4 col-xs-12"> </div> </div> <p> <a href="rss.asp?feed=mod" title="RSS: Subscribe to Moderate Bulletin" class="rss" tabindex="72"> <img src="/london/images/2010/rss.png" title="RSS: Subscribe to Moderate Bulletin" alt="RSS: Subscribe to Moderate Bulletin" class="rss" style="margin-top: 5px !important;" /></a> <a href="rss.asp?feed=mod" title="RSS: Subscribe to Moderate Bulletin" class="rss" tabindex="73">RSS: Subscribe to Moderate Bulletin</a> </p> </div> <div id="rightContentMap" class="col-sm-5">  <table id="rightcolumn"> <tr> <td id="bulletintab"> <div id="bulletintabs2"> <ul> <li title="Showing pollution levels throughout London updated each hour and day. You can also view details of monitoring in your area." class="selected">Bulletins</li> <li><a href="publicdetails.asp?region=0&site=&bulletin=hourly&la_id=&bulletindate=15/02/2025&postcode=&MapType=Google&VenueCode=" title="Details of continuous monitoring sites in London including location maps and photographs." tabindex="1000">Site Details</a></li> <li><a href="publicstats.asp?region=0&site=&bulletin=hourly&la_id=&statyear=2025&postcode=&MapType=Google&VenueCode=" title="Comparison of results from each monitoring site to the Air Quality Strategy Objectives from 1993 onward." tabindex="1001">Statistics</a></li> <li><a href="publicepisodes.asp?region=0&site=&bulletindate=15/02/2025&la_id=&postcode=&MapType=Google&VenueCode=" title="Details of major pollution episodes for your selected area, including peak values, animation of hourly data and likely causes." tabindex="1002">Pollution Episodes</a></li> </ul> </div> </td> </tr> <tr class="top"> <td id="maincontent" style="height: 257px;" >  <table>    <tr> <td>This map shows the daily air quality index from LAQN pollution analysers. Not all analysers on the network are contacted every hour, so some sites may show 'no data'. Data have undergone automatic validity checks.</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 its dot on the map. Once selected you can find out further information by clicking the 'Site Details' link above.<br /> <br /> Click the 'Statistics' link above to see results from this site compared to national limit values. Past pollution episodes can be seen by clicking on the 'Episodes' link. </td> </tr> <tr> <td> <br /> <a href="publicbulletin.asp?region=0&site=&bulletin=daily&la_id=&postcode=&level=All&MapType=Google&VenueCode=" title="Show latest daily bulletin (Saturday)" tabindex="10"> <strong>Show latest daily bulletin (Saturday)</strong> </a> <br /> <label for="bulletindate"> <strong>Change the bulletin date (dd/mm/yyyy):</strong></label> <input type="text" id="Text1" name="bulletindate" size="9" maxlength="15" value="15/02/2025" class="text" tabindex="11" /> <input type="hidden" name="region" value="0" /> <input type="hidden" name="bulletin" value="daily" /> <input type="hidden" name="site" value="" /> <input type="hidden" name="la_id" value="" /> <input type="hidden" name="postcode" value="" /> <input type="hidden" name="level" value="All" /> <input type="hidden" name="zoom" value="9" /> <input type="hidden" name="lat" value="51.4750" /> <input type="hidden" name="lon" value="-0.119824" /> <input type="hidden" name="VenueCode" value="" /> <input type="hidden" name="WhoBulletin" value="" /> <input type="submit" name="Submit" value="Go" id="submit1" title="Show bulletin data" tabindex="102" class="btn btn-warning" /> </td>  </table> </td> </tr>  </table>  </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>  <link rel="stylesheet" type="text/css" href="/LondonAir/App_Themes/jquery.fancybox.css" media="screen" /> <script type="text/javascript" language="javascript" src="/LondonAir/Js/jquery.fancybox.pack.js"></script>  <script type="text/javascript"> $(document).ready(function () { /*Note - ID's are meant for a SINGLE instance. If you want to use the same script for all your images/elements then use classes instead. Note - Galleries are created from elements who have the same "rel" tag You may want to set hideOnContentClick to false if you display iframed or inline content and it containts clickable elements (for example - play buttons for movies, links to other pages)*/ // set up WHO fancybox $('#ShowInfo').on("click", function () { $("#ShowInfo").fancybox({ helpers: { overlay: { locked: false } }, 'width': '50%', 'height': '100%', 'autoScale': false, 'transitionIn': 'none', 'transitionOut': 'none', //Forces content type. Can be set to 'image', 'ajax', 'iframe', 'swf' or 'inline' 'type': 'inline', 'scrolling': 'no', 'hideOnContentClick': false }); }); // set up index Health advice fancybox $("#ShowHealthInfo").fancybox({ 'width': '50%', 'height': '100%', 'autoScale': false, 'transitionIn': 'none', 'transitionOut': 'none', //Forces content type. Can be set to 'image', 'ajax', 'iframe', 'swf' or 'inline' 'type': 'inline', 'scrolling': 'no', 'hideOnContentClick': false }); }); </script> </html>

CINXE.COM

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