CINXE.COM
Georeferenced Maps - Map images - National Library of Scotland
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!--[if gt IE 1]><html xmlns="http://www.w3.org/1999/xhtml" class="ie"><![endif]--> <!--[if !IE]><!--><html xmlns="http://www.w3.org/1999/xhtml"><!--<![endif]--> <html xmlns="http://www.w3.org/1999/xhtml/" lang="en" xml:lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/> <meta name="Description" content="View georeferenced historic maps as overlays on modern satellite and map layers" /> <title>Georeferenced Maps - Map images - National Library of Scotland</title> <link type="text/css" rel="stylesheet" href="/assets/css/maps-chrome.css?v=20240819" media="screen" /> <link type="text/css" rel="stylesheet" href="/assets/css/maps-chrome-mapviewer.css?v=20240819" media="screen" /> <link type="text/css" rel="stylesheet" href="/assets/css/maps-content-forms.css?v=202212" media="screen" /> <link type="text/css" rel="stylesheet" href="/assets/css/maps-content-general.css" media="screen" /> <link type="text/css" rel="stylesheet" href="/assets/css/maps-content-mapviewer.css?v=20240819" media="screen" /> <link type="text/css" rel="stylesheet" href="/assets/css/GpPluginOpenLayers.css?v=20240819" media="screen" /> <link type="text/css" rel="stylesheet" href="/assets/css/openlayers6.15explore.css?v=20240819" /> <link type="text/css" rel="stylesheet" href="/assets/css/viewer-print.css?v=20240819" media="print" /> <link type="text/css" rel="stylesheet" href="/assets/css/mobile.css?v=20240819" media="screen and (min-width : 320px) and (max-width : 850px) " /> <link type="text/css" rel="stylesheet" href="/assets/css/jquery.fancybox.css" /> <link rel="stylesheet" href="/assets/css/ol-ext.css?v=20240819" /> <link type="text/css" rel="stylesheet" href="/assets/css/bootstrap-slider.css" type="text/css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js" ></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css"/> <!-- <script src="https://region-eu.libanswers.com/load_chat.php?hash=aba58fd4ff00e2846a6ff34866abca38492095ef43725efaa5d4493b89783e56"></script> <script src="https://region-eu.libanswers.com/load_chat.php?hash=aba58fd4ff00e2846a6ff34866abca38492095ef43725efaa5d4493b89783e56"></script> <script src="https://api2-eu.libanswers.com/1.0/widgets/7309"></script> <script src="https://api2-eu.libanswers.com/1.0/widgets/7376"></script> --> <script src=https://natlibscot.libanswers.com/load_chat.php?hash=aba58fd4ff00e2846a6ff34866abca38492095ef43725efaa5d4493b89783e56></script> <style> .slider .tooltip.bs-tooltip-top { top: -34px !important; margin-top: 10px !important;float:right;} #dateIDslider.slider { margin-top: 5px; } @media only screen and (min-width: 850px) { #explorebuttontoggle { position:absolute; top: 56px; left:330px; background-color:#9dc1ef; border: 2px solid #592F57; border-bottom-left-radius: 6px; border-top-left-radius: 6px;padding: 0px 10px 0px 10px; font-size: 15px; } } @media only screen and (max-width: 850px) { #explorebuttontoggle { position:absolute; top: 63px; left:auto; background-color:#9dc1ef; border: 2px solid #592F57; border-bottom-left-radius: 6px; border-top-left-radius: 6px;padding: 0px 10px 0px 10px; font-size: 14px; } } // #findbuttontoggle:active{ color:#FFFFFF; } @media only screen and (min-width: 850px) { #explorefullbuttontoggle { position:absolute; top: 56px; left:440px; background-color:#e6e6e6; border: 1px solid #592F57; padding: 1px 10px 1px 10px; font-size: 14px; } } @media only screen and (max-width: 850px) { #explorefullbuttontoggle { position:absolute; top: 63px; margin-left:113px; background-color:#e6e6e6; border: 1px solid #592F57; padding: 1px 10px 1px 10px; font-size: 12px; } } #explorefullbuttontoggle:hover { background-color:#c8d9ef; } @media only screen and (min-width: 850px) { #explore3Dbuttontoggle { position:absolute; top: 56px; left:573px; background-color:#e6e6e6; border: 1px solid #592F57; padding: 1px 10px 1px 10px; font-size: 14px; } } @media only screen and (max-width: 850px) { #explore3Dbuttontoggle { position:absolute; top: 63px; margin-left:238px; background-color:#e6e6e6; border: 1px solid #592F57; padding: 1px 10px 1px 10px; font-size: 12px; } } #explore3Dbuttontoggle:hover { background-color:#c8d9ef; } @media only screen and (min-width: 850px) { #explorespybuttontoggle { position:absolute; top: 56px; left:616px; background-color:#e6e6e6; border: 1px solid #592F57; border-bottom-right-radius: 6px; border-top-right-radius: 6px;padding: 1px 10px 1px 10px; font-size: 14px; } } @media only screen and (max-width: 850px) { #explorespybuttontoggle { position:absolute; top: 63px; margin-left:285px; background-color:#e6e6e6; border: 1px solid #592F57; border-bottom-right-radius: 6px; border-top-right-radius: 6px; padding: 1px 10px 1px 10px; font-size: 12px; } } #explorespybuttontoggle:hover { background-color:#c8d9ef; } @media only screen and (min-width: 50rem) { #newsbuttontoggle { position:absolute; top: 56px; left:670px; background-color:#f09f54; border: 1px solid #592F57; border-bottom-right-radius: 6px; border-top-right-radius: 6px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; padding: 1px 10px 1px 10px; font-size: 14px; } } @media only screen and (max-width: 53rem) { #headerSearchFormSearchBox, .headerSearchForm { display: none; } } @media only screen and (min-width: 50rem) { #header #re-use { position: absolute; right: 0; bottom: 32px; margin: 0px 6px 0px 0; font-size: 0.8em; padding: 0; } } @media only screen and (max-width: 50rem) { #header #re-use { display: none; } } @media only screen and (min-width: 44rem) { #picture { display: block; } } @media only screen and (max-width: 44rem) { #picture { display: none; } } @media only screen and (min-width: 850px) { #mapViewerGeoRefMaps .ol-scale-line {left: 95px;bottom: 45px;} } @media only screen and (max-width: 850px) { #mapViewerGeoRefMaps .ol-scale-line {left: 95px;bottom: 0.7em;} } @media only screen and (min-width: 850px) { #mapViewerGeoRefMaps .ol-zoom{bottom:44px!important;left:.4em} } @media only screen and (max-width: 850px) { #mapViewerGeoRefMaps .ol-zoom{bottom:auto;left:.4em} } @media only screen and (min-width: 850px) { #mapViewerGeoRefMaps #footerMenuSite { padding: 0 50px 0 0; } } @media only screen and (max-width: 850px) { #mapViewerGeoRefMaps #footerMenuSite { padding: 0 0 0 0; } } @media only screen and (min-width: 850px) { .s-lch-widget-float { font-size: 8px; } } @media only screen and (max-width: 850px) { .s-lch-widget-float { display: none !important; padding: 0 !important; font-size: 0em !important; bottom: 0 !important; right: 0 !important; } } @media only screen and (min-width: 850px) { .s-lch-widget-float-btn { background-color: #B35C09 !important; width: 3.0em !important; height: 2.3em !important; padding: 0.25em 0.5em 0.5em 0.5em !important; position: fixed !important; bottom: 2px !important; right: 2px !important; } } @media only screen and (max-width: 850px) { .s-lch-widget-float-btn { display: none !important; padding: 0 !important; font-size: 0em !important; bottom: 0 !important; right: 0 !important; } } </style> <script type="text/javascript"> window.dataLayer = [{ 'gtm.blocklist': ['nonGooglePixels'] }]; function gtag(){dataLayer.push(arguments);} gtag('consent', 'default', { 'ad_storage': 'denied', 'analytics_storage': 'denied', 'functionality_storage': 'denied', 'personalization_storage': 'denied', 'security_storage': 'denied' }); </script> <script type="text/javascript">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-WN8LDXKJ');</script> </head> <body id="mapViewerGeoRefMaps"> <a class="skiplink" href="#map">Go to map</a> <div id="header" role="banner" style="top:0px !important"> <a href="https://www.nls.uk/"><img id="NLSLogo" src="https://maps.nls.uk/assets/graphics/nls_logo_notext.png" width="131" height="58" alt="National Library of Scotland" class="prevent-select" /></a> <h1 id="siteTitle" class="prevent-select"><a href="https://maps.nls.uk/">Map images</a></h1> <div id="pageTitle" role="main" class="prevent-select"><a href="javascript:setURL();" alt="View individual sheet maps of this area" title="View individual sheet maps of this area" class="prevent-select">Map Finder</a> | Georeferenced Maps | <a href="javascript:sidebysideURL();" alt="View split-screen georeferenced maps of this area" title="View split-screen georeferenced maps of this area">Side by Side</a></div> <div class="container"> <div id="explorebuttontoggle" class="prevent-select"><strong>as Overlays</strong></div> <div id="explorefullbuttontoggle" class="prevent-select"><a href="javascript:printURL();">Full Screen/Draw</a></div> <div id="explore3Dbuttontoggle" class="prevent-select"><a href="javascript:cesiumURL();">3D</a></div> <div id="explorespybuttontoggle" class="prevent-select"><a href="javascript:spyURL();">Spy</a></div> </div> <!-- <div id="newsbuttontoggle"><a href="https://www.nls.uk/service-disruption" target="remotes">Downtime - 28 March</a></div> --> <script type="text/javascript" src="/assets/scripts/searchText.js"></script> <form action="https://www.google.com/cse" method="get" class="headerSearchForm"> <input type="hidden" name="cx" value="004988112283334510717:dtvnxsp4ug8" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="submit" value="" id="headerSearchFormSubmitButton" alt="keyword search button" title="keyword search button" /> <label for="headerSearchFormSearchBox" id="headerSearchFormLabel" >Search:</label> <input type="text" name="q" id="headerSearchFormSearchBox" value="" /> </form> <div id="re-use" class="prevent-select"></div> <div id="bar" class="prevent-select"> <p id="URHere" class="prevent-select"></p> </div> </div> <div id="Modal" class="modal" class="hidden"> <!-- Modal content --> <div class="modal-content" class="hidden"> <span class="modal-close" class="hidden">×</span> <div id="modal-text" class="hidden"></div> </div> </div> <button id="show" class="hidden" title="Search on placenames, coordinates or use geolocation to position the map"></button> <div id="exitfullscreen-img" class="hidden"><img src="/geo/img/compress.png" alt="exit full screen icon image" width="28" /></div> <div id="fullscreen-img" class="hidden"><img src="/img/fullscreen-48.png" alt="geolocation icon image" width="28" /></div> <div id="searchSideBar" class="hidden" aria-labelledby="searchSideBarLabel"> <button type="button" id="hide2" class="close" aria-label="Close" class="hidden" class="prevent-select"> <span aria-hidden="true" class="prevent-select">×</span> </button> <div id="searchSideBarheader" class="prevent-select"> <img src="https://maps.nls.uk/geo/img/move.png" width="30" alt="Move icon" title="Move icon" class="prevent-select" /> </div> <br /> <p style="z-index:14000;white-space: nowrap;padding:0 10px 0 40px; font-size:1.1em !important;font-weight: bolder;" id="searchSideBarLabel" class="prevent-select">Search:</p> <p style="z-index:14000;white-space: nowrap;padding:0 10px 0 0"><label for="nlsgaz">Modern Placenames</label><input type="radio" id="nlsgazareauk" name="nlsgazarea" title="United Kingdom places" value="uk" checked>UK <input type="radio" id="nlsgazareaworld" name="nlsgazarea" title="World places" value="">World</p> <div class="tooltip2"> <p style="z-index:14000;"><input type="search" autocomplete="off" id="nlsgaz" onfocus="if(this.value == 'Type a modern placename...') { this.value = ''; }" onblur="this.value=!this.value?'Type a modern placename...':this.value;" value="Type a modern placename..." name="nlsgaz" /> or <p> <span class="tooltiptext">Search using a current placename (eg. towns, farms, streets) from Nominatim / OpenStreetMap, as well as the Definitive Gazetteer for Scotland</span> </div> <div id="ngrsearch"> <p style="z-index:14000;" class="prevent-select"><label for="ngrgaz">National Grid Ref., Lat,Lon or Postcode:</label></p> <div class="tooltip2"> <p style="z-index:14000;white-space: nowrap;display: inline-block;margin-right:5px;"><input type="search" autocomplete="off" id="ngrgaz" onfocus="if(this.value == 'Type NGR, lat,lon or postcode...') { this.value = ''; }" onblur="this.value=!this.value?'Type NGR, lat,lon or postcode...':this.value;javascript:document.getElementById('search-button-ngrgaz').style.color = '#706e6e';" value="Type NGR, lat,lon or postcode..." name="ngrgaz" /> <div id="search-button-ngrgaz" onclick="javascript:postcodegaz(document.getElementById('ngrgaz').value)" class="prevent-select">Go</div></p> <span class="tooltiptext">Search using a National Grid Reference in various forms:<br/>"NT27", "NT 263 721", "NT263721", "NT2637572134", "326375,672134", <br/>or latitude,longitude: "52.456,-2.123",<br/> or Postcode "EH", "EH9", "EH9 1", "EH9 1SL", "EH91SL" </span> </div> </div> <div id="gb1900search" style="padding: 5px; background-color:rgba(0, 0, 153, 0.1); border-radius:1px; margin-bottom: 3px;" class="prevent-select"> <p><label for="searchgb1900" class="prevent-select">OS six-inch 1888-1913 names:</label></p> <div class="tooltip2"> <p><input type="search" autocomplete="off" id="searchgb1900" style="width:195px;" onfocus="if(this.value == 'Type an 1888-1913 name...') { this.value = ''; }" onblur="this.value=!this.value?'Type an 1888-1913 name...':this.value;" value="Type an 1888-1913 name..." /></p> <span class="tooltiptext">Search an historic name from the GB1900 gazetteer of names on the OS six-inch 1888-1913 maps</span> </div> </div> <div id="trenchmapsearch" style="padding: 5px; background-color:rgba(0, 0, 153, 0.1); border-radius:1px; margin-bottom: 3px;" class="prevent-select"> <p class="prevent-select"><label for="searchtrenchmap"- >Search Trench Map Coordinates:</label></p> <div class="tooltip2"> <input type="search" autocomplete="off" id="searchtrenchmap" style="width:215px;" onfocus="if(this.value == 'Type Trench Map Coordinates...') { this.value = ''; }" onblur="this.value=!this.value?'Type Trench Map Coordinates...':this.value;" value="Type Trench Map Coordinates..." class="prevent-select"/> <span class="tooltiptext">Search using Trench Map Coordinates, eg.<br/>28.I.8<br/>36C.S.22.c<br/>62d.J.19.b.4.3</span> </div> </div> <div id="countysearch" > <p class="prevent-select"><label for="county">County / Parish:</label> <select id="county" name="county"></select></p> <p id="parish_span" class="prevent-select"><label for="parish">Parish:</label> <select id="parish" name="parish"></select></p> </div> <div id="trackgeolocation" class="prevent-select"><div class = "searchPanel-img"><img src="/img/geolocation.png" alt="geolocation icon image" width="28" /></div> <label for="track"> Show my location? <input id="track" type="checkbox"/> </label> <div id="zoomtogeolocation" class="prevent-select" class="hidden" ></div> <div id="info" style="display: none;"></div> </div> </div> <button id="showlayersOutlinesExplore" class="hidden" title="Choose historic map overlay layers for viewing" class="prevent-select"></button> <div id="layersSideBarOutlines" class="hidden" class="prevent-select"> <div id="layersSideBarOutlinesheader"> <img src="https://maps.nls.uk/geo/img/move.png" width="30" alt="Move icon" title="Move icon" class="prevent-select" /> </div> <button type="button" id="hidelayers" class="close" aria-label="Close" class="hidden" class="prevent-select" class="prevent-select"> <span aria-hidden="true" class="prevent-select">×</span> </button> <br/> <h4 style="margin-top:5px;" class="prevent-select">Choose an historic map overlay:</h4> <div class="tooltip3"> <div id="splitlist" class="prevent-select" class="hidden" style="border: 1px solid #636363;padding:2px 3px 3px 3px; margin: 0 0 5px 0; background-color: #e2e2e2;max-width:290px"> <p class="prevent-select"><label for="overlaySelectNode" >1. Select a category:</label><select id="overlaySelectNode" onchange="javascript:loadOverlayNode();switchOverlay();" style="margin-top: 4px"></select></p> <p class="prevent-select"><label for="overlaySelectLayer" >2. Select a map / map series:</label><select id="overlaySelectLayer" onchange="javascript:switchOverlay();" style="margin-top: 4px"></select></p> <p id="zoomtoextent" style="font-size:0.9em;max-width:290px" alt="Zoom the map to view the full extent of the layer above" title="Zoom the map to view the full extent of the layer above"><a href="javascript:zoomtoextent();" class="prevent-select">Zoom to this layer's extents</a> <span style="font-weight:normal;font-size:0.95em; float:right;border: 1px solid #636363;padding:2px 3px 3px 3px;background-color:#f8f8f8" alt="View the list of overlays above as a single list" title="View the list of overlays above as a single list" onmouseover="this.style.backgroundColor='#d9d9d9'" onmouseout="this.style.backgroundColor='#f8f8f8'"><a href="javascript:singleList();" >View single List</a></span></p> </div> <span class="tooltiptext">Browse and select overlay layers as a split-list - using both drop-down lists</span> </div> <div class="tooltip3"> <div id="singlelist" class="prevent-select" class="hidden" style="border: 1px solid #636363;padding:2px 3px 3px 3px; margin: 0 0 5px -5px; background-color: #e2e2e2" > <div class="sortlist" style="z-index:14000;white-space: nowrap;padding:0 10px 4px 0;font-size:0.8em" class="prevent-select" > <label for="sort" >Sort list below by </label> <input type="radio" id="sortrelevance" name="sort" value="relevance" title="Sort list by relevance" checked >Relevance <input type="radio" id="sortscale" name="sort" title="Sort list by scale" value="scale" >Scale <input type="radio" id="sortdate" name="sort" value="date" title="Sort list by dates" >Date </div> <select id="overlaySelectdropdown" onchange="changeoverlay(this.selectedIndex)" title="change overlay layer" class="prevent-select"></select> <p id="zoomtoextent" style="font-size:0.9em;" alt="Zoom the map to view the full extent of the layer above" title="Zoom the map to view the full extent of the layer above"><a href="javascript:zoomtoextent();" class="prevent-select">Zoom to this layer's extents</a> <span style="font-weight:normal;font-size:0.95em; float:right;border: 1px solid #636363;padding:2px 3px 3px 3px;background-color:#FCFCFC" alt="View the list of overlays above as two-level split list" title="View the list of overlays above as a two-level split list" onmouseover="this.style.backgroundColor='#d9d9d9'" onmouseout="this.style.backgroundColor='#f8f8f8'""><a href="javascript:splitLists();" >View split lists</a></span></p> </div> <span class="tooltiptext">Browse and select overlay layers as a single list. Sort by relevance, scale, or date</span> </div> <div class = "showfilters" style="margin: 2px 0 5px 0;font-size:0.9em;padding: 0 5px 0 5px;"><!-- <span style="background-color:#f8b271;padding:3px">New (Aug 2024)</span> --> Filter overlays</div> <div id = "filters" style="border: 1px solid #636363;padding:3px;margin:0 0 5px 0" class="hidden" class="prevent-select"> <div id="dateslide" > <div id="layerdatefilterzoom" style="margin: 0 0 5px 0px;float:left;width:240px;" class="prevent-select"> <h4>Filter overlays by date</h4></div> <div class="tooltip2"> <input id="dateslider" data-slider-id='dateIDslider' type="text" data-slider-min="1740" data-slider-max="2000" data-slider-value="[0,0]" title="Filter returned maps by date" /> <span class="tooltiptext">(Optionally) filter the overlay layers by date</span> </div> </div> <div id="scaleslide"> <h4>Filter overlays by scale</h4> <div class="tooltip2"> <span id="scalerange" style="display:block;font-size:0.8em;color:white;background-color:black;border-radius:3px;padding:3px;margin: auto;width: 150px;text-align: center;white-space: nowrap;"></span> <input id="scaleslider" data-slider-id='scaleIDslider' type="text" data-slider-value="[12,20]" data-slider-ticks="[12, 13, 14, 15, 16, 17, 18, 19, 20]" data-slider-ticks-snap-bounds="1" data-slider-ticks-positions="[0, 12, 24, 36, 48, 60, 72, 86, 100]" data-slider-tooltip="hide" /> <span class="tooltiptext">(Optionally) filter the overlay layers by scale</span> </div> <br/> <div id="container" style="display:inline-block;width:100%;"><div class="float-left">Small scale</div><div class="float-right">Large scale</div></div> <div id="container" style="display:inline-block;width:100%;"> <input id="layerfiltercheckbox" type="checkbox" title="Filter maps in the drop-down list by scale" style="clear:both;float:left;display:inline-block" /> <div id="layerfilterzoom" style="margin: 3px 0 5px 0px;float:left;" class="prevent-select"><em>or</em> Filter by scale automatically (on map zoom)</div></div> </div> <div id="keyword-search" > <h4>Filter overlays by keyword</h4> <div class="tooltip2"> <p style="z-index:14000;white-space: nowrap;display: inline-block;margin-right:5px;" class="prevent-select"><input type="search" autocomplete="off" id="keywordsearch" onfocus="if(this.value == 'Type keyword...') { this.value = ''; }" onblur="this.value=!this.value?'Type keyword...':this.value;javascript:document.getElementById('search-button-keywordsearch').style.color = '#706e6e';" value="Type keyword..." name="keywordsearch" /> <div id="search-button-keywordsearch" onclick="javascript:keywordsearchgaz(document.getElementById('keywordsearch').value)" class="prevent-select">Search</div></p> <span class="tooltiptext">(Optionally) filter the overlay layers by keyword</span> </div> </div> <div id="keyword" class="prevent-select" class="hidden"> <div class="tooltip2"> <h4>Filter overlays by keyword</h4><input type="text" id="filteroverlaysinput" onkeyup="filterlist()" onfocus="if(this.value == 'Type keyword...') { this.value = ''; }" onblur="this.value=!this.value?'Type keyword...':this.value;" value="Type keyword..." > <span class="tooltiptext">(Optionally) filter the overlay layers by keyword</span> </div> </div> <div id="clearfilters" class="hidden"><a href="javascript:clearfilters();">Clear filters</a></div> </div> <div id="layerinfo" style="clear:both;font-size:0.85em;padding:3px;background-color:rgba(0, 0, 153, 0.1);border-radius:1px;margin-bottom: 3px;width:290px;" class="prevent-select"></div> <div id="exploreslideroverlay" class="prevent-select"> <h4 class="prevent-select">Change transparency of overlay:</h4> <p class="infomapslider" class="prevent-select"> <input id="mapslider" data-slider-id='mapssliderSlider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="100" slider-tooltip="show" title="Change transparency of historic map overlay on a desktop screen size" /> </p> </div> </div> <div id="exploreslideroverlaymobile" class="hidden" class="prevent-select"> <div class="infomapslider-mobile"> <input id="mapslidermobile" data-slider-id='mapsslidermobile' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="100" title="Change transparency of historic map overlay on a mobile screen size" /> </div> </div> <div id="layerSelectDiv" class="hidden"> <select id="layerSelectdropdown" onchange="changemap(this.selectedIndex)" onfocus="geolocationMobileCheck();" title="change background layer" class="prevent-select" class="hidden"></select> <div id="layerSelectchange" class="hidden" class="prevent-select">or <a href="javascript:switchtoalllayers();" alt="View a list of all the overlays to select any as a background layer" title="View a list of all the overlays to select any as a background layer" >Choose any other layer as background</a></div> </div> <div id="layerSelectBackground" class="hidden" class="prevent-select"> <button type="button" id="hidelayerSelectBackground" class="close" aria-label="Close" class="hidden" class="prevent-select"> <span aria-hidden="true" class="prevent-select">×</span> </button> <p class="prevent-select"><label for="overlaySelectNodeRight">1. Background map - Select a category: </label><select id="overlaySelectNodeRight" onchange="javascript:loadOverlayNodeRight();switchOverlayRight();" onfocus="geolocationMobileCheck();" style="margin-top: -4px"></select></p> <p class="prevent-select"><label for="overlaySelectLayerRight">2. Background map - Select a map series: </label><select id="overlaySelectLayerRight" onchange="javascript:switchOverlayRight();" onfocus="geolocationMobileCheck();" style="margin-top: 4px"></select></p> </div> <div id="elevationprofilemessage"></div> <div id="drawControlFormElevation-div" class="hidden"><label for="myonoffswitch">Show height: </label> <div class="onoffswitch"> <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" tabindex="0" > <label class="onoffswitch-label" for="myonoffswitch" title="Switch height information of mouse cursor location off or on"> <span class="onoffswitch-inner" ></span> <span class="onoffswitch-switch" title="switch on"></span> </label> </div> <div id = "elev-result" style="font-size:0.9em" title="heights in metres and feet"></div> </div> <div id="drawControlFormProfile-div"><label for="myonoffswitchprofile">Elevation Profile: </label> <div class="onoffswitch-profile"> <input type="checkbox" name="onoffswitch-profile" class="onoffswitch-profile-checkbox" id="myonoffswitchprofile" tabindex="0" > <label class="onoffswitch-profile-label" for="myonoffswitchprofile" title="Draw a route and show its elevation profile"> <span class="onoffswitch-profile-inner"></span> <span class="onoffswitch-profile-switch"></span> </label> </div> </div> <div id="map" class="map" tabindex="0"> <div id="stopmeasuringmessage"></div> <div id="scalebar"></div> <div id="wfsParishCountyResults"></div> <div id="wfsResults" ></div> <div id="showCoordinatesinfo" class="hidden"></div> <div id="showLayersInfo" class="hidden"></div> <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer" aria-label="Close"></a> <div id="popup-content"></div> </div> <div id="googleexplore" class="hidden"></div> <div id="mapkeypanel" class="hidden"> <div id="mapkeypanelheader" style="cursor: move"> <img src="https://maps.nls.uk/geo/img/move.png" width="30" alt="Move icon" title="Move icon" id="panelmoveicon" /> <button type="button" id="mapkeypanelhide" class="close" aria-label="Close" class="hidden" ><span aria-hidden="true">×</span></button> </div> <div id="mapkeypanelcontent"></div> </div> <div id="showRoyinfo"></div> <div id="showEdinburghinfo"></div> <div id="deletesketch" class="hidden"><div id="deletesketchinfo"></div> <a href="javascript:removeTopLayer()">Remove top layer</a> | <span id="toplayervisibility"></span> <br/> <div id="deletesketchexport"> Export Format: <input type="radio" class="radio" name="exportFormat" value="KML" id="radioKML" /> <label for="radioKML" alt="Export KML file" title="Export KML file">KML</label><input type="radio" class="radio" name="exportFormat" value="GPX" id="radioGPX" /><label for="radioGPX" alt="Export GPX file" title="Export GPX file">GPX</label><input type="radio" class="radio" name="exportFormat" value="GeoJSON" id="radioGeoJSON" /><label for="radioGeoJSON" alt="Export GeoJSON file in WGS84 lat/lon projection" title="Export GeoJSON file in WGS84 lat/lon projection">GeoJSON</label> <input type="radio" class="radio" name="exportFormat" value="GeoJSONBNG" id="radioGeoJSONBNG" /><label for="radioGeoJSONBNG" alt="Download GeoJSON file in British National Grid projection" title="Download GeoJSON file in British National Grid projection">GeoJSON (BNG)</label> </div> </div> </div> <a id="autoStart" style="display:none" href="#data" alt="Georeferenced Maps - Initial Help Instructions" title="Georeferenced Maps - Initial Help Instructions"></a> <div style="display: none;"> <div id="data" > <br/> <h2>Georeferenced Maps - Help</h2> <p>This application presents a series of maps "seamed" together and aligned with their real world locations. </p> <p><span style="background-color:#f8b271;padding:3px">New (Aug 2024)</span> Switch overlay lists and filter overlays (<a href="help.html#switch-overlays">further details</a>)</p> <h3>Read the <strong><span style="background-color:#e17900;padding:3px;">Help</span></strong> to the lower left for further guidance <!--, or watch a <a href="/videos/?vid=Georeferenced-Maps-Help-2023">Help Video</a>. --></h3> <p>Click the cross (top right) to close this window.</p> <p> <a id="noShow" href="javascript:dontShow()">Don't show this message again</a> </p> </div> </div> <div class= "mobile"> <div id="geolocation-img" class="hidden"><img src="/img/geolocation.png" alt="geolocation icon image" width="28" /></div> <div id="morePanel"> <button type="button" id="closemorePanel" class="close" aria-label="Close" class="hidden"> <span aria-hidden="true">×</span> </button> <ul style="list-style: none;padding-inline-start: 0px;" > <li><div class="morePanel-img"><img src="/img/recycle.png" alt="re-use icon image" width="28" /></div><div id="re-use-mobile"></div></li> </ul> <h3>Functions</h3> <div id="wfsResults-mobile"></div> <ul style="list-style: none;padding-inline-start: 0px; font-size: 1.0em !important;" > <li><div class="morePanel-img"><img src="/img/showcoordinates.png" alt="show map coordinates icon image" width="28" /></div><a href="javascript:getcoordinates();" title="Display a popup box showing geographic coordinates of the point you click on">Show Coordinates</a></li> <li><div class="morePanel-img"><img src="/img/marker.png" alt="marker pin icon image" width="28" /></div><a href="javascript:addmarker();" title="Add a marker pin onto the map">Add Marker</a></li> <li><div class="morePanel-img"><img src="/img/legend-50.png" alt="map legend icon image" width="28" /></div><a href="javascript:getmapkey();" title="Show a legend of symbols and features for this map">Map Key</a></li> <!-- <li><div class="morePanel-img"><img src="/img/fullscreen-48.png" alt="full-screen icon image" width="28" /></div><a href="javascript:printURL();">Full-screen</a></li> --> <li><a href="javascript:addlinkmobile();" title="Create a specific URL linking to this part of the map on screen" style="text-decoration: underline;color:blue;user-select:none;cursor:pointer;vertical-align: middle;"><div class="morePanel-img"><img src="/img/link-icon.png" alt="link icon image" width="28" /></div>Link to this page</a></li> </ul> <div class="hr"></div> <h3>Links</h3> <ul style="list-style: none;padding-inline-start: 0px; font-size: 1.0em !important;" > <li><div class="morePanel-img"><img src="/img/abc-48.png" alt="abbreviations icon image" width="28" /></div><a href="/os/abbrev/" title="View Ordnance Survey abbreviations list">Ordnance Survey abbreviations</a></li> <li><div class="morePanel-img"><img src="/img/map-marker.png" alt="map marker icon image" width="28" /></div><a href="javascript:setURL();">Map Finder</a> - view maps of this area in the <em>Map Finder</em> viewer</li> <li><div class="morePanel-img"><img src="/img/sidebyside.png" alt="world icon image" width="28" /></div><a href="javascript:sidebysideURL();">Side by Side</a> - view this area in the <em>Side by Side</em> viewer</li> <li><div class="morePanel-img"><img src="/img/global-search.png" alt="global mapping search icon image" width="28" /></div><a href="javascript:geolinks();" title="View other external map websites for this location">View external mapping sites</a> for this area</li> <li><a href="/contact.html"><div class="morePanel-img"><img src="/img/contact.png" alt="contact icon image" width="28" /></div>Contact us</a></li> <li><a href="/site-map/"><div class="morePanel-img"><img src="/img/sitemap.png" alt="site map icon image" width="28" /></div>Site-map</a></li> </ul> </div> <div id="footermore" alt="More options" title="More options" class="hidden">More...</div> <div id="mobile-notification"> </div> <div id="WMTSModal" class="WMTSmodal"> <div class="modal-content"> <span class="WMTSclose">×</span> <p><strong>URL of this page: </strong><div id="WMTScontent"></div></p><a href="javascript:copyURL()"><div class="morePanel-img"><img src="/img/copy-to-clipboard.png" alt="copy icon image" width="20" /></div>Copy to clipboard</a> <div id="clipboard-response"></div> </div> </div> </div> <div id="footermobile" class="hidden"> <ul id="footerMenuViewermobile"> <li class="footerhelpmobile"><a href="help.html">Help</a></li> </ul> </div> <div id="progress-explore"></div> <div id="chart" class="hidden"> <button type="button" id="hidechart" class="close" aria-label="Close"> <span aria-hidden="true">×</span> </button> <div id="chartinfo"></div> </div> <div id="footer"> <ul id="footerMenuViewer"> <li><a href="javascript:showoverlay();" title="Re-use this georeferenced overlay in other applications">Overlay</a></li> <li><a href="javascript:geolinks();" title="View other external map websites for this location">Links</a></li> <li><a href="javascript:addmarker();" title="Add a marker pin onto the map">Add Marker</a></li> <li><a href="javascript:getcoordinates();" title="Display a popup box showing geographic coordinates of the point you click on">Show Coordinates</a></li> <li><span id = "exploremapkey"><a href="javascript:getmapkey();" title="Show a legend of symbols and features for this map">Map Key</a></span></li> <li><a href="/enquiries.cfm" title="Obtaining images and printouts, along with Frequently Asked Questions">Enquiries & Copies</a></li> <li class="footerhelp" title="Guidance on how to use this viewer"><a href="help.html" target="_blank">Help</a></li> </ul> <!-- <p id="tip">Hold [Alt] and [Shift] keys, and<br />drag cursor to rotate.</p> --> <ul id="footerMenuSite"> <li><a href="/about.html" title="Brief summary about this maps website">About</a></li> <li><a href="/contact.html" title="Contact details for enquiries">Contact</a></li> <li><a href="/site-map.html" title="Browseable overview of this maps website">Site map</a></li> <li><a href="/cookies.html" title="About the cookies we use on this website">Use of cookies</a></li> </ul> </div> <script type="text/javascript"> var GPOpenLayers = false; </script> <script type="text/javascript" src="/assets/scripts/jquery.fancybox.min.js"></script> <script type="text/javascript" src="/assets/scripts/jquery.cookie.min.js"></script> <script type="text/javascript" src="/assets/scripts/searchText.js"></script> <script type="text/javascript" src="/geo/scripts/bootstrap-slider-11.0.2.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.8.0/proj4.js"></script> <script type="text/javascript" src="/assets/scripts/accordion.js"></script> <script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script> <!-- <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script> --> <script type="text/javascript" src="/geo/scripts/ol_6_15_1.js"></script> <script type="text/javascript" src="/geo/scripts/gaz.js?v=20240819"></script> <script type="text/javascript" src="/geo/scripts/conversion.js"></script> <script type="text/javascript" src="/geo/scripts/ol-ext.js?v=20240819"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script> <script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/aa9f4e0e/FileSaver.min.js"></script> <script type="text/javascript" src="/geo/scripts/GpPluginOpenLayers.js?v=20240819"></script> <script type="text/javascript" src="/geo/scripts/globalMapTiles.js"></script> <script type="text/javascript" src="/geo/scripts/elevationProvider.js"></script> <!-- <script type="text/javascript" src="https://ignf.github.io/geoportal-extensions/openlayers-latest/dist/GpPluginOpenLayers.js" data-key="essentiels" ></script> --> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script> <script type="text/javascript" src="/geo/scripts/chartist-plugin-axistitle.js"></script> <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script> <script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/aa9f4e0e/FileSaver.min.js"></script> --> <script type="text/javascript" src="/geo/scripts/20240819/explore-layers-ol6.js"></script> <script type="text/javascript" src="/geo/scripts/20240819/explore-ol6.js"></script> <script type="text/javascript" src="/geo/scripts/20240819/filecachecheck.js"></script> <script> const filecacheversion = 20240819 <!-- var windowWidth = $(window).width(); var windowHeight = $(window).height(); if ((windowWidth >= 850) && (windowHeight >= 300)) { if ($("#searchSideBar") != null ) { jQuery("#searchSideBar").show(); } if ($("#show") != null ) { jQuery("#show").hide(); } } else { if ($("#searchSideBar") != null ) { jQuery("#searchSideBar").hide(); } if ($("#show") != null ) { jQuery("#show").show(); } } --> jQuery("#show").click(function(){ jQuery("#searchSideBar").show(); jQuery("#show").hide(); }); var windowWidth = $(window).width(); var windowHeight = $(window).height(); jQuery("#hide").click(function(){ jQuery("#searchSideBar").hide(); $('#map').focus(); }); jQuery("#hide2").click(function(){ jQuery("#searchSideBar").hide(); jQuery("#show").show(); $('#map').focus(); }); jQuery("#hidechart").click(function(){ stopmeasuringElevation(); $('#map').focus(); }); jQuery("#hidelayers").click(function(){ jQuery("#layersSideBarOutlines").hide(); jQuery("#showlayersOutlinesExplore").show() var windowWidth = $(window).width(); if ($("#date") != null ) { jQuery("#date").hide(); } // if (!$("#layersSideBarOutlines").is(":visible")) { jQuery("#showlayersOutlinesExplore").show(); } if (windowWidth <= 850) { jQuery("#exploreslideroverlaymobile").show(); jQuery("#exploreslideroverlay").hide(); } else { jQuery("#exploreslideroverlay").show(); jQuery("#exploreslideroverlaymobile").hide(); } $('#map').focus(); }); jQuery("#hidelayerSelectBackground").click(function(){ switchtosinglelayers(); }); jQuery("#showlayersOutlinesExplore").click(function(){ jQuery("#layersSideBarOutlines").show(); jQuery("#date").show(); jQuery("#showlayersOutlinesExplore").hide(); jQuery("#exploreslideroverlaymobile").hide(); splitLists(); }); jQuery("#show").click(function(){ jQuery("#searchSideBar").show(); jQuery("#show").hide(); }); jQuery("#footermore").click(function(){ jQuery("#morePanel").show(); jQuery("#footermore").hide(); }); jQuery("#closemorePanel").click(function(){ jQuery("#morePanel").hide(); // document.getElementById("WMTSModal").style.display = "none"; jQuery("#footermore").show(); }); jQuery("#mapkeypanelhide").click(function(){ jQuery("#mapkeypanel").hide(); $('#map').focus(); }); function openFancy(){ setTimeout( function() {$('#autoStart').trigger('click'); },500); // show after a half-second } // create cookie on button click function dontShow(){ $.fancybox.close(); // optional $.cookie('NLS-visited-explore-2024', 'yes', { expires: 80 }); // expiration in 80 days } $(document).ready(function() { var visited = $.cookie('NLS-visited-explore-2024'); // create cookie 'visited' with no value if (visited == 'yes') { return false; } else { openFancy(); // cookie has no value so launch fancybox on page load } if ( $(window).height() >= 400 ) { $('#autoStart').fancybox({ closeClickOutside : true, onComplete: function() { if(history.pushState) { history.pushState(null, null, '#'); } else { location.hash = '#'; } } }); } }); map.addControl(new ol.control.CanvasAttribution({ canvas: true })); // Add a title control map.addControl(new ol.control.CanvasTitle({ title: 'my title', visible: false, style: new ol.style.Style({ text: new ol.style.Text({ font: '20px "Lucida Grande",Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif'}) }) })); // Print control var printControl = new ol.control.PrintDialog(); printControl.setSize('A4'); map.addControl(printControl); map.addControl(new ol.control.CanvasScaleLine()); // Print control var printControl = new ol.control.PrintDialog({ // target: document.querySelector('.info'), // targetDialog: map.getTargetElement() // save: false, // copy: false, // pdf: false }); printControl.setSize('A4'); map.addControl(printControl); printControl.on(['print', 'error'], function(e) { jQuery(".ol-attribution").hide(); // Print success if (e.image) { if (e.pdf) { // Export pdf using the print info var pdf = new jsPDF({ orientation: e.print.orientation, unit: e.print.unit, format: e.print.size }); pdf.addImage(e.image, 'JPEG', e.print.position[0], e.print.position[0], e.print.imageWidth, e.print.imageHeight); // console.log("e.print.imageHeight: " + e.print.imageHeight); pdf.save(e.print.legend ? 'legend.pdf' : 'map.pdf'); } else { // Save image as file e.canvas.toBlob(function(blob) { var name = (e.print.legend ? 'legend.' : 'map.')+e.imageType.replace('image/',''); saveAs(blob, name); }, e.imageType, e.quality); } } else { console.warn('No canvas to export'); } }); </script> <script src="https://cc.cdn.civiccomputing.com/9/cookieControl-9.x.min.js"></script> <script> var config = { accessibility: { highlightFocus: true }, apiKey: '3d9230ebba83d7ae7c0ddd3135c1ba1fe3b8af77', product: 'PRO', initialState: "notify", notifyDismissButton: "false", subDomains: true, logConsent: true, consentCookieExpiry: 90, necessaryCookies: ['JSESSIONID', 'UID', 'PSET', 'CF*', 'SSA*', 'NLS*'], optionalCookies: [ { name : 'analytics', label: 'Analytical Cookies', description: 'Analytical cookies help us to improve our website by collecting and reporting information on its usage. Even if set to On, your IP address is anonymized.', cookies: ['_ga', '_ga*', '_gid', '_gat', '__utma', '__utmt', '__utmb', '__utmc', '__utmz', '__utmv'], recommendedState: true, onAccept : function(){ gtag('consent', 'update', {'analytics_storage': 'granted'}); }, onRevoke: function(){ gtag('consent', 'update', {'analytics_storage': 'denied'}); }, initialConsentState : 'off' } ], position: 'LEFT', theme: 'DARK', branding: { backgroundColor: "#037bc1", toggleColor: "#0077a7", toggleBackground: "#2f2f5f", removeIcon: true, removeAbout: true } }; CookieControl.load( config ); </script> </body> </html>