CINXE.COM
UK Soil Observatory
<!-- _ _ _ ______ ___ | | | | |/ / ___| / _ \ | | | | ' /\___ \| | | | | |_| | . \ ___) | |_| | \___/|_|\_|____/ \___/ United Kingdom Soil Observatory Author: British Geological Survey Date: July 2013 Modified: 2014/2015 (v2) Modified: 2015/2016 (v3) Modified: 2018/2019 (v4) --> <!DOCTYPE html> <html> <head> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-102191499-3"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-102191499-3'); </script> <meta charset="utf-8"> <meta name="description" content=""> <meta name="author" content=""> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="application-name" content="UKSO"> <meta name="apple-mobile-web-app-title" content="UKSO"> <meta name="msapplication-starturl" content="/index.html"> <!--<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">--> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" /> <!-- PWAs requirements/good practice--> <link rel="manifest" href="manifest.json"> <meta name="theme-color" content="#1976d2"> <link rel="apple-touch-icon" href="img/pwa/ukso_64.png"> <!--320--> <title>UK Soil Observatory</title> <!--FACICON --> <link rel="icon" href="favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <!--CSS STYLESHEETS--> <link href="css/style.css" id="stylesheet" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="https://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css" /> <!-- Version 3.6 needed as 3.7/3.8 breaks mobile onClick--> <!-- <link rel="stylesheet" href="https://js.arcgis.com/3.6/js/esri/css/esri.css" /> --> <link rel="stylesheet" href="https://js.arcgis.com/3.6/js/dojo/dojox/widget/Dialog/Dialog.css" /> <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css"> <link href="boostraptour/css/bootstrap-tour-standalone.min.css" rel="stylesheet"> <!--SERVICE WORKER--> <script type="text/javascript" src="js/service-worker-register.js" language="javascript"></script> <!--API JAVASCRIPT FILES--> <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script> <script type="text/javascript"> // Convert specially decorated nodes in the DOM into Dijits (data-dojo-type DOM attributes) var djConfig = { parseOnLoad: true } </script> <script src="https://js.arcgis.com/4.9/"></script> <!--MASTER JAVASCRIPT FILE--> <script type="text/javascript" src="js/ukso.js" language="javascript"></script> <!--EXTERNAL LIBRARIES JAVASCRIPT FILES--> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.form.js" language="javascript"></script> <script type="text/javascript" src="js/modernizr.js"></script> <script src="boostraptour/js/bootstrap-tour-standalone.min.js"></script> <script language="javascript" src="js/geotools.js"></script> <!--ADDITIONAL FUNCTIONALITY JAVASCRIPT FILES--> <script type="text/javascript" src="js/geolocation.js" language="javascript"></script> <script type="text/javascript" src="js/mysoil.js" language="javascript"></script> <script type="text/javascript" src="js/layerscontrol.js" language="javascript"></script> <script type="text/javascript" src="js/identify.js" language="javascript"></script> <script type="text/javascript" src="js/mlayerscontrol.js" language="javascript"></script> <script type="text/javascript" src="js/print.js" language="javascript"></script> <script type="text/javascript" src="js/validateLCM.js" language="javascript"></script> <!--CODE WHICH NEEDS TO BE RUN FROM THE HTML FILE--> <script type="text/javascript"> $(document).ready(function () { var options = { target: '#output', // target element(s) to be updated with server response error: showResponse // As using iframe any response comes back as an error despite being successful post }; $('#mySoilForm').on('submit', function (e) { e.preventDefault(); // <-- important to stop the form from sending and reloading the page. $(this).ajaxSubmit(options); if (identifyDesktop == false) { showNotification("positive", "Thank you for submitting a new record.") } else { mySoilSubmissionDialog.set("title", "Submission Status"); mySoilSubmissionDialog.set("content", "<p>Thank you for submitting a new record to the mySoil database.</p><p>The record will be validated by the British Geological Survey and will be made live as soon as possible.</p>"); mySoilSubmissionDialog.show(); } mySoilSubmitDialog.hide(); }); }); </script> <!--[if lt IE 9]> <style> .mapLayers_ActiveLayer{ height: auto; } #hideQuickHelp { left: 108px; } </style> <script> // Overwritten method function animateAddLayer(layerId){ //Do not animate } </script> <![endif]--> </head> <body id="UKSO_body" class="claro"> <div id="splash"> <div class="splashLoading"> </div> </div> <div id="borderContainer" dojotype="dijit/layout/BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; overflow: hidden;"> <div dojotype="dijit/layout/ContentPane" region="center" splitter="false" style="padding: 0px; height: 100%; width: 100%; overflow: hidden;"> <div id="sceneviewDiv" style="padding: 0px; height: 100%; width: 100%; display: none;"> </div> <div id="mapviewDiv" style="padding: 0px; height: 100%; width: 100%;"> </div> <div id="HeaderBarMobile"> <div class="headerLogo">UKSO</div> </div> <div id="mobileSpinnerDiv" style="display: none"> <img src="img/svg/mLoader.svg" class="spin" /> </div> <div id="HeaderBarDesktop" class="headerBarDesktop-expanded"> <div class="headerLogo"></div> <div id="locationSearch" class="locationSearch"> <div class="locationSearchIcon" onclick="submitLocation();"></div> <input type="text" class="locationSearchTbox" id="locationTbox" maxlength="30" placeholder="Enter location" /> <div class="locationResetIcon"></div> <div class="locationInfoIcon"></div> </div> <div class="locationSearchExamples"> ⚬ <b>Place Name</b>: Keyworth<br> ⚬ <b>Postcode</b>: NG12 5GG<br> ⚬ <b>Easting, Northing</b>: 462149, 331698<br> ⚬ <b>Lon-Lat</b>: -1.076419, 52.878835<br> ⚬ <b><a href="https://magic.defra.gov.uk/Help_iacs.htm" target="_blank">IACS</a></b>: SK 6231 1469<br> </div> <!-- <div id="helpDiv" onclick="helpDlg.show();"> <span style="font-size:18px;"> Help </span> </div> --> <!-- <div id="helpCurtain"></div> --> <div id="hideQuickHelp" title="Hide/Show tips" class="doubleArrowBtn hideQuickHelp-expanded"></div> <div id="helpDiv" title="Show Help" class="doubleArrowBtn helpDiv-expanded" onclick="showDesktopHelp();"></div> </div> <div id="topBorder"></div> <div id="bottomBorder"></div> <div id="bottomActionBar"> <div id="hideBtns" class="doubleArrowBtn" title="Hide/Show buttons"></div> <div id="contributeDlg" data-dojo-type="dojox/widget/Dialog" dimensions="[370,305]" draggable="false"> <div id="contributeDialogTitle" class="uksoDialogTitle"> Contribute your soil information </div> <div id="ContributeDiv"> <div id="contributeMain"> <div class="contributeContentSection"> <div style="text-align: center"> <div class="contributeContentSectionTitle"> myLandcover </div> <p>Use Aerial Photography background and local knowledge to validate the CEH Land cover map 2015</p> <button class="contributeButton contributeButtonAdd" onclick="ValidateContentOverviewDialog.show();" type="button"> Add Land Cover Record </button> <button class="contributeButton contributeButtonShow" onclick="showCrowdsourcedLandCoverData();" type="button"> Show Land Cover Records </button> </div> </div> <br /> <div class="contributeContentSection"> <div style="text-align: center"> <div class="contributeContentSectionTitle"> mySoil </div> <p>Submit new information about your soil</p> <button type="button" class="contributeButton contributeButtonAdd" onclick="drawing = false; AddContentOverviewDialog.show(); registryG.byId('contributeDlg').hide();"> Add Soil Record </button> <button class="contributeButton contributeButtonShow" onclick="showCrowdsourcedSoilData();" type="button"> Show Soil Records </button> </div> </div> </div> <div data-dojo-type="dijit/Dialog" data-dojo-id="AddContentOverviewDialog" title="Add Content" style="font-size: 14px;"> <div class="addRecordTextContent"> <p>Share information about the soil in your area with other users and help us to improve our soil map of the UK.</p> <p>Let's put citizen science into action and build up a community soils dataset produced by you - the users.</p> <p>All information submitted is anonymous and will be published within this application under the <a href='https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/' target="_blank">Open Government License</a>.</p> <p>By clicking the button below you are agreeing to the <a href='termsOfUse.html' target="_blank">terms of use</a>.</p> <div style="text-align: center"> <input type="button" value="Continue" class="submitButton" onclick="AddContentOverviewDialog.hide();closeMFullPanel();mySoilSubmitDialog.show();" /> </div> </div> </div> <div data-dojo-type="dijit/Dialog" data-dojo-id="ValidateContentOverviewDialog" title="Validate CEH Land Cover Map 2015" style="font-size: 14px;"> <div class="valTextContent"> <p>Land cover map is widely used for decision making in the UK, it is compiled from satellite data but needs ground truth. Please help to validate the CEH Land Cover Map 2015 in order to improve the accuracy of this dataset.</p> <p>Using the imagery backdrops in UKSO or your local knowledge, tell us whether or not we have correctly identified the land cover type. If you are at the location, please send us a photograph.</p> <p>All information submitted is anonymous and will be published within this application under the <a href='https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/' target="_blank">Open Government License</a>.</p> <p>By clicking the 'Continue' button below you are agreeing to the <a href='http://www.ukso.org' target="_blank">terms of use for crowdsourced data</a>.</p> <div style="text-align: center"> <table> <tbody> <tr> <td> <input type="button" value="Continue" class="submitButton" onclick="ValidateContentOverviewDialog.hide();validateLCMData();valStepsDlg.show();domG.byId('validationLegalStuff').style.display = 'none';" /> <input type="button" value="Cancel" class="cancelButton" onclick="ValidateContentOverviewDialog.hide(); " /> </td> </tr> </tbody> </table> </div> </div> </div> <div data-dojo-type="dijit/Dialog" data-dojo-id="valStepsDlg" title="Validate CEH Land Cover Map 2015" style="font-size: 14px;" class="nonModal"> <div class='valStepsContent'> <ol> <li>The <b>Land Cover Map 2015 layer has been added to the map</b> (if it wasn't already there) and the 'Imagery' basemap has been selected, you can use other basemaps e.g. street map to find your town.</li> <li><b>Zoom in to an area</b> you wish to validate. You can also <b>enter a placename or postcode</b> on the location textbox at the top-left of the screen. Remember to open up the legend <img style="top:3px;position:relative;" src="img/layers_control/legend.png" /> on the upper tool bar.</li> <li>Click anywhere on the map to <b>get the land cover value</b> for that location or check the layer's legend.</li> <li>Press, <span style="color: #1d6fa5;font-weight: bold;">'is this Land Cover Type correct?'</span> to bring up <b>data entry window</b>, move to the side and keep open.</li> <li>Change the <b>transparency</b> using the slider to compare layer against aerial photography background.</li> <li>Please confirm if the land cover is correct or incorrect. If you think the land cover type is incorrect, let us know what you think it is. </li> <li>For <b>multiple submissions</b>, keep the validation form open, moving it to one side, and click on a new map location after every submission.</li> </ol> <!-- <div style="text-align: center"> <a href="docs/Land_cover_pdf_instructions.pdf" target="_blank" style="text-decoration: none;"><img style="top:3px;position:relative;" src="img/layers_control/download.png"/> Detailed instructions in PDF</a> </div> --> <br /> <div style="text-align: center"> <input type="button" value="OK" class="submitButton" onclick="valStepsDlg.hide();" /> </div> <br> </div> </div> <div data-dojo-type="dijit/Dialog" data-dojo-id="mySoilSubmitDialog" title="Submit a record to mySoil" style="font-size: 12px;width:250"> <div class="dijitDialogPaneContentArea"> <form id="mySoilForm" action="../proxy.ashx?http://transfer.bgs.ac.uk/mysoil/soilReport.cfc" method="post" enctype="multipart/form-data"> <input type="hidden" name="method" value="save" /> <input type="hidden" name="format" value="json" /> <input type="hidden" name="xa" value="100" /> <input type="hidden" name="ya" value="100" /> <table> <tbody> <tr> <td></td> <td> <label for="description"> Description: </label> <input data-dojo-type="dijit/form/TextBox" type="text" name="description" id="description" data-required="true" tabindex="1" required /> </td> </tr> <tr> <td></td> <td> <label for="latitude"> Latitude: </label> <input data-dojo-type="dijit/form/TextBox" type="text" name="y" id="latitude" data-dojo-props="placeHolder: 'e.g. 52.879173'" data-required="true" tabindex="2" required /> </td> </tr> <tr> <td></td> <td> <label for="longitude"> Longitude: </label> <input data-dojo-type="dijit/form/TextBox" type="text" name="x" id="longitude" data-dojo-props="placeHolder: 'e.g. -1.077830'" data-required="true" tabindex="3" required /> </td> </tr> <tr> <td></td> <td> <span class="smallDialogIcon"> <!--<button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'btnGPSSmallIcon', showLabel: false" onclick="getCurrentCoordinates();" type="button"> Get my location </button>--> <button data-dojo-type="dijit/form/Button" onclick="getCurrentCoordinates();" type="button"> Get my location </button> <button dojotype="dijit/form/Button" id="identifyMySoilLocationDrawPoint" onclick="addRecordIdentifyPoint();"> Select Point </button> </span> </td> </tr> <tr> <td></td> <td> <label for="acidity"> Acidity: </label> <select id="acidity" name="aciditycode" width="164" style="width: 164px;" tabindex="4" required> <option value="?" selected>Not entered </option> <option value="AC3">Highly Acidic (pH < 5)</option> <option value="AC2">Moderately Acidic (pH 5 - 6)</option> <option value="AC1">Slightly Acidic (pH 6 - 6.5)</option> <option value="NEU">Neutral (pH 6.5 - 7.2) </option> <option value="AL1">Slightly Alkaline (pH 7.2 - 7.5) </option> <option value="AL2">Moderately Alkaline (pH 7.5 - 8)</option> <option value="AL3">Highly Alkaline (pH > 8)</option> </select> <span onclick="dijit.byId('AcidityHelp').show();"> <img src="img/layers_control/info.png" /> </span> </td> </tr> <tr> <td></td> <td> <label for="soilType"> Soil Texture: </label> <select id="soilType" name="soiltypecode" width="164" style="width: 164px;" tabindex="5" required> <option value="?" selected>Not entered </option> <option value="CHK">Chalky soil </option> <option value="CLY">Clay soil </option> <option value="LOM">Loamy soil </option> <option value="PTY">Peaty soil </option> <option value="SND">Sandy soil </option> <option value="SLT">Silty soil </option> </select> <span onclick="dijit.byId('SoilTypeHelp').show();"><img src="img/layers_control/info.png" /></span> </td> </tr> <tr> <td></td> <td> <label for="imageUpload"> Photograph: </label> <input type="file" accept="image/*" capture="camera" tabindex="6" id="imageUpload" name="filecontents" size="10" /> </td> </tr> <tr> <td></td> <td> <input type="submit" id="submitID" value="Submit" tabindex="7" class="submitButton" onclick="drawing = false;" /> <input type="button" name="cancel" value="Cancel" class="cancelButton" tabindex="8" onclick="drawing = false; mySoilSubmitDialog.hide();" /> </td> </tr> </tbody> </table> <div data-dojo-type="dijit/Dialog" id="AcidityHelp" title="Acidity Help" style="font-size: 10pt"> <div><b>pH</b> <p>Testing the pH of your soil is fairly easy to do. It does require a simple kit that you can buy from hardware stores or garden centres. Each kit will come with its own instructions that will guide you through the process of sampling and testing.</p> <p>Your testing kit will tell you a pH on a scale from 1 (very strongly acidic) to 14 (very strongly alkaline). Most soils fall in the pH range 3 to 9. Choose the closest value from our pH ranges that matches the value shown by your kit.</p> <p>Don't worry if the wording doesn't match exactly, use the pH value to find the closest match, i.e. if your kit identifies your soil as pH 7, then choose the Neutral (6.5 – 7.2) category.</p> </div> </div> <div data-dojo-type="dijit/Dialog" id="SoilTypeHelp" title="Soil Texture Help" style="font-size: 10pt"> <div><b>Soil Texture</b> <p>Traditionally, soil scientists use several field and laboratory-based techniques to identify soil texture including sieving, sedimentation and laser granulometry. There are international standards for describing soil textures in terms of their clay, silt and sand content. However, for mySoil, we have some simple tips to help you identify your soil from the six classes we use in the app.</p> <ul> <li><strong>Chalky soil</strong> can be clayey or sandy, but is notable for the many fragments chalk or limestone that it contains. If testing for pH, chalky soils tend to be alkaline with moderately high pH (8+).</li> <li><strong>Sandy soil</strong> feels gritty to touch, It will not hold its shape when squeezed into a ball because it crumbles easily, so it is easy to dig and work. It drains very well and can dry out quickly.</li> <li><strong>Loamy soil</strong> is often the preferred soil type. It is made up of a roughly equally mixture of clay, silt and sand. Loamy soils hold together when squeezed into a ball. they do not feel sticky or gritty. They are easily dug, retain moisture and are nutrient rich.</li> <li><strong>Silty soil</strong> feels smooth to the touch, but not sticky and can be rolled or molded into a thin sausage-shape easily. </li> <li><strong>Clay soil</strong> feels smooth AND sticky to the touch. It can be molded into any shape and leaves smears of clay when rubbed between your fingers. Very heavy to dig and work, clayey soils can dry out in hot weather and form deep cracks.</li> <li><strong>Peaty soil</strong> contains a lot of organic matter and is very dark in colour. It feels spongy when squeezed but crunbles apart. It can absorb a lot of water but dry out quite quickly. If you have a pH testing kit it will have a low pH (i.e. Acidic).</li> </ul> <p>The following chart describes how you can estimate your soil-type by trying to mold a small sample of it into different shapes.</p><img src="img/soiltexture.png" /> </div> </div> </form> </div> </div> </div> </div> <!-- <div id="ddTwo"> <span class="ddButtons lddButtons"> <button id="myContributeButton" data-dojo-type="dijit/form/Button" onclick="showContribute();" type="button"> Contribute </button> </span> </div> --> <div id="ddThree"> <span class="ddButtons rddButtons"> <button id="myToggleButton" data-dojo-type="dijit/form/Button" onclick="toggle();" type="button"> Mobile </button> </span> </div> <div id="basemapDlg" data-dojo-type="dojox/widget/Dialog" dimensions="[300,400]" draggable="false"> <div id="basemapDialogTitle" class="uksoDialogTitle"> Click on thumbnail to change basemap </div> <div id="baseMapGalleryDiv"></div> </div> <div id="ddFive"> <span class="ddButtons lddButtons"> <button data-dojo-type="dijit/form/Button" onclick="showBasemaps();" type="button"> Basemaps </button> </span> </div> <div id="printDlg" data-dojo-type="dojox/widget/Dialog" dimensions="[320,325]" draggable="false"> <div id="printDialogTitle" class="uksoDialogTitle"> Export map as PDF or PNG </div> <div id="printDiv"> <table style="width:100%;"> <tbody> <tr> <td> Generage a PDF of the map including title and legend. Note that it will always export a 2D version of the map, even in 3D mode. <br><br> <div style="text-align: center;"> <input data-dojo-type="dijit/form/TextBox" type="text" placeholder="Type your map title (optional)" name="mapname" id="printMapname" maxlength=23 tabindex="1" /> <br> <input type="button" name="printID" value="Generate PDF (2D only)" tabindex="2" class="printButton submitButton" onclick="printGo();" /> </div> </td> </tr> <tr> <td> Create a screen capture of the map without the UI elements and save it as PNG. <br><br> <div style="text-align: center;"> <input type="button" name="screenShotID" value="Take screenshot as PNG" tabindex="3" class="printButton submitButton" onclick="screenshotGo();" /> </div> </td> </tr> <tr> <td> <div style="text-align: center;"> <input type="button" name="cancel" value="Cancel" tabindex="4" class="cancelButton" onclick="resetPrint();" /> </div> </td> </tr> </tbody> </table> </div> <div id="printGen" style="display: none;"> <div id="PrintWait" style="display: none"> <img src="img/layers_control/mini_ajax_loader.gif" /> Generating export... </div> <form id="PDFForm" action="../ukso_layers_webservice/Service.asmx/GeneratePDF" target="_blank" method="POST" style="display: none"> <textarea name="mapurl" id="mapurl" style="display: none;"></textarea> <textarea name="legendurls" id="legendurls" style="display: none;"></textarea> PDF creation complete <br /><br /> <input type="submit" class="submitButton" onclick="resetPrint();" value="Open PDF" tabindex="1"> <input type="button" name="cancel" value="Cancel" class="cancelButton" tabindex="2" onclick="resetPrint();" /> </form> </div> </div> <div id="ddSix"> <span class="ddButtons"> <button id="myPrintButton" data-dojo-type="dijit/form/Button" onclick="showPrint();" type="button"> Export Map </button> </span> </div> <div id="ddSeven"> <span class="ddButtons"> <button id="myShareButton" data-dojo-type="dijit/form/Button" onclick="bookmarkShareMap(false);" type="button"> Bookmark/Share </button> </span> </div> </div> <div id="screenshotDiv" class="hide"> <img class="js-screenshot-image"> <br> <button id="downloadBtn" class="action-button" aria-label="Download image" title="Download image" onClick="downloadScreenshot();">Download image</button> <button id="closeBtn" class="action-button" aria-label="Back to webscene" title="Cancel" onClick="cancelScreenshot();">Cancel</button> </div> <div id="mobileLocationSearchBar"> <div id='locationSearchMobile' class="locationSearch"> <div class="locationSearchIcon" onclick="submitLocation();"></div> <input type="text" class="locationSearchTbox" id="locationMobileTbox" maxlength="30" placeholder="Enter location" /> <div class="locationResetIcon"></div> </div> </div> <!-- View mode toggle buttons --> <div id="2D-btn" onclick="toggle3DMode()" style="border-radius: 50%;" class="esri-component esri-widget--button esri-widget esri-interactive" role="button" tabindex="0" aria-label="Toggle 3D mode" title="Toggle view mode (2D/3D)"> <span id="3D-btn-txt" aria-hidden="true">3D</span> <span class="esri-icon-font-fallback-text"> Toggle view mode </span> </div> <div id="3D-btn" onclick="toggle3DMode()" style="border-radius: 50%;" class="esri-component esri-widget--button esri-widget esri-interactive" role="button" tabindex="0" aria-label="Toggle 3D mode" title="Toggle view mode (2D/3D)"> <span id="3D-btn-txt" aria-hidden="true">2D</span> <span class="esri-icon-font-fallback-text"> Toggle view mode </span> </div> <!--Layers Control--> <div id="mapLayersContainer"> <div id="mapLayersTitle"> Map Layers <span class="mapLayersTitleButton"> <div id="hideMapLayersItemsBtnDiv"> <button id="hideMapLayersItemsBtn" data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'hideMapLayersItemsUp', showLabel: false" type="button"> Hide/show layer items </button> </div> </span> <span class="mapLayersTitleButton"> <div id="addLayersBtnDiv"> <button id="addLayersBtn" data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'addLayersIcon', showLabel: false, disabled: true" type="button"> Add Layers </button> </div> </span> </div> <div id="mapLayersItems"> <div id="pointLayers"> </div> <div id="rasterLayers"> </div> <div id="OSLayers"> </div> <span id='noLayers' style="font-size: 11px; text-align: center;"> <img src="img/layers_control/mini_ajax_loader.gif" style="position: relative; top: 4px;" /> Loading layers... </span> </div> </div> <!--Buttons for smartphones--> <div id="btnHelp"> <span class="ddMobileButtons"> <!-- CHANGE MY URL BEFORE LAUNCH OTHERWISE THE SONG WILL BE STUCK IN YOUR HEAD FOR EVER --> <button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'btnHelpIcon', showLabel: false" onclick="mShowMobileHelp();" type="button"> Help </button> </span> </div> <div id="activeMobileLayer" style="display:none;"> <table id='activeMobileLayerTable'> <tbody> <tr> <td id='activeMobileLayerTickTd' rowspan="2" onclick='mLayerHideShow();'> <div id='activeMobileLayerTickDiv'> <img id='activeMobileLayerTickImg' src='img/svg/mTicked.svg' style='height:26px;width:26px;' /> </div> </td> <td id="activeMobileLayerNameTd"> <span id="activeMobileLayerName"> Layer Name </span> </td> <td id='activeMobileLayerLegend' rowspan="2" onclick='mShowLayerLegend();'> <div id='activeMobileLayerLegendDiv'> <img id='activeMobileLayerLegendImg' src='img/svg/mLegend.svg' style='height:26px;width:26px;' /> </div> </td> <td id='activeMobileLayerInfo' rowspan="2" onclick='mShowLayerInfo();'> <div id='activeMobileLayerInfoDiv'> <img id='activeMobileLayerInfoImg' src='img/svg/mInfo.svg' style='height:26px;width:26px;' /> </div> </td> </tr> <tr> <td style="text-align: center;"> <div id="mGeneralisedScaleNotification" onclick='mActiveLayerNotificationAction("zoomin")' class='mActiveLayerNotification'> Zoom In to higher resolution</div> <div id="mLayerExtentNotification" onclick='mActiveLayerNotificationAction("zoomto")' class='mActiveLayerNotification'>Zoom to layer extent</div> <div id="mScaleDependencyNotification" onclick='mActiveLayerNotificationAction("zoomtoscale")' class='mActiveLayerNotification'>Zoom to visible scale</div> </td> </tr> </tbody> </table> </div> <div id="footerBar"> <table id="footerBarTable"> <tbody> <tr> <!-- <td id="btnCrowdsourcing" class="footerBarTd"> <span class="ddMobileButtons"> <button id="mobileButtonCrowdsourcing" data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'btnCrowdIcon', showLabel: false" type="button" onclick="mShowContribute();"> Crowdsourcing </button> </span> </td> --> <td id="btnLayers" class="footerBarTd"> <span class="ddMobileButtons"> <button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'btnLayersIcon', showLabel: false" type="button" onclick="mShowMapLayers();"> Map Layers </button> </span> </td> <td id="mBtnShare" class="footerBarTd"> <span class="ddMobileButtons"> <button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'btnShareIcon', showLabel: false" type="button" onclick="mShowBookmarkShare();"> Share </button> </span> </td> <td id="btnGPS" class="footerBarTd"> <span class="ddMobileButtons"> <button id="mobileButtonLocation" data-dojo-type="dijit/form/ToggleButton" data-dojo-props="iconClass:'btnGPSIcon', showLabel: false" type="button" onclick="zoomToUserLocation();"> Location </button> </span> </td> <td id="btnSwitch" class="footerBarTd"> <span class="ddMobileButtons"> <button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'btnSwitchIcon', showLabel: false" onclick="toggle();" type="button"> Switch Version </button> </span> </td> </tr> </tbody> </table> </div> <div id="mFullPanel"> </div> <div id="mSmallPanel" style="display:none;"> <div style="text-align: center"> <div id="mCloseSmallPanelBtn"><a href="javascript:void(0)" onclick="closeMSmallPanel();"><img src="img/svg/down_blue.svg"></a></div> </div> <div id="mSmallPanelContent"> <div id="mResultsDiv"> </div> </div> </div> <div id="SelectionWait" style="visibility: hidden; position: absolute; top: 49%; left: 49%; z-index: 5000;"> </div> <div id="output1" name="output1" style="display:none;"> </div> </div> </div> <div id="mobileNotifications"> </div> <!-- <iframe style="width:200px;height:200px;position:absolute;top:0px;left:0px;z-index:9999999;" name="my_iframe" id="my_iframe" src="not_submitted_yet.aspx"></iframe> --> </body> </html>