Magic Map Application

<html lang="en"> <head>   <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 cookiename = "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(cookiename) == 0) { cookie = c.substring(cookiename.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; window.location.replace("home.htm"); } </script> <meta charset="utf-8" /> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Expires" content="-1"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> <title>Magic Map Application</title> <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css" /> <script type="module" src="https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js"></script> <link href="Map.css" rel="stylesheet" /> <link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.31/"></script> <script type="text/javascript" src="Scripts/MagicMap.js"></script> <script type="text/javascript" src="Scripts/Utility.js"></script> </head> <body> <calcite-loader label="Loading Magic Map" text="Loading Magic Map..." scale="l"></calcite-loader> <calcite-shell content-behind hidden> <calcite-shell-panel slot="panel-start" width-scale="l" display-mode="float" style="position: relative; top: 45px;"> <calcite-action-bar slot="action-bar" style="background-color:#78a4ad;"> <calcite-action id="layerlist" style="margin-left: 10px; margin-right: 10px; margin-bottom: 10px; margin-top: 10px; " scale="s" kind="neutral" data-action-id="layers" icon="layers" text="Layers"></calcite-action> <calcite-tooltip reference-element="layerlist" style="border: 1px solid black;"> <span>Map layers</span> </calcite-tooltip> <calcite-action id="legendid" style="margin-left: 10px; margin-right: 10px; margin-bottom: 10px;" scale="s" kind="neutral" data-action-id="legend" icon="legend" text="Legend"></calcite-action> <calcite-tooltip reference-element="legendid" style="border: 1px solid black;"> <span>Legend</span> </calcite-tooltip> <calcite-action id="searchforFeatureid" style="margin-left: 10px; margin-right: 10px; margin-bottom: 10px; " scale="s" kind="neutral" data-action-id="searchforFeature" icon="select-by-attributes" text="Search for Feature"></calcite-action> <calcite-tooltip reference-element="searchforFeatureid" style="border: 1px solid black;"> <span>Search for feature</span> </calcite-tooltip> <calcite-action id="searchforLayerid" style="margin-left: 10px; margin-right: 10px; margin-bottom: 10px; " scale="s" kind="neutral" data-action-id="searchforLayer" icon="layer-filter" text="Search for Layer"></calcite-action> <calcite-tooltip reference-element="searchforLayerid" style="border: 1px solid black;"> <span>Search for layer</span> </calcite-tooltip> <calcite-action id="dataVisiblityid" style="margin-left: 10px; margin-right: 10px; margin-bottom: 10px; " scale="s" kind="neutral" data-action-id="dataVisiblity" icon="select-visible" text="Data Visibility"></calcite-action> <calcite-tooltip reference-element="dataVisiblityid" style="border: 1px solid black;"> <span>Data visibility tool</span> </calcite-tooltip> <calcite-action id="loadUserDataid" style="margin-left: 10px; margin-right: 10px; margin-bottom: 10px; " scale="s" kind="neutral" data-action-id="loadUserData" icon="upload" text="Load User Data"></calcite-action> <calcite-tooltip reference-element="loadUserDataid" style="border: 1px solid black;"> <span>Load user data</span> </calcite-tooltip> <calcite-action id="cleargraphicsid" style="margin-left: 10px; margin-right: 10px; margin-bottom: 10px; " scale="s" kind="neutral" data-action-id="cleargraphics" icon="erase" text="Clear graphics"></calcite-action> <calcite-tooltip reference-element="cleargraphicsid" style="border: 1px solid black;"> <span>Clear graphics</span> </calcite-tooltip> <calcite-action id="bookmarkid" style="margin-left: 10px; margin-right: 10px; margin-bottom: 10px; " scale="s" kind="neutral" data-action-id="bookmark" icon="bookmark" text="Create a link for Bookmark"></calcite-action> <calcite-tooltip reference-element="bookmarkid" style="border: 1px solid black;"> <span>Create a link for bookmark</span> </calcite-tooltip> <calcite-action id="printid" style="margin-left: 10px; margin-right: 10px; margin-bottom: 10px; " scale="s" kind="neutral" data-action-id="printtemp" icon="print" text="Print"></calcite-action> <calcite-tooltip reference-element="printid" style="border: 1px solid black;"> <span>Print</span> </calcite-tooltip> <calcite-action id="helpid" style="margin-left: 10px; margin-right: 10px; margin-bottom: 10px; " scale="s" kind="neutral" data-action-id="help" icon="question" text="Help"></calcite-action> <calcite-tooltip reference-element="helpid" style="border: 1px solid black;"> <span>Need help?</span> </calcite-tooltip> <calcite-action id="tandcid" style="margin-left: 10px; margin-right: 10px; margin-bottom: 10px;" scale="s" kind="neutral" data-action-id="tandc" icon="test-data" text="Terms and conditions"></calcite-action> <calcite-tooltip reference-element="tandcid" style="border: 1px solid black;"> <span>Terms of use</span> </calcite-tooltip> </calcite-action-bar>  <calcite-panel heading="Map Layers" id="layerlistpanel" width-scale="l" data-panel-id="layers" hidden> <calcite-action id="layerlistpanelhelp" icon="question" text="Help" slot="header-actions-end"></calcite-action> <div id="layers-container"></div> </calcite-panel>  <calcite-panel heading="Legend" height-scale="l" data-panel-id="legend" hidden> <calcite-action id="legendhelp" icon="question" text="Help" slot="header-actions-end"></calcite-action> <calcite-label scale="m" alignment="center" color="red"> <b>Only layers selected and visible at this map scale will be shown</b> </calcite-label> <div id="legend-container"></div> </calcite-panel>  <calcite-panel heading="Print" height-scale="l" data-panel-id="print" hidden> <calcite-action id="printhelp" icon="question" text="Help" slot="header-actions-end"></calcite-action> <div id="print-container"></div> </calcite-panel>  <calcite-panel heading="Load User Data" headingLevel=3 alignment="center" data-panel-id="loadUserData" hidden> <calcite-action id="loadUserDatahelp" icon="question" text="Help" slot="header-actions-end"></calcite-action> <div id="headingAdddata" alignment="center"> <calcite-label scale="m" layout="inline"> Layer Name <calcite-input id="userLayerNameText" placeholder="Enter your layer name" scale="s"></calcite-input> </calcite-label> <calcite-label scale="m"> Load Map service or Feature service or WMS service( Map/Feature/WMS URL) <calcite-input id="mapwmsUrlText" placeholder="Map/Feature/WMS URL" scale="s"> <calcite-button icon-start="arrow-right" id="mapwmsUrlButton" slot="action" scale="s" style="padding-left: 5px; padding-right: 5px;"> Add </calcite-button> </calcite-input> </calcite-label> <form enctype="multipart/form-data" method="post" id="uploadForm"> <div class="field"> <calcite-label class="file-upload" scale="m"> <span><strong>Select Style and upload shape file in zip format/gpx/csv file</strong></span> <input type="file" name="file" id="inFile" aria-label="file" /> </calcite-label> </div> </form> <span class="file-upload-status" style="opacity:1;" id="upload-status"></span> <div id="fileInfo"> </div> </div> <div id="headingBlockAdddata" alignment="center"> <calcite-label scale="m"> ..Point style...... <calcite-select scale="s" id="add-data-point-style" padding="2px"> <calcite-option value="circle" selected>circle</calcite-option> <calcite-option value="cross">cross</calcite-option> <calcite-option value="diamond">diamond</calcite-option> <calcite-option value="square">square</calcite-option> <calcite-option value="x">x</calcite-option> </calcite-select> </calcite-label> <calcite-label scale="m"> ..Point Colour.. <calcite-input style="padding-left: 5px; padding-right: 5px;" placeholder="Point Colour" type="color" scale="s" id="add-data-point-color"> </calcite-input> </calcite-label> <calcite-label scale="m"> ..Polyline Colour.. <calcite-input style="padding-left: 5px; padding-right: 5px;" placeholder="Polyline color" type="color" scale="s" id="add-data-line-color" format="rgb"> </calcite-input> </calcite-label> <calcite-label scale="m"> ..Polygon fill.. <calcite-input style="padding-left:5px;" placeholder="Polygon fill color" type="color" scale="s" id="add-data-polygon-color" format="rgb"> </calcite-input> </calcite-label> </div> <calcite-label scale="s" slot="footer" alignment="center"> Drag and drop services(map / feature service URL or WMS from approved providers) or a csv file (limit of 1,000 features) Note: The CSV file must store the location in fields with one of the following Lat,Long or Latitude,Longitude or X,Y or Xcenter,Ycenter or Point-x,Point-y </calcite-label> </calcite-panel>  <calcite-panel heading="Search for Feature" headingLevel=3 data-panel-id="searchforFeature" alignment="center" hidden> <calcite-action id="searchforFeaturehelp" icon="question" text="Help" slot="header-actions-end"></calcite-action> <select id="selectLayer" class="esri-widget" aria-label="Select layer"></select> <calcite-input-text id="searchtext" placeholder="Enter search"></calcite-input-text> <calcite-button slot="footer" id="clearSearchFeatures" style="padding-left: 5px; padding-right: 5px;" disabled=true>Clear Search Features</calcite-button> <calcite-button slot="footer" id="searchFeature" style="padding-left: 5px; padding-right: 5px;">Search</calcite-button> <div class="findresultcontainer"> <div id="findresultstbl" style="padding-left: 5px; padding-right: 5px;"></div> </div> </calcite-panel>  <calcite-panel heading="Search for Layer" headingLevel=3 data-panel-id="searchforLayer" alignment="center" hidden> <calcite-action id="searchforLayerhelp" icon="question" text="Help" slot="header-actions-end"></calcite-action> <calcite-input id="searchLayerName" placeholder="Enter Layer Name" scale="s"> <calcite-button icon-start="arrow-right" id="searchforLayerButton" slot="action" scale="s" style="padding-left: 5px; padding-right: 5px;"> Search </calcite-button> </calcite-input> <div class="searchlayerResultcontainer"> <div id="searchlyrresultstbl" style="padding-left: 5px; padding-right: 5px;"></div> </div> <calcite-button slot="footer" id="clearSearchLayerButton" style="padding-left: 5px; padding-right: 5px;" disabled=true>Clear Search</calcite-button> <calcite-button slot="footer" id="zoomToselectedButton" style="padding-left: 5px; padding-right: 5px;" disabled=true>Display Selected Layers</calcite-button> </calcite-panel>  <calcite-panel heading="Data Visiblity Tool" headingLevel=3 data-panel-id="dataVisiblity" alignment="center" hidden> <calcite-action id="dataVisiblityhelp" icon="question" text="Help" slot="header-actions-end"></calcite-action> <div class="searchlayerResultcontainer"> <div id="datavisiblitytbl"></div> </div> <calcite-input id="DataVisMapscale" placeholder="Enter Map Scale" scale="s"> <calcite-button icon-start="arrow-right" id="ZoomToScaleButton" slot="action" scale="s"> Go </calcite-button> </calcite-input> <div slot="footer"><p>Note: Selecting more than 10 layers may cause performance issues and result in a timeout error</p></div> </calcite-panel> </calcite-shell-panel> <div style="display: flex; align-items: center;background-color:#78a4ad; height:45px;"> <a href="home.htm"> <img class="img-fluid" src="images/Logo.png" alt="MAGIC Logo" style="margin-left: 50px; margin-right: 50px;" /> </a> <div id="magicheader" style="position: relative;"></div> <div id="divMaptools" style="position: absolute; top: 8px; left: 55%; width:auto; height: auto; display: inline-block; "> <calcite-button icon-start="information-f" style="margin-right:7px;" id="identifyButton" scale="m" kind="neutral" label="Click on the map to identify features"></calcite-button> <calcite-tooltip placement="bottom-start" reference-element="identifyButton" style="border: 1px solid black;"> <span>Identify</span> </calcite-tooltip> <calcite-button icon-start="gps-on-f" style="margin-right:7px;" id="whereamiButton" scale="m" kind="neutral" label="Click on the map to get location"></calcite-button> <calcite-tooltip placement="bottom-start" reference-element="whereamiButton" style="border: 1px solid black;"> <span id="whereamispan">Where am I?</span> </calcite-tooltip> <calcite-button icon-start="measure" style="margin-right:7px;" id="measureButton" scale="m" kind="neutral" label="Measure tool"></calcite-button> <calcite-tooltip placement="bottom-start" reference-element="measureButton" style="border: 1px solid black;"> <span id="measurespan">Measurement tool</span> </calcite-tooltip> <calcite-button icon-start="annotate-tool" style="margin-right:7px;" id="sketchButton" scale="m" kind="neutral" label="Drawing tool"></calcite-button> <calcite-tooltip placement="bottom-start" reference-element="sketchButton" style="border: 1px solid black;"> <span id="sketchspan">Drawing tool</span> </calcite-tooltip> <calcite-button icon-start="cursor-selection" style="margin-right:50px;" id="sitecheckButton" scale="m" kind="neutral" label="Site check tool"></calcite-button> <calcite-tooltip placement="bottom-start" reference-element="sitecheckButton" style="border: 1px solid black;"> <span id="sketchspan">Site check tool</span> </calcite-tooltip>  <select id="projectWKID" class="esri-widget" style="margin-right: 20px;"> <option value="27700" selected>OSGB36</option> <option value="4258">ETRS89</option> <option value="4326">WGS84</option> </select> <select id="mapScale" class="esri-widget" style="margin-right: 20px;"> <option value="9999999" selected>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> <option value="9999999">Current Extent</option> </select> </div> </div> <div id="viewDiv" style="height: calc(100% - 45px);"> <div id="overviewmapDiv" class="esri-widget"> <div id="overviewDiv" class="esri-widget"></div> </div>  <calcite-panel heading="Measurement Tool " headingLevel=3 id="measurePanel" alignment="center" hidden> <calcite-action id="measurementhelp" icon="question" text="Help" slot="header-actions-end"></calcite-action> <div id="topbar" alignment="center"> <button class="esri-widget--button esri-interactive esri-icon-measure-line" id="distanceButton" title="Measure distance between two or more points"></button> <button class="esri-widget--button esri-interactive esri-icon-measure-area" id="areaButton" title="Measure area"></button> <button class="esri-widget--button esri-interactive esri-icon-trash" id="clearButton" title="Clear Measurements"> </button> </div> <calcite-label scale="s" alignment="center">  All measurements are indicative only and should not be used for official purposes. </calcite-label> </calcite-panel>  <calcite-panel heading="Sketch Styler" headingLevel=3 id="sketchPanel" alignment="center" hidden> <calcite-action id="sketchhelp" icon="question" text="Help" slot="header-actions-end"></calcite-action> <calcite-block id="headingBlock"> <calcite-action icon="cursor" title="Select graphic" scale="s" slot="control" id="selectBtn"></calcite-action> <calcite-action icon="add-text" title="Add text" scale="s" slot="control" id="textBtn"></calcite-action> <calcite-action icon="pin" title="Draw a point" scale="s" slot="control" id="pointBtn"></calcite-action> <calcite-action icon="line" title="Draw a polyline" scale="s" slot="control" id="polylineBtn"></calcite-action> <calcite-action icon="polygon" title="Draw a polygon" scale="s" slot="control" id="polygonBtn"></calcite-action> <calcite-action icon="rectangle" title="Draw a rectangle" scale="s" slot="control" id="rectangleBtn"></calcite-action> <calcite-action icon="circle" title="Draw a circle" scale="s" slot="control" id="circleBtn"></calcite-action> <calcite-action icon="trash" title="Clear graphics" scale="s" slot="control" id="clearBtn"></calcite-action> </calcite-block> <calcite-accordion selection-mode="single">  <calcite-accordion-item heading="Default Create Options"> <calcite-label> mode <calcite-select scale="s" id="mode-select"> <calcite-option value="" selected disabled>choose mode</calcite-option> <calcite-option value="click">click</calcite-option> <calcite-option value="freehand">freehand</calcite-option> <calcite-option value="hybrid">hybrid</calcite-option> </calcite-select> </calcite-label> </calcite-accordion-item>  <calcite-accordion-item heading="Default Update Options"> <calcite-label> enableRotation <calcite-label layout="inline"> True <calcite-switch scale="s" dir="rtl" id="rotationSwitch"></calcite-switch> False </calcite-label> </calcite-label> <calcite-label> enableScaling <calcite-label layout="inline"> True <calcite-switch scale="s" dir="rtl" id="scaleSwitch"></calcite-switch> False </calcite-label> </calcite-label> <calcite-label> preserveAspectRatio <calcite-label layout="inline"> True <calcite-switch scale="s" dir="rtl" id="aspectRatioSwitch"></calcite-switch> False </calcite-label> </calcite-label> <calcite-label> multipleSelectionEnabled <calcite-label layout="inline"> True <calcite-switch scale="s" dir="rtl" id="multipleSelectionSwitch"></calcite-switch> False </calcite-label> </calcite-label> </calcite-accordion-item>  <calcite-accordion-item heading="Text Symbol"> <div class="scrollSection"> <calcite-input id="addtextSymbol" placeholder="Enter Text" scale="s"></calcite-input> <calcite-label> color <calcite-input placeholder="Placeholder" type="color" scale="s" id="text-color-input"> </calcite-input> </calcite-label> <calcite-label> size <calcite-input id="font-size-input" placeholder="Placeholder" type="number" scale="s" min=0></calcite-input> </calcite-label> <calcite-label> xoffset <calcite-input id="text-xoffset-input" placeholder="Placeholder" type="number" scale="s"></calcite-input> </calcite-label> <calcite-label> yoffset <calcite-input id="text-yoffset-input" placeholder="Placeholder" type="number" scale="s"></calcite-input> </calcite-label> <calcite-label> angle <calcite-input id="text-angle-input" placeholder="Placeholder" type="number" scale="s" min=-360 max=360> </calcite-input> </calcite-label> </div> </calcite-accordion-item>  <calcite-accordion-item heading="Point Symbol"> <div class="scrollSection"> <calcite-label> style <calcite-select scale="s" id="point-style-select"> <calcite-option value="circle" selected>circle</calcite-option> <calcite-option value="cross">cross</calcite-option> <calcite-option value="diamond">diamond</calcite-option> <calcite-option value="square">square</calcite-option> <calcite-option value="x">x</calcite-option> </calcite-select> </calcite-label> <calcite-label> color <calcite-input placeholder="Placeholder" type="color" scale="s" id="point-color-input"> </calcite-input> </calcite-label> <calcite-label> outline <calcite-button id="point-outline-btn" scale="s">Set Outline</calcite-button> </calcite-label> <calcite-label> size <calcite-input id="point-size-input" placeholder="Placeholder" type="number" scale="s" min=0></calcite-input> </calcite-label> <calcite-label> xoffset <calcite-input id="point-xoffset-input" placeholder="Placeholder" type="number" scale="s"></calcite-input> </calcite-label> <calcite-label> yoffset <calcite-input id="point-yoffset-input" placeholder="Placeholder" type="number" scale="s"></calcite-input> </calcite-label> <calcite-label> angle <calcite-input id="point-angle-input" placeholder="Placeholder" type="number" scale="s" min=-360 max=360> </calcite-input> </calcite-label> </div> </calcite-accordion-item>  <calcite-accordion-item heading="Polygon Symbol"> <calcite-label> style <calcite-select scale="s" id="polygon-style-select"> <calcite-option disabled selected id="blankOption">choose a style</calcite-option> <calcite-option value="backward-diagonal">backward-diagonal</calcite-option> <calcite-option value="cross">cross</calcite-option> <calcite-option value="diagonal-cross">diagonal-cross</calcite-option> <calcite-option value="forward-diagonal">forward-diagonal</calcite-option> <calcite-option value="horizontal">horizontal</calcite-option> <calcite-option value="none">none</calcite-option> <calcite-option value="vertical">vertical</calcite-option> <calcite-option value="solid">solid</calcite-option> </calcite-select> </calcite-label> <calcite-label> outline <calcite-button id="polygon-outline-btn" scale="s">Set Outline</calcite-button> </calcite-label> <calcite-label> color <calcite-input placeholder="Placeholder" type="color" scale="s" id="polygon-color-input" format="rgb"> </calcite-input> </calcite-label> </calcite-accordion-item>  <calcite-accordion-item heading="Polyline Symbol"> <calcite-label> style <calcite-select scale="s" id="line-style-select"> <calcite-option disabled selected id="blankOption">choose a style</calcite-option> <calcite-option value="dash">dash</calcite-option> <calcite-option value="dash-dot">dash-dot</calcite-option> <calcite-option value="dot">dot</calcite-option> <calcite-option value="long-dash">long-dash</calcite-option> <calcite-option value="long-dash-dot">long-dash-dot</calcite-option> <calcite-option value="long-dash-dot-dot">long-dash-dot-dot</calcite-option> <calcite-option value="none">none</calcite-option> <calcite-option value="short-dash">short-dash</calcite-option> <calcite-option value="short-dash-dot">short-dash-dot</calcite-option> <calcite-option value="short-dash-dot-dot">short-dash-dot-dot</calcite-option> <calcite-option value="short-dot">short-dot</calcite-option> <calcite-option value="solid">solid</calcite-option> </calcite-select> </calcite-label> <calcite-label> width <calcite-input min="0" placeholder="Placeholder" type="number" scale="s" id="line-width-input"></calcite-input> </calcite-label> <calcite-label> color <calcite-input placeholder="Placeholder" type="color" scale="s" id="line-color-input" format="rgb"> </calcite-input> </calcite-label> </calcite-accordion-item>  <calcite-accordion-item heading="Save Graphics"> <calcite-label> Save drawing graphics <calcite-button id="savegrahicsBtn" scale="s">Save</calcite-button> </calcite-label> </calcite-accordion-item> </calcite-accordion> </calcite-panel>  <calcite-panel heading="Site check" width-scale="l" headingLevel=3 alignment="center" id="sitecheckPanel" hidden> <calcite-action id="sitecheckhelp" icon="question" text="Help" slot="header-actions-end"></calcite-action> <calcite-label scale="s" alignment="center" color="red"> <b>Caution!</b> Complex shapes and/or too many layers may result in slow site checks or error messages. <br /> <b> Ensure all the layers you want to search are turned on in the table of contents. </b> <b> Define Area of Interest on the map using one of the following buttons: </b> </calcite-label> <calcite-block id="headingBlock1"> <calcite-action icon="pin" title="Draw a point" scale="s" slot="control" id="sitecheckpointBtn"></calcite-action> <calcite-action icon="line" title="Draw a polyline" scale="s" slot="control" id="sitecheckpolylineBtn"></calcite-action> <calcite-action icon="polygon" title="Draw a polygon" scale="s" slot="control" id="sitecheckpolygonBtn"></calcite-action> <calcite-action icon="trash" title="Clear graphics" scale="s" slot="control" id="sitecheckclearBtn"></calcite-action> </calcite-block> <br /> <calcite-label scale="s" for="bufferNum" layout="inline" style="padding-left:10px;"> <b>Buffer Shapes(optional)</b> <calcite-input-number id="bufferNum" integer=true suffix-text="meters" min="0" max="30000" placeholder="1" step="2" scale="s" number-button-type="horizontal" style="padding-right:10px;"> </calcite-input-number> </calcite-label> <calcite-button style="padding-left: 80px; padding-right: 80px" alignment="center" id="bufferBtn" scale="s"> Buffer </calcite-button> <calcite-label for="cbNullresults" scale="s" alignment="center" layout="inline" id="lblNullresults"> <br /><br /> <b>Tick to exclude null results</b> <calcite-checkbox id="cbNullresults" checked="true"></calcite-checkbox> </calcite-label> <calcite-button slot="footer" id="runsitecheckBtn" width="auto"> Perform Site Check </calcite-button> </calcite-panel> </div> <div id="divXYLocation"> <span id="coordinatesspan"></span> <span id="gridrefspan"></span> <span id="mapscalespan"></span> </div> <div id="divextenttools" class="esri-widget"> <calcite-button appearance="outline" kind="neutral" icon-start="arrow-bold-left" id="zoomprevButton" label="Back Extent"></calcite-button> <calcite-tooltip placement="bottom-start" reference-element="zoomprevButton" style="border: 1px solid black;"> <span>Zoom to previous extent</span> </calcite-tooltip> <calcite-button appearance="outline" kind="neutral" icon-start="arrow-bold-right" id="zoomnextButton" label="Forward Extent"></calcite-button> <calcite-tooltip placement="bottom-start" reference-element="zoomnextButton" style="border: 1px solid black;"> <span>Zoom to next extent</span> </calcite-tooltip> </div>  <calcite-modal id="point-outline-modal" style="--calcite-modal-scrim-background: rgba(255,255, 255,0.1); --calcite-modal-width:250px; background-color: rgba(255,255, 255,0.1); "> <h3 slot="header">SimpleLineSymbol</h3> <div slot="content"> <calcite-label> width <calcite-input min="0" placeholder="Placeholder" type="number" scale="s" id="point-sls-width-input"> </calcite-input> </calcite-label> <calcite-label> color <calcite-input placeholder="Placeholder" type="color" scale="s" id="point-sls-color-input" format="rgb"> </calcite-input> </calcite-label> </div> </calcite-modal>  <calcite-modal id="polygon-outline-modal" style="--calcite-modal-scrim-background: rgba(255,255, 255,0.1); --calcite-modal-width: 250px; background-color: rgba(255,255, 255,0.1);"> <h3 slot="header">SimpleLineSymbol</h3> <div slot="content"> <calcite-label> style <calcite-select scale="s" id="polygon-sls-style-select"> <calcite-option disabled selected id="blankOption">choose a style</calcite-option> <calcite-option value="dash">dash</calcite-option> <calcite-option value="dash-dot">dash-dot</calcite-option> <calcite-option value="dot">dot</calcite-option> <calcite-option value="long-dash">long-dash</calcite-option> <calcite-option value="long-dash-dot">long-dash-dot</calcite-option> <calcite-option value="long-dash-dot-dot">long-dash-dot-dot</calcite-option> <calcite-option value="none">none</calcite-option> <calcite-option value="short-dash">short-dash</calcite-option> <calcite-option value="short-dash-dot">short-dash-dot</calcite-option> <calcite-option value="short-dash-dot-dot">short-dash-dot-dot</calcite-option> <calcite-option value="short-dot">short-dot</calcite-option> <calcite-option value="solid">solid</calcite-option> </calcite-select> </calcite-label> <calcite-label> width <calcite-input min="0" placeholder="Placeholder" type="number" scale="s" id="polygon-sls-width-input"> </calcite-input> </calcite-label> <calcite-label> color <calcite-input placeholder="Placeholder" type="color" scale="s" id="polygon-sls-color-input" format="rgb"> </calcite-input> </calcite-label> </div> </calcite-modal>  <calcite-modal aria-labelledby="scmodal-title" id="sitecheckResults" style="--calcite-modal-scrim-background:rgba(255,255, 255,0.1); background-color: rgba(255,255, 255,0.1);"> <div slot="header" id="scmodal-title"> Site Check Results </div> <div slot="content"> <div id="divIdentifyData" /> </div> <div class="content-bottom"> <slot name="content-bottom"> <calcite-button id="sitechckExporttocsvBtn" slot="primary" alignment="center" appearance="solid" kind="brand" scale="l" type="button" width="auto" calcite-hydrated=""> Export to CSV </calcite-button> <calcite-button id="sitechckPrintBtn" slot="primary" alignment="center" appearance="solid" kind="brand" scale="l" type="button" width="auto" calcite-hydrated=""> Print </calcite-button> </slot> </div> </calcite-modal> </calcite-shell> </body> </html>

CINXE.COM

Magic Map Application