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:56: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"> </head>  <body id="episodespage"> <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: Pollution Episodes "> <li>You are on this page: </li> <li>Pollution Episodes </li> </ul> </div> </div> </div>  <div id="mainContainermap" class="sfmainContainerMap bgd colscheme1"> <div class="container">  <div id="leftContentMap" class="col-sm-8 col-sm-8 col-md-8 col-xs-12"> <span class="contentbanner" title="LAQN Pollution Episodes" >LAQN Pollution Episodes</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> <br />  <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>  <br /> <label> Show WHO standards: <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> <div style="display: none;"> <div id="WhoStandardsTable" style="font-size: 0.9em;"> <table class="airpollutionindex" style="width: 800px !important;"> <tr> <th> </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 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) { console.log("called"); } // 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 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[-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("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"; } // 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: 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 = "&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 episodes species/closed & WHO bulletin // returns data object in callback // console.log("/london/asp/XML/EpisodeXml.asp?region=&episode=OzoneMidMay2024" + species + IncludeClosed + WhoBulletin); downloadUrl("/london/asp/XML/EpisodeXml.asp?region=&episode=OzoneMidMay2024" + 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))); // 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 ========================== //=========== 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 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 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 ============================ // 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 ================== // ======= 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(); // ========= 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 $.getJSON( '/assets/data/london-boroughs.json?v=1.3', 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); }; // === 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=peakvalues&site=&lat=51.4750&lon=-0.119824&Species=All&laEdge=&VenueCode=&zoom=9&WhoBulletin=" + WhoBulletin; NewURL = "/london/asp/publicepisodes.asp?region=0&bulletin=peakvalues&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 class="episodesmap"> <em>Peak air pollution levels recorded during episode</em> </p> <br /> <table id="keyaq" class="laqn-bolden-text">  <tr> <td><a href="airpollutionindex.asp?BulletinDate=19/05/2024" 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=19/05/2024" 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=19/05/2024" 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=19/05/2024" 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=19/05/2024" 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=19/05/2024" 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=19/05/2024" 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> <div id="rightContentMap" class="col-md-4 col-sm-4 col-xs-12 sidebar-right">  <table id="rightcolumn"> <tr> <td id="bulletintab"> <div id="bulletintabs2"> <ul> <li><a href="publicbulletin.asp?region=0&site=&bulletin=daily&la_id=&bulletindate=19/05/2024&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="1000">Bulletins</a></li> <li><a href="publicdetails.asp?region=0&site=&la_id=&postcode=&MapType=Google&VenueCode=" title="Details of continuous monitoring sites in London including location maps and photographs." tabindex="1001">Site Details</a></li> <li><a href="publicstats.asp?region=0&site=&la_id=&statyear=2024&postcode=&MapType=Google&VenueCode=" title="Comparison of results from each monitoring site to the Air Quality Strategy Objectives from 1993 onward." tabindex="1002">Statistics</a></li> <li class="selected" title="Details of major pollution episodes for your selected area, including peak values recorded, animation of hourly data and likely causes.">Pollution Episodes</li> </ul> </div> </td> </tr> <tr class="top"> <td id="maincontent">   <table id="episodes"> <tr> <td><strong>Episode</strong></td> <td><em>Moderate Ozone Mid May</em></td> </tr> <tr> <td><strong>Location</strong></td> <td><em>London</em></td> </tr> <tr> <td><strong>Pollutant(s)</strong></td> <td><em>Ozone</em></td> </tr> <tr> <td><strong>Dates</strong></td> <td><em>19/05/2024 to 20/05/2024</em></td> </tr> </table>  <input type="hidden" name="region" value="0" /> <input type="hidden" name="site" value="" /> <input type="hidden" name="postcode" value="" /> <input type="hidden" name="la_id" value="" /> <input type="hidden" name="level" value="All" /> <input type="hidden" name="bulletindate" value="19/05/2024" /> <input type="hidden" name="MapType" value="Google" /> <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="" /> <table id="episodesub"> <tr> <td colspan="2">This map shows the peak readings recorded across the region during the episode you have selected. Note that you can see each daily bulletin using the archive on the bulletin tab, and can also see animations and text explanations (if available) by selecting a different map view.</td> </tr> <tr> <td colspan="2" class="padding-top"> <label for="mapview">Change view:</label>  </td> </tr> <tr> <td colspan="2"> <select name="bulletin" title="Change map view" id="mapview" tabindex="15" style="width: 100%"> <option value="peakvalues" selected="selected" >peak values</option> <option value="explanation" >text explanation</option> <option value="peakvalues" >no animation available</option> </select> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="Go" class="btn btn-warning" title="Change map view" tabindex="15" /> </td> </tr> <tr> <td colspan="2"> <label for="pagetype"> <label for="episodeID">Change episode:</label> </label>  </td> </tr> <tr> <tr> <td colspan="2"> <select name="episodeID" id="episodeID" title="Change episode" class="episodes" tabindex="16"> <option value="" selected="selected">Choose episode ...</option> <option value="OzoneMidMay2024" selected="selected" >Moderate Ozone Mid May</option> <option value="OzoneEarlyMay2024" >Moderate Ozone Early May 2024</option> <option value="HighO3ModPMSep2023" >First ever DAQI High Ozone episode in September</option> <option value="ozonesept2023" >Moderate Ozone Sept 2023</option> <option value="PM10Feb2023" >Moderate PM10 7th and 8th Feb 2023</option> <option value="PMJAN22and23year2023" >Mod PM10 and PM2.5 Jan 2023</option> <option value="OzoneMidAug2022" >Widespread Moderate Ozone August 2022</option> <option value="OzoneMidJuly2022" >Widespread Ozone mid July 2022</option> <option value="ModOzoneJune22" >Moderate Ozone June 14th and 15th 2022</option> <option value="ModO303062022" >Moderate Ozone for London and the South East</option> <option value="HighPMMar2022" >High & Mod PM2.5 & PM10</option> <option value="mod03MayJune21" >Mod O3 end May to June 2021</option> <option value="modO3EarlyJune21" >Mod O3 end May to 4th June</option> <option value="modpm10pm25April21" >Mod PM10 PM2.5 mid April 2021</option> <option value="pm10highmodmarch21" >PM10 High and Mod March 2021</option> <option value="modhighbov2020" >Moderate and High PM10 PM2.5 Nov 2020</option> <option value="bonfirenight2020" >Guy Fawkes night 2020</option> <option value="ozonePM10PM25Sept2020" >Moderate O3, PM10 and PM2.5 September 2020</option> <option value="modPM10highOzoneAug20" >Ozone and PM10 Mid August 2020</option> <option value="modhighOzonePm1020" >Mod High O3 and Mod PM10 August 2020</option> <option value="o3pm10August2020" >O3 and PM10 August 2020</option> <option value="ozoneAugust2020" >O3 Mod and High August 2020</option> <option value="highozonejune2020" >Widespread O3 mod high June 2020</option> <option value="o3modmay2020" >O3 Moderate early May 2020</option> <option value="ModPM10PM25O3MidApril2020" >Moderate PM10, PM2.5 and O3 mid-April 2020</option> <option value="pm25ando3march20" >PM2.5 and O3 Moderate late March 2020</option> <option value="pm10pm25modjan2020" >PM10 and PM2.5 Mod Jan 2020</option> <option value="nye2019" >New Year Fireworks 2019</option> <option value="pol3to4Dec2019" >PM10 and NO2 Dec 2019</option> <option value="pm10pm25Diwali2019" >Diwali Fireworks 2019</option> <option value="modozoneAug2019" >Moderate Ozone 24th to 27th Aug 2019</option> <option value="modozonejuly19" >Moderate Ozone July 2019</option> <option value="highpm10pm25april25" >Mod High PM10 PM2.5 April 25 2019</option> <option value="pm10pm25modhighapril2019" >Mod High PM10 and PM2.5 15th - 22nd April 2019</option> <option value="pm10pm257april19" >Moderate PM10 and PM2.5 7th April 2019</option> <option value="pm10pm25modmarch2019" >Moderate PM10 and PM2.5 March 2019</option> <option value="pm10pm25feb2519" >Moderate PM10 and PM2.5 Particulate Feb 2019</option> <option value="pm10pm25Jan2019" >Moderate PM10 and PM2.5 Jan 2019</option> <option value="PM10PM25EndNovember2018" >PM10 and PM2.5 End November 2018</option> <option value="ozoneJune2018" >High ozone, June and July 2018</option> <option value="OzoneJuneJuly2018" >Prolonged Ozone episode summary 2018</option> <option value="PM10PM25earlyMay2018" >Moderate PM10 PM25 early May 2018</option> <option value="PM10PM25earlyMarch2018" >Moderate and high particle pollution March 2018</option> <option value="PM10lateFeb2018" >PM10 and PM2.5 Moderate late February 2018</option> <option value="GuyFawks2017" >Guy Fawkes 2017</option> <option value="PM10PM25endSept2017" >PM10, PM25 end September 2017</option> <option value="HighOzonemiddleJune2017" >High ozone middle June 2017</option> <option value="OzonemiddleJune2017" >Moderate Ozone June 2017</option> <option value="PM10PM25middleApril2017" >Moderate PM10 and PM2.5 April 2017</option> <option value="PM10PM25endMarch2017" >Moderate 27th and 28th March 2017</option> <option value="PM10PM25moderateFeb17" >PM10 and PM25 moderate middle Feb17</option> <option value="PM10middleJanuary2017" >PM10 mid January 2017</option> <option value="smogLateDecember2016" >Moderate PM10, PM2.5, NO2 late Dec 2016</option> <option value="PM10andNO2endNov" >PM10 and NO2 end November 2016</option> <option value="PM10PM25moderateOct16" >Moderate PM10 and PM25 Oct 2016</option> <option value="PM10endFeb2016" >Moderate PM10 end October 2016</option> <option value="ModerateOzoneSept2016" >Ozone Episode Mid September 2016</option> <option value="OzoneendAugust2016" >Ozone episode end August 2016</option> <option value="OzonelateJuly2016" >Ozone end July 2016</option> <option value="OzoneearlyMay2016" >Ozone, PM10 and PM2.5 early May 2016</option> <option value="PM10EndMarch2016" >PM10 end March 2016</option> <option value="PM10PM25MiddleMarch2016" >PM10, PM2.5 Middle March 2016</option> <option value="PM10PM25NO2MidJan2016" >Winter Smog Jan 2016</option> <option value="PM10endDec2015" >PM10 end December 2015</option> <option value="PM10middleDec2015" >PM10 mid December 2015</option> <option value="PM10PM25endOctober2015" >High PM10 and PM25 Oct - Nov 2015</option> <option value="NO2lateOctober2015" >Moderate Nitrogen Dioxide late October 2015</option> <option value="NO2earlyOctober2015" >Moderate Nitrogen Dioxide October 2015</option> <option value="PM10PM25earlyOctober2015" >Moderate PM10, PM2.5 Early October 2015</option> <option value="ModerateOzoneEarlyAugust2015" >Moderate Ozone Early August 2015</option> <option value="ModerateOzoneJune2015" >Widespread Moderate Ozone 2015</option> <option value="PM10PM25earlyApril2015" >PM10, PM25 Early April 2015</option> <option value="PM10PM25midMarch2015" >PM10 and PM2.5 middle of March 2015</option> <option value="PM10PM25middleFeb2015" >PM10, PM25 middle February 2015</option> <option value="PM10PM25endJan2015" >PM10, PM2.5 end January 2015</option> <option value="PM10PM25endNov2014" >PM10, PM2.5 end November 2014</option> <option value="PM10PM25lateNovember2014" >Moderate particulate late November 2014</option> <option value="PM10LateOctober2014" >PM10 particulate late October 2014</option> <option value="PM10PM25MidSept2014" >PM10 and PM2.5 Mid September 2014</option> <option value="PM10PM25EarlySept2014" >PM10 and PM2.5 Early September 2014</option> <option value="ozoneEarlyMay2014" >Moderate Ozone Early May 2014</option> <option value="PM10PM25LateApril2014" >Moderate O3, NO2, PM10 Late April 2014</option> <option value="PM10endApril2014" >Widespread Moderate PM10 April 2014</option> <option value="PM10PM25EarlyApril2014" >High PM10 and PM2.5 Early April 2014</option> <option value="PM10PM25LateMarch2014" >PM10 and PM2.5 Late March 2014</option> <option value="PM10midMarch2014" >PM10 and PM2.5 mid March 2014</option> <option value="PM10earlyMarch2014" >PM10 and PM2.5 early March 2014</option> <option value="PM10lendJanuary2014" >Moderate PM10 and NO2 January 2014</option> <option value="PM10midDec2013" >PM10, PM2.5 mid December 2013</option> <option value="modLateSept2013" >High Particulates Late Sept 2013</option> <option value="MixedSept2013" >Moderate O3, PM10 and NO2 Sept 2013</option> <option value="SmogLateAugust2013" >Moderate Ozone and PM10, late Aug 2013</option> <option value="OzoneJuly2013" >High ozone July 2013</option> <option value="O3earlyJuly2013" >Ozone episode July 2013</option> <option value="PM10earlyApril2013" >PM10 and PM2.5 early April 2013</option> <option value="O3endMarch2013" >Ozone episode Easter 2013</option> <option value="PM10lateMarch2013" >PM10, PM2.5 late March 2013</option> <option value="PM10earlyMarch2013" >PM10 and PM2.5 Early March 2013</option> <option value="PM10lendFebruary2013" >PM10, PM2.5 end of February 2013</option> <option value="PM10Feb152013" >PM10 and PM2.5 15-18 Feb 2013</option> <option value="PM10midFeb2013" >PM10 and PM2.5 Mid February 2013</option> <option value="PM10PM25NO2middleJan" >PM10, PM2.5 and NO2 mid January 2013</option> <option value="PM10midDec2012" >Wintertime Smog Mid December 2012</option> <option value="PM10middlenov2012" >PM10, PM2.5 Mid November 2012</option> <option value="PM10lateOctober2012" >High PM10 and PM2.5 late October 2012</option> <option value="ozoneearlyaugust2012" >Ozone early August 2012</option> <option value="ozonelatejuly2012" >High Ozone 24th July 2012</option> <option value="PM10midMay2012" >PM10 and Ozone Mid May 2012</option> <option value="PM10lateMarch2012" >PM10, PM2.5 Late March 2012</option> <option value="PM10midMarch2012" >PM10, PM2.5 Mid March 2012</option> <option value="PM10earlyMarch2012" >PM10, PM2.5 Early March 2012</option> <option value="PM10EarlyFeb2012" >PM10, PM2.5 Early February 2012</option> <option value="PM10lateJanuary2012" >PM10, PM2.5 Late January 2012</option> <option value="PM10midJanuary2012" >Winter smog mid January 2012</option> <option value="PM10middlenov2011" >Wintertime smog November 2011</option> <option value="pm10nov2011" >PM10 Nov 2011 (local and transboundary)</option> <option value="bonfire2011" >PM10 Nov 2011 (Guy Fawkes)</option> <option value="PM10Duwali2011" >PM10 Diwali October 2011</option> <option value="PM10endSept2011" >October 2011 - Ozone sets new record</option> <option value="PM10midApril2011" >Smog Mid April 2011</option> <option value="PM10endMarch2011" >PM10 End March 2011</option> <option value="PM10lateMarch2011" >PM10 late March 2011</option> <option value="PM10midMarch2011" >PM10 mid March 2011</option> <option value="PM10earlyMarch2011" >PM10 Early March 2011</option> <option value="PM10midFeb2011" >PM10 late February 2011</option> <option value="variedlateNov2010" >PM10 and NO2 mid November 2010</option> <option value="GuyFawkes2010" >Guy Fawkes and Diwali events 2010</option> <option value="variedearlyOctober2010" >PM10 October 2010</option> <option value="variedlateFeb2010" >PM10 February 2010</option> <option value="variedlateJan2010" >PM10 and NO2 January 2010</option> <option value="fireinpeckhamnov2009" >Large Fire in Peckham 26th Nov 2009</option> <option value="bonfire2009" >PM10 Nov 2009 (Guy Fawkes)</option> <option value="incident29June2009" >Moderate Ozone Late June and July 2009</option> <option value="varied5Jan2009" >PM10 particulate and NO2 Jan 2009</option> <option value="variedEarlyJan2009" >Calm Weather Smog Early Jan 2009</option> <option value="pm10Diwali" >Diwali and Guy Fawkes Oct 2008</option> <option value="NO2PM10Oct08" >Nitrogen dioxide and PM10 Oct 2008</option> <option value="variedlateApril2008" >Widespread moderate ozone April 2008</option> <option value="varied080218" >Calm Weather Smog Feb 2008</option> <option value="variedMidFeb2008" >Moderate PM10 and NO2 Mid Feb 2008</option> <option value="dustSaharaJan08" >Saharan Dust January 2008</option> <option value="variedlLateDec2007" >NO2 and PM10 late December 2007</option> <option value="variedlEarlyDec2007" >NO2 and PM10 early December 2007</option> <option value="pm10no2Nov2007" >PM10 and NO2 November 2007</option> <option value="bonfire051107" >PM10 Nov 2007 (Bonfire Night)</option> <option value="pm10mar2007" >PM10 March 2007</option> <option value="dustFeb2007" >Dust from road gritting February 2007</option> <option value="bonfire2006" >PM10 on Bonfire weekend 2006</option> <option value="pm10midOct2006" >PM10 mid October 2006</option> <option value="pm10midSep2006" >PM10 mid September 2006</option> <option value="variedLateJuly2006" >Ozone, PM10 and NO2, late July 2006</option> <option value="ozoneMidJuly2006" >ozone Mid July 2006</option> <option value="firesMidJuly2006" >Two large fires in London 2006</option> <option value="ozoneEarlyJuly2006" >Ozone Early July 2006</option> <option value="ozoneMidJune2006" >Ozone Mid June 2006</option> <option value="ozoneEarlyJune2006" >Ozone Early June 2006</option> <option value="ozoneEarlyMay2006" >Ozone Early May 2006</option> <option value="smogMidMar2006" >Calm Weather Smog March 2006</option> <option value="smogMidFeb2006" >Calm Weather Smog Mid Feb 2006</option> <option value="smogFeb2006" >Calm Weather Smog Early Feb 2006</option> <option value="pm10jan2006" >Calm Weather Smog Jan 2006</option> <option value="fireDec2005" >Buncefield Oil Fire, Dec 2005</option> <option value="variedlatenov2005" >Calm Weather Smog late November 2005</option> <option value="pm10nov2005" >PM10 Nov 2005 (Bonfire Night)</option> <option value="variedOct2005" >PM10 and SO2 October 2005</option> <option value="O3june2005" >Smog June 2005</option> <option value="O327may2005" >Ozone May 2005</option> <option value="varied08feb2005" >Calm Weather Smog Feb 2005</option> <option value="varied11dec2004" >Calm Weather Smog Early December 2004</option> <option value="varied30nov2004" >Calm Weather Smog Late Nov 2004</option> <option value="pm10nov2004" >PM10 Nov 2004 (Bonfire Night)</option> <option value="pm102003nov06" >PM10 Nov 2003 (Bonfire Night)</option> <option value="o32003aug06" >Ozone PM10 and SO2 Aug 2003</option> <option value="varied16Jul2003" >Ozone, PM10 and SO2 Jul 2003</option> <option value="varied15apr2003" >Easter Weekend Smog Apr 2003</option> <option value="varied17mar2003" >Prolonged Smog Late Mar 2003</option> <option value="pm10030226" >Calm weather smog Late Feb 2003</option> <option value="pm10so2030213" >Calm weather smog Early Feb 2003</option> <option value="pm10021105" >PM10 Nov 2002 (Bonfire Night)</option> <option value="pm10021002" >PM10 Oct 2002</option> <option value="o3020728" >Ozone July 2002</option> <option value="pm10020510" >Weekend PM10 May 2002</option> </select> </td> </tr> <tr> <tr> <td colspan="2"> <input type="submit" value="Go" class="btn btn-warning" title="Change episode" tabindex="17" /> </td> </tr> <tr> <tr> <td colspan="2">You can find out more information about levels recorded at each location (monitoring site) by clicking on its dot. Alternatively, select a different map view by using the drop down box below:</td> </tr> </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