CINXE.COM
Magic Map Application
<!DOCTYPE html> <html > <head id="Head1"> <!-- MAGIC Google tag (gtag.js) --> <!--Global site tag(gtag.js) - Google Analytics--> <script async src = "https://www.googletagmanager.com/gtag/js?id=G-MSW0E70EEM" > </script> <script > // Disable tracking if the opt-out cookie exists. var allowga = false; var disableStr = 'ga-disable-G-MSW0E70EEM'; if (document.cookie.indexOf('cookieconsent_magic') != -1) { var name = "cookieconsent_magic="; var decodedCookie = decodeURIComponent(document.cookie); var ca = decodedCookie.split(';'); var cookie; for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { cookie = c.substring(name.length, c.length); } } if (cookie == "ga_optin") { allowga = true; } else if (cookie == "ga_optout") { window[disableStr] = true; //this is what disables the tracking, note the measurement ID } if (allowga) { window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-MSW0E70EEM'); } else { window[disableStr] = true; } } else { window[disableStr] = true; } </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /><meta name="keywords" content="MAGIC, DEFRA, map, application, environment, countryside, nature on the map, natureonthemap" /><title> Magic Map Application </title><link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.39/dijit/themes/claro/claro.css" /><link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.39/esri/css/esri.css" /><link rel="Stylesheet" type="text/css" href="https://js.arcgis.com/3.39/dojo/resources/dojo.css" media="all" /><link rel="Stylesheet" type="text/css" href="https://js.arcgis.com/3.39/dijit/themes/claro/document.css" media="all" /><link rel="Stylesheet" type="text/css" href="https://js.arcgis.com/3.39/dojox/layout/resources/FloatingPane.css" media="all" /><link rel="Stylesheet" type="text/css" href="https://js.arcgis.com/3.39/dojox/layout/resources/ResizeHandle.css" media="all" /><link rel="stylesheet" type="text/css" href="MagicMap.css" /><link rel="stylesheet" type="text/css" href="css/GeoFinder.css" /><link rel="stylesheet" type="text/css" href="css/cookieconsent.css" /><link rel="shortcut icon" href="../images/favicon.png" type="image/png" /><link rel="apple-touch-icon" href="../images/favicon.png" type="image/png" /><link rel="icon" type="image/x-icon" href="../images/favicon.ico" /> <script type="text/javascript"> dojoConfig = { parseOnLoad: true, isDebug: false, packages: [ { "name": "landmark", //"location": location.pathname.replace(/\/[^/]+$/, '') + "/JavaScript" "location": '/Landmark' } ] }; function HandleClose() { PageMethods.AbandonSession(); } </script> <script type="text/javascript" src="https://js.arcgis.com/3.39/"></script> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript" src="/tocBH/agsjs/dijit/TOC.js"></script> <script type="text/javascript"> var mapServiceTree = {"?xml":{"version":"1.0","encoding":"utf-8"},"Folder":{"ID":"","Name":"MAGIC","MapService":[{"ID":"Access","Name":"Access","Description":"Access","ShowOnMap":"true","MetadataURL":"","Collapsed":"true","ShowLegend":"true","ShowFader":"true","ServiceType":"Dynamic","Thumbnail":"","Checked":"false","IsBaseMapLayer":"false","URL":"https://gisdata.landmarkcloud.co.uk/arcgis/rest/services/MAGIC/Access/MapServer"},{"ID":"AdministrativeGeographies","Name":"Administrative Geographies","Description":"Administrative Geographies","ShowOnMap":"true","MetadataURL":"","Collapsed":"true","ShowLegend":"true","ShowFader":"true","ServiceType":"Dynamic","Thumbnail":"","Checked":"false","IsBaseMapLayer":"false","URL":"https://gisdata.landmarkcloud.co.uk/arcgis/rest/services/MAGIC/AdministrativeGeographies/MapServer"},{"ID":"Countryside","Name":"Countryside Stewardship Targeting & Scoring Layers","Description":"Countryside Stewardship Targeting & Scoring Layers","ShowOnMap":"true","MetadataURL":"","Collapsed":"true","ShowLegend":"true","ShowFader":"true","ServiceType":"Dynamic","Thumbnail":"","Checked":"false","IsBaseMapLayer":"false","URL":"https://gisdata.landmarkcloud.co.uk/arcgis/rest/services/MAGIC/Countryside/MapServer"},{"ID":"Designations","Name":"Designations","Description":"Designations","ShowOnMap":"true","MetadataURL":"","Collapsed":"true","ShowFader":"true","ShowLegend":"true","ServiceType":"Dynamic","Thumbnail":"","Checked":"false","IsBaseMapLayer":"false","URL":"https://gisdata.landmarkcloud.co.uk/arcgis/rest/services/MAGIC/Designations/MapServer"},{"ID":"HabitatsAndSpecies","Name":"Habitats and Species","Description":"Habitats and Species","ShowOnMap":"true","MetadataURL":"","Collapsed":"true","ShowFader":"true","ShowLegend":"true","ServiceType":"Dynamic","Thumbnail":"","Checked":"false","IsBaseMapLayer":"false","URL":"https://gisdata.landmarkcloud.co.uk/arcgis/rest/services/MAGIC/HabitatsAndSpecies/MapServer"},{"ID":"LandBasedSchemes","Name":"Land Based Schemes","Description":"Land Based Schemes","ShowOnMap":"true","MetadataURL":"","Collapsed":"true","ShowFader":"true","ShowLegend":"true","ServiceType":"Dynamic","Thumbnail":"","Checked":"false","IsBaseMapLayer":"false","URL":"https://gisdata.landmarkcloud.co.uk/arcgis/rest/services/MAGIC/LandBasedSchemes/MapServer"},{"ID":"Landscape","Name":"Landscape","Description":"Landscape","ShowOnMap":"true","MetadataURL":"","Collapsed":"true","ShowLegend":"true","ShowFader":"true","ServiceType":"Dynamic","Thumbnail":"","Checked":"false","IsBaseMapLayer":"false","URL":"https://gisdata.landmarkcloud.co.uk/arcgis/rest/services/MAGIC/Landscape/MapServer"},{"ID":"Marine","Name":"Marine","Description":"Marine","ShowOnMap":"true","MetadataURL":"","Collapsed":"true","ShowLegend":"true","ShowFader":"true","ServiceType":"Dynamic","Thumbnail":"","Checked":"false","IsBaseMapLayer":"false","URL":"https://gisdata.landmarkcloud.co.uk/arcgis/rest/services/MAGIC/Marine/MapServer"},{"ID":"AerialPhotography","Name":"Aerial Photography","Description":"Aerial Photos","ShowOnMap":"true","MetadataURL":"","Collapsed":"true","ShowFader":"true","ShowLegend":"false","ServiceType":"InfoTerraWMS","Thumbnail":"","Checked":"false","IsBaseMapLayer":"true","URL":"https://gisdata.landmarkcloud.co.uk/InfoTerraWMSProxy"},{"ID":"BackgroundMapping","Name":"Background Mapping","Description":"BackGround Mapping","ShowOnMap":"true","MetadataURL":"","Collapsed":"true","ShowFader":"true","ShowLegend":"false","ServiceType":"Dynamic","Thumbnail":"","Checked":"false","IsBaseMapLayer":"true","URL":"https://gisdata.landmarkcloud.co.uk/arcgis/rest/services/MAGIC/BackgroundMapping/MapServer"},{"ID":"BaseMap","Name":"Base Map","Description":"Base Map","ShowOnMap":"true","MetadataURL":"","Collapsed":"true","ShowFader":"true","ShowLegend":"false","ServiceType":"Dynamic","Thumbnail":"","Checked":"true","IsBaseMapLayer":"true","URL":"https://gisdata.landmarkcloud.co.uk/arcgis/rest/services/MAGIC/BaseMap/MapServer"},{"ID":"GreyRasters","Name":"OS Black and White Mapping","Description":"OS Black and White Mapping","ShowOnMap":"true","MetadataURL":"","Collapsed":"true","ShowFader":"true","ShowLegend":"false","ServiceType":"VectorTile","Thumbnail":"","Checked":"true","IsBaseMapLayer":"true","URL":"https://api.os.uk/maps/vector/v1/vts"},{"ID":"Rasters","Name":"OS Colour Mapping","Description":"OS Black and White Mapping","ShowOnMap":"true","MetadataURL":"","Collapsed":"true","ShowFader":"true","ShowLegend":"false","ServiceType":"VectorTile","Thumbnail":"","Checked":"false","IsBaseMapLayer":"true","URL":"https://api.os.uk/maps/vector/v1/vts"},{"ID":"GreyRasters","Name":"OS Black and White Mapping","Description":"OS Black and White Mapping","ShowOnMap":"true","MetadataURL":"","Collapsed":"true","ShowFader":"true","ShowLegend":"false","ServiceType":"Dynamic","Thumbnail":"","Checked":"true","IsBaseMapLayer":"true","URL":"https://gisdata.landmarkcloud.co.uk/arcgis/rest/services/MAGIC/GreyRasters/MapServer"},{"ID":"Rasters","Name":"OS Colour Mapping","Description":"OS Colour Mapping","ShowOnMap":"true","MetadataURL":"","Collapsed":"true","ShowFader":"true","ShowLegend":"false","ServiceType":"Dynamic","Thumbnail":"","Checked":"false","IsBaseMapLayer":"true","URL":"https://gisdata.landmarkcloud.co.uk/arcgis/rest/services/MAGIC/Rasters/MapServer"}]}}; var settings = {"?xml":{"version":"1.0","encoding":"utf-8"},"settings":{"geometryServiceURL":"https://gisdata.landmarkcloud.co.uk/arcgis/rest/services/Utilities/Geometry/GeometryServer","printServiceURL":"https://gisdata.landmarkcloud.co.uk/arcgis/rest/services/MAGIC/MagicExportWebMap/GPServer/Export%20Web%20Map","overviewMapLayerURL_OSGB36":"https://api.os.uk/maps/raster/v1/wmts?","overviewMapLayerURL_WGS84":"https://gisdata.landmarkcloud.co.uk/arcgis/rest/services/MAGIC/OverviewMap_WGS84/MapServer","overviewMapLayerURL_ETRS89":"https://gisdata.landmarkcloud.co.uk/arcgis/rest/services/MAGIC/OverviewMap_ETRS89/MapServer","watermarkServiceURL":"https://gisdata.landmarkcloud.co.uk/arcgis/rest/services/MAGIC/Magic_Watermark/MapServer","PostCodeServiceURL":"https://gisdata.landmarkcloud.co.uk/arcgis/rest/services/MAGIC/Postcodes/MapServer","PostCodeLayerID":"4","LayerLookupTableURL":"https://gisdata.landmarkcloud.co.uk/arcgis/rest/services/MAGIC/Postcodes/MapServer/6","Geocoder_EU_URL":"https://tasks.arcgisonline.com/ArcGIS/rest/services/Locators/TA_Address_EU/GeocodeServer","Geocoder_0_URL":"https://gisdata.landmarkcloud.co.uk/arcgis/rest/services/MAGIC/Locator_smart/GeocodeServer","Geocoder_0_LayerURL":"https://gisdata.landmarkcloud.co.uk/arcgis/rest/services/MAGIC/Postcodes/MapServer","Geocoder_0_LayerID":"5","Geocoder_1_URL":"https://gisdata.landmarkcloud.co.uk/arcgis/rest/services/MAGIC/Locator_Nuts1/GeocodeServer","Geocoder_1_LayerURL":"https://gisdata.landmarkcloud.co.uk/arcgis/rest/services/MAGIC/AdministrativeGeographies/MapServer","Geocoder_1_LayerID":"9","Exportgraphics":"https://gisdata.landmarkcloud.co.uk/arcgis/rest/services/MAGIC/ExtractGraphics/GPServer/ExtractGraphicsTask","Metadatafolder":"Metadata_for_MAGIC","proxyURL":"/proxy.ashx","DefaultURLPath":"https://gisdata.landmarkcloud.co.uk/arcgis/rest/services/MAGIC/","AerialresourceInfo_copyright":"Copyright NextPerspectives TM","AerialresourceInfo_visibleLayers":"AP-25CM-GB-LATEST-WMS","AerialresourceInfo_version":"1.3.0","AerialLayer_copyright":"Copyright Next Perspectives TM","NoIdentifyLayers":"Agricultural Land Classification - Provisional (England)","WarningLayers":"confirmed incident","GisHostName":"gisdata.landmarkcloud.co.uk","PortalUrl":"https://lig.maps.arcgis.com","OSMapsApiurl":"https://api.os.uk/","OSapiKey":"breOIx9DDQCz728GaznS0VWEfM3QP4TN","OSapiWMTSKey":"6rioVDOfVepiPcvA0D6jwRgGvjulOeSI","OSGreyStyleJSON":"https://raw.githubusercontent.com/OrdnanceSurvey/OS-Vector-Tile-API-Stylesheets/master/OS_VTS_27700_Greyscale.json","OSColourStyleJSON":"https://raw.githubusercontent.com/OrdnanceSurvey/OS-Vector-Tile-API-Stylesheets/master/OS_VTS_27700_Light.json"}}; var session = 'hr5ifooxece4cioolvke1huyhr5ifooxece4cioolvke1huy'; </script> <script type="text/javascript"> dojo.require("dojox.layout.FloatingPane"); ///////////////////////////////////////////////// // for TOC dojo.require("dojo.fx"); // needed since jsapi3.0 dojo.require("tocBH.agsjs.dijit.TOC"); /////////////////////////////////////////////// </script> <script type="text/javascript" src="/MagicMap.js"> </script> <script type="text/javascript" src="/js/UI_functions.js"> </script> </head> <body id="body1" class="claro" onunload="HandleClose();" onkeydown="if (event.keyCode==dojo.keys.TAB) { if (dijit.byId('dialogLoadMessage').open ) {return event.keyCode!=dojo.keys.TAB;}};"> <div id="divHeader" class="row"> <div id="logo" title="MAGIC Home page" class="img-vertical"> <a href="home.htm"> <img class="img-fluid" src="images/Logo.png" alt="MAGIC Logo" /></a> </div> <div id="columntwo"> <div id="divGeocodeSearchParent"> <div id="divGeocoderSearchHelp">County, Place or Postcode...</div> <div id="divGeocodeSearch"> </div> </div> </div> <div id="columnfour"> <div class="column four highlight"> </div> <div class="column four highlight"> <button data-dojo-type="dijit/form/ToggleButton" id="btnDrawingTool" title="Drawing Tools" data-dojo-props="checked :false"> Drawing Tools </button> <button data-dojo-type="dijit/form/ToggleButton" id="ToolSearchFeature" title="Search for a feature"> Search within layer </button> <button data-dojo-type="dijit/form/ToggleButton" id="btnMeasurementTool" title="Measure"> Measuring Tools </button> <button data-dojo-type="dijit/form/ToggleButton" id="btnWhereAmITool" title="Where am I?" data-dojo-props="checked :false"> Where am I? </button> <button data-dojo-type="dijit/form/ToggleButton" id="btnIdentifyTool" title="Identify" data-dojo-props="checked :false"> Identify </button> <button data-dojo-type="dijit/form/ToggleButton" id="btnSiteCheckTool" title="Site Check" data-dojo-props="checked :false"> Site Check </button> <button data-dojo-type="dijit/form/ToggleButton" id="btnClearHighLightGraphics" title="Clear Selected Feature" data-dojo-props="checked :false"> Clear Graphics </button> <button data-dojo-type="dijit/form/ToggleButton" id="btnPrintTool" title="Print" data-dojo-props="checked :false"> Print </button> <button data-dojo-type="dijit/form/ToggleButton" id="btnShareMap" title="Create Bookmark" data-dojo-props="checked :false"> Share Map </button> <button data-dojo-type="dijit/form/ToggleButton" id="btnLegend" title="Legend" data-dojo-props="checked :false"> Legend </button> <button data-dojo-type="dijit/form/ToggleButton" id="btnTocSearch" title="Search for layers" > Search for layers </button> <button data-dojo-type="dijit/form/ToggleButton" id="btnLoadUserData" title="Load User Data" data-dojo-props="checked :false"> Load User Data </button> <button data-dojo-type="dijit/form/ToggleButton" id="btnDataVisibilityTool" title="Data Visibility" data-dojo-props="checked :false"> Data Visibility Tool </button> <button data-dojo-type="dijit/form/ToggleButton" id="btnHelp" title="Need Help?" > Help </button> <button data-dojo-type="dijit/form/ToggleButton" id="btnTerms" title="Terms of Use" > Terms </button> </div> </div> <div id="columnthree"> <div class="column three"> <div id="c3top"> <div id="divMapProjection" title="Set Map Projection: OSGB36 is the standard projection for Land Based Features, ETRS89 or WGS84 for Marine datasets. "> <select id="selectMapProjection" data-dojo-type="dijit.form.ComboBox" spellcheck="false"> <option value="OSGB36">OSGB36</option> <option value="ETRS89_GEOGRAPHIC">ETRS89</option> <option value="WGS84">WGS84</option> </select> </div> <div id="divMapScale" title="Set Map Scale"> <select id="selectMapScale" data-dojo-type="dijit.form.ComboBox"> <option value="9999999">Full Extent</option> <option value="1000000">1:1,000,000</option> <option value="500000">1:500,000</option> <option value="250000">1:250,000</option> <option value="50000">1:50,000</option> <option value="25000">1:25,000</option> <option value="10000">1:10,000</option> <option value="2500">1:2,500</option> </select> </div> </div> </div> </div> </div> <div id="divMainContainer" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="gutters:'false'"> <div id="divMap" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="position: absolute; overflow: hidden; border: double silver; padding: 0px !important; width: 100%; height: 100%; margin: 0; border: 0;"></div> </div> <div id="divTOCHelp" title="Table of Contents Help" class="LHShelpButtonExpanded" onclick="ShowTocHelp();"></div> <div id="divToggleButton" title="Show/Hide Table of Contents" class="LHStoggleButtonExpanded" onclick="ToggleLeftPanelView();"></div> <div id="divOverview"></div> <div id="divMapCompass"> <span title="North" id="mapCompassN" class="compassLabel" onclick="map.panUp();">N</span> <span title="West" id="mapCompassW" class="compassLabel" onclick="map.panLeft();">W</span> <span title="East" id="mapCompassE" class="compassLabel" onclick="map.panRight();">E</span> <span title="South" id="mapCompassS" class="compassLabel" onclick="map.panDown();">S</span> <span title="North West" id="mapCompassNW" class="compassLabel" onclick="map.panUpperLeft();">NW</span> <span title="North East" id="mapCompassNE" class="compassLabel" onclick="map.panUpperRight();">NE</span> <span title="South West" id="mapCompassSW" class="compassLabel" onclick="map.panLowerLeft();">SW</span> <span title="South East" id="mapCompassSE" class="compassLabel" onclick="map.panLowerRight();">SE</span> <span title="Full Extent" id="mapCompassFullExtent" class="compassLabel" >Full Extent</span> </div> <div id="divBackForthExtent"> <span id="spanPrevExtent" title="Previous Extent" class="prev" > Previous </span> <span id="spanNextExtent" title="Next Extent" class="next"> Next </span> </div> <div id="divXYLocation"></div> <div id="divScalebar"></div> <div id="divLandmarkCopyrightText"></div> <div id="divPoweredByLandmarkText"></div> <div id="divLayerLoading"> <div class="f_circleG" id="frotateG_01"></div> <div class="f_circleG" id="frotateG_02"></div> <div class="f_circleG" id="frotateG_03"></div> <div class="f_circleG" id="frotateG_04"></div> <div class="f_circleG" id="frotateG_05"></div> <div class="f_circleG" id="frotateG_06"></div> <div class="f_circleG" id="frotateG_07"></div> <div class="f_circleG" id="frotateG_08"></div> </div> <div id="divLeftPanel"> <div id="divLeftPanelContent" data-dojo-type="dijit.layout.BorderContainer"> <div data-dojo-id="myAccordian" data-dojo-type="dijit.layout.AccordionContainer" data-dojo-props="region:'center'"> <div data-dojo-id="myAccordianPane1" style="overflow: auto" data-dojo-type="dijit.layout.ContentPane" class="accordionContentPanes" title="<img src='images/layerList.png' style='vertical-align:middle; margin-right:15px' />Table of Contents"> <div id="divTOCWrapper"> <div id="divTOC"> </div> </div> </div> </div> </div> </div> <div id="divBasemapGallery" style="display: none;" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"> <div id="divBasemapGalleryList"> </div> </div> <div id="divDrawingToolBox"> <div class="floatingToolPaneContent"> <h3>Tools</h3> <div id="divDrawingToolDrawButtons" class="simpleButton smallButton"> <table> <tr> <td> <button data-dojo-type="dijit/form/ToggleButton" id="btnDrawSelect" title="Select graphics for editing or deleting" data-dojo-props='checked :false'> <img alt="Drawing tool - Select Graphic" src="images/DrawingButtons/button_select_elements.png" width="20" /> </button> </td> <td style="width: 10px"> </td> <td> <button data-dojo-type="dijit/form/ToggleButton" id="btnDrawText" title="Text" data-dojo-props="checked :false"> <img alt="Drawing tool - Add Text" src="images/DrawingButtons/button_new_text.png" width="20" /> </button> </td> <td> <button data-dojo-type="dijit/form/ToggleButton" id="btnDrawPoint" title="Point" data-dojo-props="checked :false"> <img alt="Drawing tool - Add Point" src="images/DrawingButtons/button_new_marker.png" width="20" /> </button> </td> <td> <button data-dojo-type="dijit/form/ToggleButton" id="btnDrawLine" title="Line" data-dojo-props="checked :false"> <img alt="Drawing tool - Add Line" src="images/DrawingButtons/button_new_line.png" width="20" /> </button> </td> <td> <button data-dojo-type="dijit/form/ToggleButton" id="btnDrawFreehandPolyline" title="Freehand Line" data-dojo-props="checked :false"> <img alt="Drawing tool - Add Freehand Line" src="images/DrawingButtons/button_new_freehand.png" width="20" /> </button> </td> <td> <button data-dojo-type="dijit/form/ToggleButton" id="btnDrawRectangle" title="Rectangle" data-dojo-props="checked :false"> <img alt="Drawing tool - Add Rectangle" src="images/DrawingButtons/button_new_rectangle.png" width="20" /> </button> </td> <td> <button data-dojo-type="dijit/form/ToggleButton" id="btnDrawCircle" title="Circle" data-dojo-props="checked :false"> <img alt="Drawing tool - Add Circle" src="images/DrawingButtons/button_new_circle.png" width="20" /> </button> </td> <td> <button data-dojo-type="dijit/form/ToggleButton" id="btnDrawPolygon" title="Polygon" data-dojo-props="checked :false"> <img alt="Drawing tool - Add Polygon" src="images/DrawingButtons/button_new_polygon.png" width="20" /> </button> </td> <td> <button data-dojo-type="dijit/form/ToggleButton" id="btnDrawFreehandPolygon" title="Freehand Polygon" data-dojo-props="checked :false"> <img alt="Drawing tool - Add Freehand Polygon" src="images/DrawingButtons/button_new_freehand_polygon.png" width="20" /> </button> </td> <td style="width: 10px"> </td> <td> <button data-dojo-type="dijit/form/ToggleButton" id="btnDrawEraseAll" title="Delete All" data-dojo-props="checked :false"> <img alt="Drawing tool - Delete All" src="images/DrawingButtons/button_new_delete.png" width="20" /> </button> </td> </tr> </table> </div> </div> <div class="floatingToolPaneContent simpleButton"> <h3>Styling</h3> <div id="divDrawingToolStyles"> <table> <tr> <td> <div id="btnDrawFontColour" title="Font Colour" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"drawFontColour", showLabel:false'> <span>Colour</span> <div data-dojo-type="dijit/ColorPalette" id="cpDrawFontColour" data-dojo-props='palette:"3x4"'> </div> </div> </td> <td> <div id="btnDrawPointColour" title="Point Colour" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"drawPointColour", showLabel:false'> <span>Colour</span> <div data-dojo-type="dijit/ColorPalette" id="cpDrawPointColour" data-dojo-props='palette:"3x4"'> </div> </div> </td> <td> <div id="btnDrawLineColour" title="Line Colour" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"drawLineColour", showLabel:false'> <span>Colour</span> <div data-dojo-type="dijit/ColorPalette" id="cpDrawLineColour" data-dojo-props='palette:"3x4"'> </div> </div> </td> <td> <div id="btnDrawFillColour" title="Fill Colour" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"drawFillColour", showLabel:false'> <span>Colour</span> <div data-dojo-type="dijit/ColorPalette" id="cpDrawFillColour" data-dojo-props='palette:"3x4"''> </div> </div> </td> </tr> <tr> <td> <div id="divColourSwatchFont" class="colourSwatch"></div> </td> <td> <div id="divColourSwatchPoint" class="colourSwatch"></div> </td> <td> <div id="divColourSwatchLine" class="colourSwatch"></div> </td> <td> <div id="divColourSwatchFill" class="colourSwatch"></div> </td> </tr> </table> </div> </div> <div id="divDrawingToolExport" class="floatingToolPaneFooter simpleSquareButton"> <div id="btnExport" data-dojo-type="dijit.form.Button" data-dojo-props='iconClass:"dijitIconSave", optionsTitle:"Export to GIS"' title="Export Graphics to ShapeFile" > <span>Export</span> </div> <div id="saveButtons"> <div id="saveButtonDiv"></div> </div> </div> </div> <div id="divMeasurementToolBox"> <div id="divMeasurementTool"></div> </div> <div id="divPrintToolBox"> <div id="divPrintToolWidget" class="simpleSquareButton"></div> </div> <div id="divSiteCheckToolBox"> <div class="floatingToolPaneContent"> <div style="text-align: justify;"> <b>Caution!</b> Complex shapes and/or too many layers<br /> may result in slow site checks or error messages. <br /> <br /> <b>Ensure all the layers you want to search are <br /> turned on in the table of contents.</b><br /> <br /> <b>Define Area of Interest on the map using one <br /> of the following buttons:</b><br /> </div> <div id="divSiteDrawingTools" class="simpleButton smallButton"> <table> <tr> <td> <button data-dojo-type="dijit/form/ToggleButton" id="btnSiteCheckDrawPoint" title="Point" data-dojo-props="checked :false"> <img alt="Site Check - Point" src="images/DrawingButtons/button_new_marker.png" width="20" /> </button> </td> <td> <button data-dojo-type="dijit/form/ToggleButton" id="btnSiteCheckDrawLine" title="Line" class="smallButton" data-dojo-props="checked :false"> <img alt="Site Check - Line" src="images/DrawingButtons/button_new_line.png" width="20" /> </button> </td> <td> <button data-dojo-type="dijit/form/ToggleButton" id="btnSiteCheckDrawPolygon" title="Polygon" class="smallButton" data-dojo-props="checked :false"> <img alt="Site Check - Area" src="images/DrawingButtons/button_new_polygon.png" width="20" /> </button> </td> <td style="width: 10px"> </td> <td> <button data-dojo-type="dijit/form/ToggleButton" id="btnSiteCheckDeleteAll" title="Delete All" class="smallButton" data-dojo-props="checked :false"> <img alt="Site Check - Delete" src="images/DrawingButtons/button_new_delete.png" width="20" /> </button> </td> </tr> </table> </div> </div> <div class="floatingToolPaneContent simpleSquareButton"> <b>Buffer Shapes (optional)</b><br /> <input id="btnsiteCheckBuffer" type="text" data-dojo-type="dijit/form/NumberTextBox" name="siteCheckBuffer" required="true" value="0" data-dojo-props="constraints:{min:0,max:30000,places:0}, invalidMessage:'Invalid Buffer Size.'" /> Metres     <div id="btnBuffer" data-dojo-type="dijit/form/Button" data-dojo-props='iconClass:"siteCheckDoSiteCheckBuffer", optionsTitle:"Buffer Shapes"' title="Buffer Shapes" > <span>Buffer</span> </div> </div> <div class="floatingToolPaneFooter simpleSquareButton"> <table> <tr> <td> <b>Tick to exclude null results</b><br /> </td> <td style="width: 20px"> <td> <b>Perform Site Check</b><br /> </td> </tr> <tr> <td> <input type="checkbox" data-dojo-type="dijit.form.CheckBox" id="cbNullresults" value="true" /> <br /> </td> <td style="width: 22px"> <td> <div id="btnSiteCheck" data-dojo-type="dijit.form.Button" data-dojo-props='iconClass:"siteCheckDoSiteCheck", optionsTitle:"Buffer Shapes"' title="Do Site Check" > <span>Perform Site Check</span> </div> </td> </tr> </table> </div> </div> <div id="divFloater"> <div class="floatingToolPaneContent"> This is the content of the pane!<br /> <br /> This is the content of the pane!<br /> <br /> This is the content of the pane!<br /> <br /> This is the content of the pane!<br /> <br /> </div> <div class="floatingToolPaneFooter"> <button>but</button>This is the Footer of the pane (buttons etc) </div> </div> <div data-dojo-id="dialogGetDrawText" data-dojo-type="dijit.Dialog" data-dojo-props="title:'Input Text'"> <div class="dijitDialogPaneContentArea"> <table> <tr> <td> <label for="name">Text: </label> </td> <td> <input data-dojo-type="dijit.form.TextBox" type="text" name="text" id="drawtext"></td> </tr> </table> </div> <div class="dijitDialogPaneActionBar simpleSquareButton"> <button data-dojo-type="dijit.form.Button" type="button" id="dialogGetTextBtnOK" >OK</button> <button data-dojo-type="dijit.form.Button" type="button" id="dialogGetTextBtnCancel">Cancel</button> </div> </div> <div id="divDialogMetaData" data-dojo-id="dialogMetaData" data-dojo-type="dijit.Dialog" data-dojo-props="title:'Metadata'"> <div id="dialogMetaDataContent" class="dijitDialogPaneContentArea"> </div> </div> <div id="divLoadingIndicator" style="text-align: center; vertical-align: middle;"> <table style="height: 100%; margin: 0 auto"> <tr> <td> <table> <tr> <td> <img alt="loading" src="images/loading.gif" /> </td> <td id="loadingMessage"></td> </tr> </table> </td> </tr> </table> </div> <div id="divSearchFeatureResults" style="position: absolute; width: 100%; height: 100%;"> <label>Select Layer:</label> <select id="mySelect"></select> <br /> <label>Enter Search:</label> <input type="text" id="txtsearch"> <span class="simpleSquareButton"> <button data-dojo-type="dijit/form/Button" type="button" id="btnfeatsearch" >Search</button> </span> <br /> <br /> <div id="divSearchFeatureDisplay" class="simpleSquareButton"></div> <br /> <div id="divSearchFeatureResultGrid" class="simpleSquareButton"></div> </div> <div id="divLegend" data-dojo-type="dijit/Dialog" title="Legend <a onClick=window.open('/Help_text.htm#Legend','Help','width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');><span class='dijitdialogHelp'/>?</span></a>" style="position: absolute; opacity: 1; left: 350px; top: 20px; z-index: 950;"> <div data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:'Legend', closable:true"> <div id="legendinfotext" style="font-weight: bold; color: red"></div> <br /> <div id="legendDiv"> </div> </div> </div> <div data-dojo-id="divIdentifyFeatureDialog" data-dojo-type="dijit/Dialog" title="Site Check Results" style="width: 600px; height: 520px;"> <div class="simpleSquareButton"> <div id="divIdentifyHeader"></div> <div id="divIdentifyWait">Searching.... Please Wait...</div> <div id="divIdentifyData" style="width: 560px; height: 380px; overflow: scroll"></div> <div class="dijitDialogPaneActionBar"> <button data-dojo-type="dijit.form.Button" type="button" id="btnIdentifyOK" data-dojo-props="onClick:function(){ divIdentifyFeatureDialog.hide(); }">OK</button> <button data-dojo-type="dijit.form.Button" type="button" id="btnIdentifyCancel" data-dojo-props="onClick:function(){ divIdentifyFeatureDialog.hide(); }">Cancel</button> <button data-dojo-type="dijit.form.Button" type="button" id="btnexporttocsv" >Export to CSV</button> <button data-dojo-type="dijit.form.Button" type="button" id="btnIdentifyPrint" >Print</button> </div> </div> </div> <div id="divIdentifyPrintData" style="width: 560px; height: 380px; overflow: scroll"></div> <div data-dojo-id="divIdentifySelect" data-dojo-type="dijit/Dialog"> <select id="OptionIdSelect"> <option value="Point">Identify (point)</option> <option value="Line">Identify (Line)</option> <option value="Poly">Identify (Poly)</option> </select> <button data-dojo-type="dijit/form/Button" type="button" onclick="doIdentify();"> Click on Map </button> </div> <div id="divSearchforLayers"> <div id="divSearchforLayersContent"> <div id="divSearchforLayersHeader"> <label>Enter Search:</label> <input type="text" id="txtsearchlyrs" > <span class="simpleSquareButton"> <button id="btnClearSearch" data-dojo-type="dijit/form/Button" type="button">Clear Search</button> <button id="btnDisplayLayers" data-dojo-type="dijit/form/Button" type="button" >Display Selected Layers</button> </span> </div> <div id="divSearchLayersResultGrid" class="simpleSquareButton"></div> </div> </div> <div id="divLoadUserData"> <div id="divLoadUserDataContent" class="floatingToolPaneContent"> <div id="divLoadUserData_layerName"> <span>Layer Name</span> <span> <input type="text" id="txtUserLayerName" ></span> </div> <div id="divLoadUserData_mapService">Load Map service or Feature service or WMS service</div> <div id="divLoadUserData_mapServiceURL"> <span>Map / Feature / WMS URL</span> <span> <input type="url" id="txtWeburl"></span> </div> <button id="btnMapWMSurl" class="file-upload" >Add Map/Feature/WMS service</button> <div id="divLoadUserData_gpx">Select Style and upload shape file in zip format / gpx / csv file</div> <div class="simpleButton"> <div id="divAddDataStyles"> <table> <tr> <td class="selectStyled"> <div class="selectionStyled2"> <select id="markerSymbol" title="Select Marker Symbol"> <option value="Circle">●</option> <option value="Cross">+</option> <option value="Diamond">♦</option> <option value="Square">■</option> <option value="X">x</option> </select> </div> </td> <td> <div id="btnAddDataPointColour" title="Point Colour" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"drawPointColour", showLabel:false'> <span>Colour</span> <div data-dojo-type="dijit/ColorPalette" id="addDataPointColour" data-dojo-props='palette:"3x4"'> </div> </div> </td> <td> <div id="btnAddDataLineColour" title="Line Colour" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"drawLineColour", showLabel:false'> <span>Colour</span> <div data-dojo-type="dijit/ColorPalette" id="addDataLineColour" data-dojo-props='palette:"3x4"'> </div> </div> </td> <td> <div id="btnAddDataFillColour" title="Fill Colour" data-dojo-type="dijit/form/DropDownButton" data-dojo-props='iconClass:"drawFillColour", showLabel:false'> <span>Colour</span> <div data-dojo-type="dijit/ColorPalette" id="addDataFillColour" data-dojo-props='palette:"3x4"'> </div> </div> </td> </tr> <tr> <td></td> <td> <div id="divAddDataColourSwatchPoint" class="colourSwatch"></div> </td> <td> <div id="divAddDataColourSwatchLine" class="colourSwatch"></div> </td> <td> <div id="divAddDataColourSwatchFill" class="colourSwatch"></div> </td> </tr> </table> </div> </div> <form enctype="multipart/form-data" method="post" id="uploadForm"> <div id="divLoadUserData_addFile" class="field"> <label class="file-upload"> <span><strong>Add File</strong></span> <input type="file" name="file" id="inFile" /> </label> </div> </form> <div id="divNewlayers"></div> <span id="upload-status" class="file-upload-status"></span> <div id="fileInfo"></div> <div> <p> <span>Drag and drop services(map / feature service URL or WMS from approved providers), images or a csv file (limit of 1,000 features) latitude/longitude information from windows explorer to the map.</span> </p> <div id="msg"> 'You are using a browser that doesn't support drag/drop use the file upload box below to add your csv:' </div> <span id="status"></span> <div id="fileInfocsv"> </div> <p> Note: The CSV file must store the location in fields with one of the following names: <br /> <b>latitude fields: </b>lat, latitude, y, ycenter, northing, northings <br /> <b>longitude fields: </b>lon, long, longitude, x, xcenter, easting, eastings <br /> Please set the application projection to the appropriate map projection </p> </div> <div data-dojo-id="divPleaseWait" data-dojo-type="dijit/Dialog"> Please Wait... </div> </div> </div> <div id="divDataViewLayers"> <div id="divDataViewLayersResultGrid"></div> <p id="divDataViewLayersContent"> <label>Set Map Scale 1 :</label> <input type="text" id="txtscale" value="" placeholder="For example, 300000"> <span class="simpleSquareButton"> <button id="btnGotoMapScale" data-dojo-type="dijit/form/Button" type="button" >Go </button> </span> <p>Note: Selecting more than 10 layers may cause performance issues and result in a timeout error</p> </div> <div data-dojo-id="dlgRemoveFeatures" data-dojo-type="dijit/Dialog" style="width: 300px; height: 80px;"> <label>Select Layer: </label> <select id="cmblayer"> <option value="Point">Point</option> <option value="Line">Line</option> <option value="Polygon">Polygon</option> </select> <button data-dojo-type="dijit/form/Button" type="button" onclick="RemoveAllFea();"> Remove All </button> </div> <div id="testDialog" data-dojo-id="testDialog" data-dojo-type="landmark/NonModalDialogExt" title="Identify Results"> <div id="div2"> </div> </div> <div data-dojo-id="divLayerManager" data-dojo-type="dijit.Dialog" title="Theme Picker" style="height: 300px; width: 590px"> <div id="gridDiv"></div> <div class="dijitDialogPaneActionBar"> <button data-dojo-type="dijit.form.Button" type="button" id="btnOK" onclick="updateMapWithThemes();"> OK </button> <button data-dojo-type="dijit.form.Button" type="button" onclick="divLayerManager.hide();" id="btnCancel"> Cancel</button> </div> </div> <div data-dojo-id="divDetails" data-dojo-type="dijit.Dialog" title="What's in this theme" style="height: 350px; width: 550px;"> <div id="gridDivTree" style="height: 288px; width: 531px"></div> <button data-dojo-type="dijit.form.Button" type="button" id="Button3" class="gridTreeOkBtn">OK</button> <script type="dojo/method" event="onCancel"></script> </div> <!-- Google Analytics code for Tracking to 2 profiles --> <form method="post" action="./MagicMap.aspx?xygridref=20586336%2c16558465" id="form1"> <div class="aspNetHidden"> <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTI1NTIxMTM3MmRkpWyxshGd/+U5+B7XDQVpQXOG5VYD8ayRhnNbbN/aWtY=" /> </div> <script type="text/javascript"> //<![CDATA[ var theForm = document.forms['form1']; if (!theForm) { theForm = document.form1; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } //]]> </script> <script src="/WebResource.axd?d=b-5neDWyrHReqLst-FQwOaOAXMbEbG9G2NbiUI1jA5Wr1hVe8RJK3IZBTKj0dwpaUbkbRZ3JMDNY4n1oVFqMqdPa4RJ2BhTLJgrJ9uHxG001&t=638568640745067788" type="text/javascript"></script> <script src="/ScriptResource.axd?d=bPqVtIQEFm5ytkW28YyYCJs78jWF0L-LKwA72UcBwqcvYFEdVjds4HwONV_DaHsQ_Gv9atG0e99CWuvUxp5fiEztIwIyPFuc52bpmrX8ipmR3lH-42QY5Z0vcfZD9udZK5VF35A56S37B1HJpDtEOL9bd3fedSb0doUNvvh2AGhuOeZj2PFBw2Fmn_JxmYxH0&t=ffffffffc820c398" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.'); //]]> </script> <script src="/ScriptResource.axd?d=8lTamf-nwWcmztRle2JysgEyexgUlAhd2RyvH1s2SbnxnSexG9GNrg7WA7VTlq2ZEU6-3GkunCCJ5-WW5ojdQ86NtLQXj728jialoFyU7gU97kfLNNENnWzQOFKzSjR9hp8UuTxg9XkHBkcXpCo6g8xsYLqXjPQA4msB04HoNSNnCEMbHLCyp8APO3VnXRMt0&t=ffffffffc820c398" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var PageMethods = function() { PageMethods.initializeBase(this); this._timeout = 0; this._userContext = null; this._succeeded = null; this._failed = null; } PageMethods.prototype = { _get_path:function() { var p = this.get_path(); if (p) return p; else return PageMethods._staticInstance.get_path();}, AbandonSession:function(succeededCallback, failedCallback, userContext) { /// <param name="succeededCallback" type="Function" optional="true" mayBeNull="true"></param> /// <param name="failedCallback" type="Function" optional="true" mayBeNull="true"></param> /// <param name="userContext" optional="true" mayBeNull="true"></param> return this._invoke(this._get_path(), 'AbandonSession',false,{},succeededCallback,failedCallback,userContext); }} PageMethods.registerClass('PageMethods',Sys.Net.WebServiceProxy); PageMethods._staticInstance = new PageMethods(); PageMethods.set_path = function(value) { PageMethods._staticInstance.set_path(value); } PageMethods.get_path = function() { /// <value type="String" mayBeNull="true">The service url.</value> return PageMethods._staticInstance.get_path();} PageMethods.set_timeout = function(value) { PageMethods._staticInstance.set_timeout(value); } PageMethods.get_timeout = function() { /// <value type="Number">The service timeout.</value> return PageMethods._staticInstance.get_timeout(); } PageMethods.set_defaultUserContext = function(value) { PageMethods._staticInstance.set_defaultUserContext(value); } PageMethods.get_defaultUserContext = function() { /// <value mayBeNull="true">The service default user context.</value> return PageMethods._staticInstance.get_defaultUserContext(); } PageMethods.set_defaultSucceededCallback = function(value) { PageMethods._staticInstance.set_defaultSucceededCallback(value); } PageMethods.get_defaultSucceededCallback = function() { /// <value type="Function" mayBeNull="true">The service default succeeded callback.</value> return PageMethods._staticInstance.get_defaultSucceededCallback(); } PageMethods.set_defaultFailedCallback = function(value) { PageMethods._staticInstance.set_defaultFailedCallback(value); } PageMethods.get_defaultFailedCallback = function() { /// <value type="Function" mayBeNull="true">The service default failed callback.</value> return PageMethods._staticInstance.get_defaultFailedCallback(); } PageMethods.set_enableJsonp = function(value) { PageMethods._staticInstance.set_enableJsonp(value); } PageMethods.get_enableJsonp = function() { /// <value type="Boolean">Specifies whether the service supports JSONP for cross domain calling.</value> return PageMethods._staticInstance.get_enableJsonp(); } PageMethods.set_jsonpCallbackParameter = function(value) { PageMethods._staticInstance.set_jsonpCallbackParameter(value); } PageMethods.get_jsonpCallbackParameter = function() { /// <value type="String">Specifies the parameter name that contains the callback function name for a JSONP request.</value> return PageMethods._staticInstance.get_jsonpCallbackParameter(); } PageMethods.set_path("MagicMap.aspx"); PageMethods.AbandonSession= function(onSuccess,onFailed,userContext) { /// <param name="succeededCallback" type="Function" optional="true" mayBeNull="true"></param> /// <param name="failedCallback" type="Function" optional="true" mayBeNull="true"></param> /// <param name="userContext" optional="true" mayBeNull="true"></param> PageMethods._staticInstance.AbandonSession(onSuccess,onFailed,userContext); } //]]> </script> <div class="aspNetHidden"> <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="AE2FCE01" /> </div> <script type="text/javascript"> //<![CDATA[ Sys.WebForms.PageRequestManager._initialize('ScriptManager1', 'form1', [], [], [], 90, ''); //]]> </script> </form> <script type="text/javascript" src="js/cookieconsent.js"></script> <script type="text/javascript"> window.addEventListener("load", function () { window.cookieconsent.initialise({ revokable: false, "palette": { "popup": { "background": "#3b3b3b", "opacity": 0.5, "text": "#ffffff" }, "button": { "background": "#9e1d52", "text": "#ffffff" } }, revokable: false, "position": "top", /*top, bottom – Banner top-left, top-right, bottom-left, bottom-right – Floating*/ "content": { "header": "Tell us whether you accept cookies", "message": "<p>We use cookies to collect information about how you use MAGIC. We use this information to make the website work as well as possible and improve MAGIC services.</p>", "link": "Set cookie preferences", "href": "/About_Privacy.htm" } }) }); </script> </body> </html>