Side by side georeferenced maps viewer - Map images

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"> <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="Compare georeferenced historic maps in a split-screen viewer side-by-side with other map layers" /> <title>Side by side georeferenced maps viewer - Map images - National Library of Scotland</title> <link type="text/css" rel="stylesheet" href="/assets/css/maps-chrome.css?v=20240816" media="screen" /> <link type="text/css" rel="stylesheet" href="/assets/css/maps-chrome-mapviewer.css?v=20240816" media="screen" /> <link type="text/css" rel="stylesheet" href="/assets/css/GpPluginOpenLayers.css?v=20240816" media="screen" /> <link type="text/css" rel="stylesheet" href="/assets/css/openlayers6.15.css?v=20240816" /> <link rel="stylesheet" href="/assets/css/ol-ext.css?v=20240816" /> <link type="text/css" rel="stylesheet" href="/assets/css/maps-content-forms.css?v=202301" 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=20240816" media="screen" /> <link rel="stylesheet" href="/assets/css/viewer-print.css" type="text/css" media="print" /> <link type="text/css" rel="stylesheet" href="/assets/css/mobile.css?v=20240816" media="screen and (min-width : 320px) and (max-width : 850px) " /> <link type="text/css" rel="stylesheet" href="/assets/css/jquery.fancybox.css" /> <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" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <style> .slider .tooltip.bs-tooltip-top { top: -36px !important; margin-top: 12px !important;float:right;} #dateIDslider.slider { margin-top: 10px; } #swipetoggle { position: absolute; top: 5px; right: 5px; font-size: 0.9em; } .mouse-position-left {position: absolute; bottom:65px;right:8px;font-size: 9pt;text-align: left; background: rgba(255, 255, 255, 0.5);line-height: 13pt; border-radius: 2px; user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none;} .mouse-position-right {position: absolute; bottom:65px;left:8px;font-size: 9pt;text-align: left; background: rgba(255, 255, 255, 0.5);line-height: 13pt; border-radius: 2px; user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none;} // .ol-scale-line{left:60px !important;} @media only screen and (min-width: 850px) { .ol-zoomslider{height:100px} } @media only screen and (max-width: 850px) { .ol-zoomslider{height:63px} } @media only screen and (min-width: 850px) { #showlayersOutlinesExploreright { bottom: 80px; } } @media only screen and (max-width: 850px) { #showlayersOutlinesExploreright { bottom: 40px; } } @media only screen and (min-width: 850px) { #swipetoggleOFF { position:absolute; top: 39px; left:500px; 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; -webkit-user-select: none; -ms-user-select: none; user-select: none; } } @media only screen and (max-width: 850px) { #swipetoggleOFF { position:absolute; top: 63px; left:auto; margin-left:110px; 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; -webkit-user-select: none; -ms-user-select: none; user-select: none; } } // #findbuttontoggle:active{ color:#FFFFFF; } @media only screen and (min-width: 850px) { #swipetoggleON { position:absolute; top: 39px; left:604px; 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; -webkit-user-select: none; -ms-user-select: none; user-select: none; } } @media only screen and (max-width: 850px) { #swipetoggleON { position:absolute; top: 63px; margin-left:210px; background-color:#e6e6e6; border: 1px solid #592F57; border-bottom-right-radius: 6px; border-top-right-radius: 6px;padding: 1px 10px 1px 10px; font-size: 13px; -webkit-user-select: none; -ms-user-select: none; user-select: none; } } @media only screen and (max-width: 850px) { .headerSearchForm { display: none; } } #swipetoggleON:hover{ background-color:#c8d9ef; } @media only screen and (min-width: 60rem) { #oldviewertoggle { position:absolute; top: 4px; right:16px; background-color:rgba(54, 117, 54,0.8); color:white; border: 1px solid #592F57; border-bottom-right-radius: 3px; border-top-right-radius: 3px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; text-decoration: none; padding: 1px 5px 1px 5px; -webkit-user-select: none; -ms-user-select: none; user-select: none; } } #oldviewertoggle:hover { background-color:rgba(0,100,0,0.4) } #oldviewertoggle a { text-decoration: none; color:white; font-size:0.8em; line-height: 1.3em; } @media only screen and (max-width: 60rem) { #oldviewertoggle { display: none;} #oldviewertoggle:hover { background-color:#f5d376; } } @media only screen and (max-width: 950px) { .headerSearchForm { display: none; } } .ol-attribution { display:block; white-space: initial; line-height: 1em; word-wrap: break-word; overflow: hidden; } </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="mapViewerSideBySide" > <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 home page" /></a> <h1 id="siteTitle"><a href="https://maps.nls.uk/" alt="National Library of Scotland Map Images website home page">Map images</a></h1> <div id="pageTitle" role="main"><a href="javascript:setURL();" alt="View individual sheet maps of this area" title="View individual sheet maps of this area">Map Finder</a>  |  <a href="javascript:printURLback();" alt="View georeferenced maps of this area as overlays" title="View georeferenced maps of this area as overlays">Georeferenced Maps</a>  |  Side by Side </div> <div class="container"> <div id="swipetoggleOFF" ><strong>Swipe OFF</strong></div> <div id="swipetoggleON"><a href="javascript:sidebysideswipe();" alt="Siwtch central vertical swipe bar on" title="Siwtch central vertical swipe bar on">Swipe ON</a></div> </div>  <div id="oldviewertoggle" ><a href="javascript:sidebysideold();">Go to former Side by Side viewer</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="bar"> <span id="URHere"></span><span id="URHereRight"></span> </div> </div> <div id="exitfullscreen-img" class="hidden"><img src="/geo/img/compress.png" alt="exit full screen icon image" width="28" /></div> <button id="sidebysideshow" title="Search on placenames, coordinates or use geolocation to position the map" class="hidden"></button> <div id="sidebysideSideBar" class="hidden" aria-labelledby="searchSideBarLabel"> <div id="sidebysideSideBarheader"> <img src="https://maps.nls.uk/geo/img/move.png" width="30" alt="Move icon" title="Move icon" /> </div> <button type="button" id="sidebysidehide" class="close" aria-label="Close" class="hidden"> <span aria-hidden="true">×</span> </button> <br /> <p style="z-index:14000;white-space: nowrap;padding:0 10px 0 40px; font-size:1.1em !important;font-weight: bolder;" id="searchSideBarLabel">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;"><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;"> <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)">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";> <p><label for="searchgb1900">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..." name="searchgb1900" /></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";> <p><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..." /> <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><label for="county">County / Parish:</label> <select id="county" name="county"></select></p> <p id="parish_span"><label for="parish">Parish:</label> <select id="parish" name="parish"></select></p> </div> <div id="trackgeolocation"><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> <div id="Modal" class="modal" class="hidden">  <div class="modal-content" class="hidden"> <span class="modal-close" class="hidden">×</span> <div id="modal-text" class="hidden"></div> </div> </div> <div id="mapleft"> <div id="popupleft" class="ol-popup" class="hidden"> <a href="#" id="popup-closer-left" class="ol-popup-closer" class="hidden" aria-label="Close"></a> <div id="popup-content-left" class="hidden"></div> </div> <div id="showCoordinatesinfoleft" class="hidden"></div> <div id="showLayersInfoLeft" class="hidden"></div> <div id="wfsResultsleft" ></div> <div id="googleleft" class="hidden"></div> </div> <div id="mapright"> <div id="popupright" class="ol-popup" class="hidden"> <a href="#" id="popup-closer-right" class="ol-popup-closer" class="hidden" aria-label="Close"></a> <div id="popup-content-right" class="hidden"></div> </div> <div id="showCoordinatesinforight" class="hidden"></div> <div id="showLayersInfoRight" class="hidden"></div> <div id="wfsResultsright" ></div> <div id="googleright" class="hidden"></div> </div> <button id="showlayersOutlinesExploreleft" class="hidden" title="Choose historic map layers for viewing"></button> <div id="layersSideBarOutlinesleft" class="hidden"> <button type="button" id="hidelayersleft" class="close" aria-label="Close" class="hidden"> <span aria-hidden="true">×</span> </button> <h4 style="margin-top:10px;">Choose a layer (left-hand map):</h4> <div class="tooltip3"> <div id="splitlist" class="prevent-select" 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:zoomtoextentleft();" 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:#f2f2f2" alt="View the list of layers above as a single list" title="View the list of layers above as a single list" class="listtoggle" onmouseover="this.style.backgroundColor='#d9d9d9'" onmouseout="this.style.backgroundColor='#f8f8f8'"><a href="javascript:singleList();" >View single List</a></span></p> <span class="tooltiptext">Browse and select overlay layers as a split-list - using both drop-down lists</span> </div> </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 0; 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 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:zoomtoextentleft();" 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 13px 3px 3px;background-color:#f2f2f2" alt="View the list of layers above as two-level split list" title="View the list of layers 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> <span class="tooltiptext">Browse and select overlay layers as a single list. Sort by relevance, scale, or date</span> </div> </div> <div class = "showfilters" style="margin: 2px 0 5px 0;font-size:0.9em;padding: 0 5px 0 5px;"> Filter layers</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 layers by date</h4></div> <div class="tooltip2"> <input id="dateslider" data-slider-id='dateIDslider' type="text" data-slider-min="1740" data-slider-max="2030" data-slider-value="[0,0]" title="Filter returned maps by date" /> <span class="tooltiptext">(Optionally) filter the layers by date</span> </div>   </div> <div id="scaleslide"> <h4>Filter layers 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 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 </div> </div> </div> <div id="keyword-search" > <h4>Filter layers 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" class="prevent-select" /> <div id="search-button-keywordsearch" onclick="javascript:keywordsearchgaz(document.getElementById('keywordsearch').value)" class="prevent-select">Search</div></p> <span class="tooltiptext">(Optionally) filter the layers by keyword</span> </div> </div> <div id="keyword" class="prevent-select" class="hidden"> <div class="tooltip2"> <h4>Filter layers 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..." class="prevent-select" > <span class="tooltiptext">(Optionally) filter the 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.8em;padding:1px;background-color:rgba(0, 0, 153, 0.1);border-radius:1px;margin-bottom: 5px;max-width:290px;line-height:1.2em"></div> </div> </div> <button id="showlayersOutlinesExploreright" class="hidden" title="Choose historic map layers for viewing"></button> <div id="layersSideBarOutlinesright" class="hidden"> <button type="button" id="hidelayersright" class="close" aria-label="Close" class="hidden"> <span aria-hidden="true">×</span> </button> <h4 style="margin-top:10px;">Choose a layer (right-hand map):</h4> <div id="splitlistRight" class="prevent-select" 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="overlaySelectNodeRight" >1. Select a category:</label><select id="overlaySelectNodeRight" onchange="javascript:loadOverlayNodeRight();switchOverlayRight();" style="margin-top: 4px"></select></p> <p class="prevent-select"><label for="overlaySelectLayerRight" >2. Select a map / map series:</label><select id="overlaySelectLayerRight" onchange="javascript:switchOverlayRight();" style="margin-top: 4px"></select></p> <p id="zoomtoextentright" 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:zoomtoextentright();" class="prevent-select">Zoom to this layer's extents</a> <span id="splitlist" 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 layers above as a single list" title="View the list of layers above as a single list" onmouseover="this.style.backgroundColor='#d9d9d9'" onmouseout="this.style.backgroundColor='#f8f8f8'"><a href="javascript:singleListRight();" >View single List</a></span></p> </div> <div id="singlelistRight" class="prevent-select" class="hidden" style="border: 1px solid #636363;padding:2px 3px 3px 3px; margin: 0 0 5px 0; background-color: #e2e2e2" > <div class="sortlistRight" 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="sortrelevanceRight" name="sortRight" value="relevance" title="Sort list by relevance" checked >Relevance <input type="radio" id="sortscaleRight" name="sortRight" title="Sort list by scale" value="scale" >Scale <input type="radio" id="sortdateRight" name="sortRight" value="date" title="Sort list by dates" >Date </div> <select id="overlaySelectdropdownRight" onchange="changeoverlayRight(this.selectedIndex)" title="change 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:zoomtoextentright();" class="prevent-select">Zoom to this layer's extents</a> <span id="splitlist" style="font-weight:normal;font-size:0.95em; float:right;border: 1px solid #636363;padding:2px 3px 3px 3px;background-color:#f2f2f2" alt="View the list of layers above as two-level split list" title="View the list of layers above as a two-level split list" onmouseover="this.style.backgroundColor='#d9d9d9'" onmouseout="this.style.backgroundColor='#f8f8f8'"><a href="javascript:splitListsRight();" >View split lists</a></span></p> </div> <div class = "showfiltersRight" style="margin: 2px 0 5px 0;font-size:0.9em;padding: 0 5px 0 5px;">Filter layers</div> <div id = "filtersRight" style="border: 1px solid #636363;padding:3px;margin:0 0 5px 0" class="hidden" class="prevent-select"> <div id="dateslideRight" > <div id="layerdatefilterzoom" style="margin: 0 0 15px 0px;float:left;width:240px;" class="prevent-select"> <h4>Filter layers by date</h4></div> <input id="datesliderRight" data-slider-id='dateIDsliderRight' type="text" data-slider-min="1740" data-slider-max="2000" data-slider-value="[0,0]" title="Filter returned maps by date" /> </div> <div id="scaleslideRight"> <h4>Filter layers by scale</h4> <span id="scalerangeRight" 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="scalesliderRight" data-slider-id='scaleIDsliderRight' 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" /> <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="layerfiltercheckboxright" 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 </div> </div> </div> <div id="keyword-searchRight" > <h4>Filter layers by keyword</h4> <p style="z-index:14000;white-space: nowrap;display: inline-block;margin-right:5px;" class="prevent-select"><input type="search" autocomplete="off" id="keywordsearchRight" 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="keywordsearchRight" class="prevent-select" /> <div id="search-button-keywordsearchRight" onclick="javascript:keywordsearchgazRight(document.getElementById('keywordsearchRight').value)" class="prevent-select">Search</div></p> </div> <div id="keywordRight" class="prevent-select" class="hidden"> <h4>Filter layers by keyword</h4><input type="text" id="filteroverlaysinputRight" onkeyup="filterlistRight()" onfocus="if(this.value == 'Type keyword...') { this.value = ''; }" onblur="this.value=!this.value?'Type keyword...':this.value;" value="Type keyword..." class="prevent-select" > </div> <div id="clearfiltersRight" class="hidden"><a href="javascript:clearfiltersRight();">Clear filters</a></div> </div> <div id="layerinforight" style="clear:both;font-size:0.8em;padding:1px;background-color:rgba(0, 0, 153, 0.1);border-radius:1px;margin-bottom: 5px;max-width:290px;line-height:1.2em"></div> </div> </div> <div id="geolocation-img" class="hidden"><img src="/img/geolocation.png" alt="geolocation icon image" width="28" /></div> <div id="fullscreen-img" class="hidden"><img src="/img/fullscreen-48.png" alt="geolocation icon image" width="28" /></div> <button id="swaplayers" title="Swap the left-hand layer for the right-hand layer" class="hidden"><img src="/geo/img/arrow-left.gif" class="swapimg" alt="Left arrow graphic" title="Left arrow graphic" width="20" /> Swap maps <img src="/geo/img/arrow-right.gif" alt="Right arrow graphic" title="Right arrow graphic" width="20" vertical-align="bottom" class="swapimg" /></button> <div id="deletesketchright" class="hidden"><div id="deletesketchinforight"></div> <a href="javascript:removeTopLayer()">Remove top layer</a><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> <a id="autoStart" style="display:none" href="#data" alt="Side by Side - Initial Help Instructions" title="Side by Side - Initial Help Instructions"></a> <div style="display: none;"> <div id="data" > <br/> <h2>Side by Side - Help</h2> <p>This application allows you to compare all our georeferenced maps to each other and to modern map or satellite layers in a split-screen viewer.</p> <p>You can toggle a central vertical Swipe bar off and on in the header.</p> <h3>Read the <strong><span style="background-color:#e17900;padding:3px;">Help</span></strong> to the lower left for further guidance. </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 id="mapkey" class="hidden">Map Key</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="landcoverkey" class="hidden">Land Cover 2021 Key</div> <div id="landcoverkeyimage" class="hidden"> <button type="button" id="landcoverkeyhide" class="close" aria-label="Close" class="hidden"> <span aria-hidden="true">×</span> </button> <h4 style="margin-top:15px;margin-left:5px;">Land Cover 2021 Key</h4> <img src="https://maps.nls.uk/geo/img/land-cover-key.png" width="267" alt="Land Cover Legend" title="Land Cover Legend" opacity="0.7" /> </div> <div id="darkskieskey" class="hidden">Light Pollution / Dark Skies Key</div> <div id="darkskieskeyimage" class="hidden"> <button type="button" id="darkskieskeyhide" class="close" aria-label="Close" class="hidden"> <span aria-hidden="true">×</span> </button> <h4 style="margin-top:15px;margin-left:5px;">Light Pollution / Dark Skies Key</h4> <img src="https://maps.nls.uk/geo/img/light-pollution-key.jpg" width="213" alt="Dark Skies Legend" title="Dark Skies Legend" opacity="0.7" /> <p style="margin-left:10px; font-size:0.85em; line-height:1.1em">Each pixel shows the level of radiance (night lights) shining up into the night sky. These have been categorised into colour bands to distinguish between different light levels. <a href="http://nightblight.cpre.org.uk/images/resources/Englands_Light_Pollution_and_Dark_Skies_LUC_Report.pdf" target="_blank">Further information</a>.</p> </div> <div id="footer"> <ul id="footerMenuViewer"> <li class="footerhelp"><a href="../help.html#sidebyside">Help</a></li> </ul> </div> <div id="footermobile" class="hidden"> <ul id="footerMenuViewermobile"> <li class="footerhelpmobile"><a href="../help.html#sidebyside" target="_blank">Help</a></li> </ul> </div> <script type="text/javascript"> var GPOpenLayers = false; </script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.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 src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>  <script type="text/javascript" src="../../scripts/ol_6_15_1.js"></script> <script type="text/javascript" src="../../scripts/gaz.js?v=20240816"></script> <script type="text/javascript" src="../../scripts/conversion.js"></script> <script type="text/javascript" src="../../scripts/ol-ext.js?v=202303"></script> <script type="text/javascript" src="../../scripts/GpPluginOpenLayers.js?v=20240816" ></script> <script type="text/javascript" src="../../scripts/20240816/explore-layers-ol6.js"></script> <script type="text/javascript" src="../../scripts/20240816/sidebyside-ol6.js"></script> <script type="text/javascript" src="../../scripts/20240816/filecachecheck.js"></script> <script> const filecacheversion = 20240816 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-sidebyside-new', 'yes', { expires: 80 }); // expiration in 60 days } $(document).ready(function() { var visited = $.cookie('NLS-visited-sidebyside-new'); // create cookie 'visited' with no value if (visited == 'yes') { return false; } else { openFancy(); // cookie has no value so launch fancybox on page load } $('#autoStart').fancybox({ closeClickOutside : true, onComplete: function() { if(history.pushState) { history.pushState(null, null, '#'); } else { location.hash = '#'; } } }); }); jQuery("#sidebysideSideBar").hide(); jQuery("#showlayersOutlinesExploreleft").hide(); jQuery("#showlayersOutlinesExploreright").hide(); jQuery("#sidebysidehide").click(function(){ jQuery("#sidebysideshow").show(); jQuery("#sidebysideSideBar").hide(); }); jQuery("#sidebysideshow").click(function(){ jQuery("#sidebysideSideBar").show(); jQuery("#sidebysideshow").hide(); }); jQuery("#swaplayers").click(function(){ swaplayers(); }); jQuery("#hidelayersleft").click(function(){ jQuery("#layersSideBarOutlinesleft").hide(); jQuery("#showlayersOutlinesExploreleft").show(); }); jQuery("#hidelayersright").click(function(){ jQuery("#layersSideBarOutlinesright").hide(); jQuery("#showlayersOutlinesExploreright").show(); }); jQuery("#showlayersOutlinesExploreleft").click(function(){ jQuery("#layersSideBarOutlinesleft").show(); jQuery("#showlayersOutlinesExploreleft").hide(); splitLists(); }); jQuery("#showlayersOutlinesExploreright").click(function(){ jQuery("#layersSideBarOutlinesright").show(); jQuery("#showlayersOutlinesExploreright").hide(); splitListsRight(); }); jQuery("#landcoverkey").click(function(){ $("#landcoverkeyimage").removeClass("hidden"); jQuery("#landcoverkeyimage").show(); }); jQuery("#landcoverkeyhide").click(function(){ jQuery("#landcoverkeyimage").hide(); $('#map').focus(); }); jQuery("#darkskieskey").click(function(){ $("#darkskieskeyimage").removeClass("hidden"); jQuery("#darkskieskeyimage").show(); }); jQuery("#darkskieskeyhide").click(function(){ jQuery("#darkskieskeyimage").hide(); $('#map').focus(); }); jQuery("#mapkey").click(function(){ getmapkey(); }); jQuery("#mapkeypanelhide").click(function(){ jQuery("#mapkeypanel").hide(); $('#map').focus(); }); </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>

CINXE.COM

Side by side georeferenced maps viewer - Map images - National Library of Scotland