CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> th { text-align: center; } table tr th:first-child { width: 15%; } .link { margin: auto auto; } .thumb { display: block; top: 0px; margin: 10px auto; } .mapBase .textField { width: 210px; } .info_off { position: absolute; left: 17px; top: 310px; width: 18px; height: 18px; z-index: 9999; cursor: pointer; background: url(images/mapInfo.png) no-repeat right center; } .info_on { position: absolute; left: 17px; top: 310px; width: 18px; height: 18px; z-index: 9999; cursor: pointer; background: url(images/mapInfoSelected.png) no-repeat right center; } </style> <script type="text/javascript"> // Common map library functions var thumbDimension = 100; function createCellWithText(text) { var cell = document.createElement("td"); var node = document.createTextNode("N/A"); if(text) { node = document.createTextNode(text); } cell.appendChild(node); return cell; } function createIIPImageLinkWithText(filename, sheet) { var cell = document.createElement("td"); if(filename && filename != "N/A") { var link = document.createElement("a"); link.setAttribute("href", "/maps/sheet/" + filename); link.setAttribute("onclick", "window.open(this.href); return false;"); link.appendChild(document.createTextNode(sheet)); cell.appendChild(link); } else { cell.appendChild(document.createTextNode(sheet)); } return cell; } function createIIPImageLinkWithThumb(filename, aspect) { var cell = document.createElement("td"); if(filename && filename != "N/A") { var link = document.createElement("a"); link.setAttribute("href", "/maps/sheet/" + filename); link.setAttribute("onclick", "window.open(this.href); return false;"); var thumb = document.createElement("img"); thumb.setAttribute("class", "thumb"); if(aspect == "portrait") { thumb.setAttribute("src", "/fcgi-bin/iipsrv.fcgi?FIF=/maps/vips/" + filename + ".tif&HEI=" + thumbDimension + "&CVT=JPEG&QLT=75"); } else { thumb.setAttribute("src", "/fcgi-bin/iipsrv.fcgi?FIF=/maps/vips/" + filename + ".tif&WID=" + thumbDimension + "&CVT=JPEG&QLT=75"); } link.appendChild(thumb); cell.appendChild(link); } else { var node = document.createTextNode("N/A"); cell.appendChild(node); } return cell; } function submitDownload(index) { var form = document.getElementById("download" + index); form.submit(); } function createDownloadLink(index, filename, series, restriction, licenceType) { var cell = document.createElement("td"); if(filename && filename != "N/A") { var form = document.createElement("form"); form.setAttribute("id", "download" + index); form.setAttribute("name", "download"); form.setAttribute("class", "link"); form.setAttribute("action", "https://visionofbritain.org.uk/downloads/map_download.jsp"); form.setAttribute("method", "post"); var parameter = document.createElement("input"); parameter.setAttribute("type", "hidden"); parameter.setAttribute("id", "domname"); parameter.setAttribute("name", "domname"); parameter.setAttribute("value", encodeURIComponent("Britain")); form.appendChild(parameter); parameter = document.createElement("input"); parameter.setAttribute("type", "hidden"); parameter.setAttribute("id", "index" + index); parameter.setAttribute("name", "index"); parameter.setAttribute("value", encodeURIComponent(index)); form.appendChild(parameter); parameter = document.createElement("input"); parameter.setAttribute("type", "hidden"); parameter.setAttribute("id", "restriction"); parameter.setAttribute("name", "restriction"); parameter.setAttribute("value", encodeURIComponent(restriction)); form.appendChild(parameter); parameter = document.createElement("input"); parameter.setAttribute("type", "hidden"); parameter.setAttribute("id", "series"); parameter.setAttribute("name", "series"); parameter.setAttribute("value", encodeURIComponent(series)); form.appendChild(parameter); parameter = document.createElement("input"); parameter.setAttribute("type", "hidden"); parameter.setAttribute("id", "licenceType"); parameter.setAttribute("name", "licenceType"); parameter.setAttribute("value", encodeURIComponent(licenceType)); form.appendChild(parameter); var link = document.createElement("a"); link.setAttribute("href", "javascript:submitDownload(" + index + ")" ); link.appendChild(document.createTextNode("Download")); form.appendChild(parameter); form.appendChild(link); cell.appendChild(form); } else { var node = document.createTextNode("N/A"); cell.appendChild(node); } return cell; } </script>  <script>(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-5RQZ6X79');</script>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> Old maps of Britain and Europe from A Vision of Britain Through Time </title> <link rev="Headscape" href="https://headscape.co.uk/" title="Headscape Web design: strategy, usability, design, development, marketing." /> <meta name="description" content="A vision of Britain through time..." /> <meta name="keywords" content="Vision of Britain, University of Portsmouth" /> <meta http-equiv="imagetoolbar" content="no"/> <link rel="stylesheet" type="text/css" href="/css/basic.css" media="all" />  <link rel="stylesheet" type="text/css" href="/css/default.css" media="all" />  <link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />  <style type="text/css" media="screen">   </style> <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script type="text/javascript" src="/js/default.js"></script> <script type="text/javascript" src="/js/validate.js"></script>  <link rel="canonical" href="https://www.visionofbritain.org.uk/maps" /> <link rel="stylesheet" href="/js/ol/theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="/css/map.css" type="text/css" /> <style type="text/css"> .tablescroll_head { margin-bottom: 0px; } .tablescroll_wrapper { width: 100%; } .info_off { position: absolute; left: 17px; top: 310px; width: 18px; height: 18px; z-index: 9999; cursor: pointer; background: url(/images/mapInfo.png) no-repeat right center; } .info_on { position: absolute; left: 17px; top: 310px; width: 18px; height: 18px; z-index: 9999; cursor: pointer; background: url(/images/mapInfoSelected.png) no-repeat right center; } </style> <script type="text/javascript" src="/js/ol/OpenLayers.js"></script> <script type="text/javascript" src="/js/embeddedMap.js"></script> <script type="text/javascript" src="/js/jquery.tableScroll/jquery.tablescroll.js"></script> <script type="text/javascript"> // Declare global variables var embeddedMap; var info; var currentTab = "Topographic"; var largeMapSize = false; var tellMeMoreEnabled = false; var downloadEnabled = false; // Default values for the map location parameters var layer = "europe"; var xMin = 2860000; var yMin = 2660000; var xMax = 3460000; var yMax = 3660000; $(document).ready(init); // // Setup click handler for Tell Me More option // OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { defaultHandlerOptions: { 'single': true, 'double': false, 'pixelTolerance': 0, 'stopSingle': false, 'stopDouble': false }, initialize: function(options) { this.handlerOptions = OpenLayers.Util.extend({}, this.defaultHandlerOptions); OpenLayers.Control.prototype.initialize.apply(this, arguments); this.handler = new OpenLayers.Handler.Click(this, { 'click': this.onClick }, this.handlerOptions); }, onClick: function(e) { document.getElementById("topo_mapArea").style.cursor = "wait"; document.getElementById("admin_mapArea").style.cursor = "wait"; document.getElementById("land_mapArea").style.cursor = "wait"; var lonlat = embeddedMap.getLonLatFromViewPortPx(e.xy); document.location = "/location/" + "&x=" + encodeURIComponent(lonlat.lon) + "&y=" + encodeURIComponent(lonlat.lat) + "&from=map"; } }); // // Function for submitting the series to the results page // function submitSeries(scale, mapLayer, subLayer, title) { var center = embeddedMap.getCenter(); var viewScale = embeddedMap.getScale(); document.location = "/maps/series" + "?xCenter=" + encodeURIComponent(center.lon.toString()) + "&yCenter=" + encodeURIComponent(center.lat.toString()) + "&scale=" + encodeURIComponent(scale) + "&viewScale=" + encodeURIComponent(viewScale) + "&mapLayer=" + encodeURIComponent(mapLayer) + "&subLayer=" + encodeURIComponent(subLayer) + "&title=" + encodeURIComponent(title) + "&download=" + encodeURIComponent(downloadEnabled.toString()); } // // Initialisation function // function init() { // Initialise map location variables if specified in the web address if(document.location.search != "") { var parameters = location.search.substring(1).split(/&|\=/); for(var i = 0; i < parameters.length; i += 2) { var name = decodeURIComponent(parameters[i]); var value = decodeURIComponent(parameters[i + 1]); if(name === "layer") { layer = value; } else if(name === "xMin") { xMin = value; } else if(name === "yMin") { yMin = value; } else if(name === "xMax") { xMax = value; } else if(name === "yMax") { yMax = value; } else if(name === "download") { downloadEnabled = (value === "true") ? true : false; } } } // Create the embedded map object embeddedMap = new EuropeMap(document.getElementById("topo_mapArea"), layer, xMin, yMin, xMax, yMax); embeddedMap.enableTellMeMore(); // Eat scroll events for the two remaining map divs document.getElementById("admin_mapArea").addEventListener('wheel', processWheelEvent); document.getElementById("land_mapArea").addEventListener('wheel', processWheelEvent); // Make sure the drop down box is set correctly setDropDown(); // Determine and display the initial map information getMapInfo(); getMapSearchResults(); // Callback function for when a registered event occurs var result = function(e) { getMapInfo(); getMapSearchResults(); OpenLayers.Event.stop(e); } // Register the appropriate events for the callback function above embeddedMap.registerEvent('moveend', result); // // Populate the available map series section // var url = "library" + "?action=" + encodeURIComponent("listMapSeries") + "&timeStamp=" + encodeURIComponent( new Date().getTime().toString() ); $.get(url, { 'do' : '1' }, function(responseXML) { populateSeries(responseXML); } ); } function populateSeries(responseXML) { // Get the XML nodes var mapSeriesList = responseXML.getElementsByTagName("mapSeries"); if(mapSeriesList.length === 0) { return; } // Add the data for(var i = 0; i < mapSeriesList.length; i++) { // Get the data var mapSeries = mapSeriesList[i]; var numberOfMaps = parseInt(mapSeries.getElementsByTagName("numberOfMaps")[0].firstChild.nodeValue); var publisher = mapSeries.getElementsByTagName("publisher")[0].firstChild.nodeValue; var series = mapSeries.getElementsByTagName("series")[0].firstChild.nodeValue; var scale = parseInt(mapSeries.getElementsByTagName("scale")[0].firstChild.nodeValue); var mapType = mapSeries.getElementsByTagName("mapType")[0].firstChild.nodeValue; var mapLayer = mapSeries.getElementsByTagName("mapLayer")[0].firstChild.nodeValue; var subLayer = mapSeries.getElementsByTagName("subLayer")[0].firstChild.nodeValue; var coverage = mapSeries.getElementsByTagName("coverage")[0].firstChild.nodeValue; var yearRange = mapSeries.getElementsByTagName("yearRange")[0].firstChild.nodeValue; // Format the Map Series List - Assumes the XML response is in the correct order // Format topographic maps; combine map totals for similar series if(series === "GSGS 4072") { series = "GSGS 4072, 4140, 4369"; i++; mapSeries = mapSeriesList[i]; numberOfMaps += parseInt(mapSeries.getElementsByTagName("numberOfMaps")[0].firstChild.nodeValue); i++; mapSeries = mapSeriesList[i]; numberOfMaps += parseInt(mapSeries.getElementsByTagName("numberOfMaps")[0].firstChild.nodeValue); } else if(series === "GSGS 4127") { i++; mapSeries = mapSeriesList[i]; numberOfMaps += parseInt(mapSeries.getElementsByTagName("numberOfMaps")[0].firstChild.nodeValue); } else if(series === "AMS 1202") { series = "AMS 1202, GSGS 2957"; i++; mapSeries = mapSeriesList[i]; numberOfMaps += parseInt(mapSeries.getElementsByTagName("numberOfMaps")[0].firstChild.nodeValue); } // Format boundary maps if(i + 1 < mapSeriesList.length) { var nextMapSeries = mapSeriesList[i + 1]; } while(mapType === "Administrative" && nextMapSeries.getElementsByTagName("subLayer")[0].firstChild.nodeValue == subLayer && i + 1 < mapSeriesList.length) { numberOfMaps += parseInt(nextMapSeries.getElementsByTagName("numberOfMaps")[0].firstChild.nodeValue); i++; if(i + 1 < mapSeriesList.length) { nextMapSeries = mapSeriesList[i + 1]; } } // Setup the link to the javascript sumbitSeries function, will send the correct map series and location to the results page. var link = document.createElement("a"); var value = scale + ", '" + mapLayer + "', '" + subLayer + "', "; if(subLayer === "new_pop") { link.setAttribute("href", "javascript:submitSeries(" + value + "'British War Office GSGS 4127, Ordnance Survey Popular and New Popular Editions')" ); } else if(subLayer === "first_edition") { link.setAttribute("href", "javascript:submitSeries(" + value + "'Ordnance Survey and Ordnance Survey of Scotland First Series')" ); } else if(subLayer === "lus_stamp" || subLayer === "lus_stamp_10") { link.setAttribute("href", "javascript:submitSeries(" + value + "'" + series + "')" ); } else { link.setAttribute("href", "javascript:submitSeries(" + value + "'" + publisher + ' ' + series + "')" ); } if(mapType != "Administrative") { link.appendChild(document.createTextNode(publisher + " " + series + " 1:" + scale)); } else { link.appendChild(document.createTextNode(publisher + " " + series)); } var listEntry = document.createElement("li"); listEntry.appendChild(link); listEntry.appendChild(document.createElement("br")); // Setup the comment text if(numberOfMaps === 1) { listEntry.appendChild(document.createTextNode(numberOfMaps + " sheet covering " + coverage + ", " + yearRange)); } else { listEntry.appendChild(document.createTextNode(numberOfMaps + " sheets covering " + coverage + ", " + yearRange)); } // Add the map series to the correct list if(mapType === "Topographic") { document.getElementById("topo_series_list").appendChild(listEntry); } else if(mapType === "Administrative") { document.getElementById("admin_series_list").appendChild(listEntry); } else if(mapType === "Land Utilisation") { document.getElementById("land_series_list").appendChild(listEntry); } } } // // Get the current Map Information // function getMapInfo() { var extent = embeddedMap.getExtent(); var url = "library" + "?action=" + encodeURIComponent("searchBySubLayer") + "&keyword=" + encodeURIComponent(embeddedMap.determineSubLayer()) + "&scale=" + encodeURIComponent(embeddedMap.getScale().toString()) + "&constrainByExtent=" + encodeURIComponent("true") + "&xMin=" + encodeURIComponent(extent.left.toString()) + "&yMin=" + encodeURIComponent(extent.bottom.toString()) + "&xMax=" + encodeURIComponent(extent.right.toString()) + "&yMax=" + encodeURIComponent(extent.top.toString()) + "&timeStamp=" + encodeURIComponent( new Date().getTime().toString() ); $.get(url, { 'do' : '1' }, function(responseXML) { clearInfo(); displayInfo(responseXML); } ); } // // Ajax callback function to determine and display the current map information // function displayInfo(responseXML) { // Get the XML nodes var maps = responseXML.getElementsByTagName("map"); // Only display the results if there are any if(maps.length === 0) { displayNoInfo(); return; } // // Display only the first (most relevant) result // var series = maps[0].getElementsByTagName("series")[0].firstChild.nodeValue; var publisher = maps[0].getElementsByTagName("publisher")[0].firstChild.nodeValue; var sheet = maps[0].getElementsByTagName("sheet")[0].firstChild.nodeValue; var source = maps[0].getElementsByTagName("source")[0].firstChild.nodeValue; info = document.createElement("p"); info.appendChild(document.createTextNode("Currently showing:")); info.appendChild(document.createElement("br")); var strong = document.createElement("strong"); strong.appendChild(document.createTextNode(publisher + " " + series + ", Sheet " + sheet)); info.appendChild(strong); var licence = maps[0].getElementsByTagName("licence")[0].firstChild.nodeValue; // how many lines do we have if (licence && licence.length && licence != "N/A") { info.appendChild(document.createTextNode(", Licence: ")); var licenceUrl = maps[0].getElementsByTagName("licenceUrl")[0].firstChild.nodeValue; if (licenceUrl && licenceUrl.length && licenceUrl != "N/A") { a = document.createElement('a'), a.href = licenceUrl; a_text = document.createTextNode(licence); a.appendChild(a_text); info.appendChild(a); } else { info.appendChild(document.createTextNode(licence)); } } else { info.appendChild(strong); } // Update the info with the query result if(currentTab === "Topographic") { document.getElementById("topo_mapAreaInfo").appendChild(info); } else if(currentTab === "Administrative") { document.getElementById("admin_mapAreaInfo").appendChild(info); } else if(currentTab === "Land Utilisation") { document.getElementById("land_mapAreaInfo").appendChild(info); } } function switchInfo() { clearInfo(); if(currentTab === "Topographic") { document.getElementById("topo_mapAreaInfo").appendChild(info); } else if(currentTab === "Administrative") { document.getElementById("admin_mapAreaInfo").appendChild(info); } else if(currentTab === "Land Utilisation") { document.getElementById("land_mapAreaInfo").appendChild(info); } } function displayNoInfo() { // Create the message info = document.createElement("p"); if(embeddedMap.getBaseLayerName() === "osm") { var link = document.createElement("a"); link.appendChild(document.createTextNode("OpenStreetMap")); link.setAttribute("href", "https://www.openstreetmap.org"); info.appendChild(link); } else { info.appendChild(document.createTextNode("We are sorry, but we don't have any seamless maps at this scale for this region.")); } // Update the info with the message if(currentTab === "Topographic") { document.getElementById("topo_mapAreaInfo").appendChild(info); } else if(currentTab === "Administrative") { document.getElementById("admin_mapAreaInfo").appendChild(info); } else if(currentTab === "Land Utilisation") { document.getElementById("land_mapAreaInfo").appendChild(info); } } function clearInfo() { var element = $("[class='mapAreaDetails']"); for(var i = 0; i < element.length; i++) { while(element[i].childNodes.length > 0) { element[i].removeChild(element[i].childNodes[0]); } } } function getMapSearchResults() { var extent = embeddedMap.getExtent(); var url = "library" + "?action=" + encodeURIComponent("searchByMapType") + "&keyword=" + encodeURIComponent(currentTab) + "&scale=" + encodeURIComponent(embeddedMap.getScale().toString()) + "&constrainByExtent=" + encodeURIComponent("true") + "&xMin=" + encodeURIComponent(extent.left.toString()) + "&yMin=" + encodeURIComponent(extent.bottom.toString()) + "&xMax=" + encodeURIComponent(extent.right.toString()) + "&yMax=" + encodeURIComponent(extent.top.toString()) + "&timeStamp=" + encodeURIComponent( new Date().getTime().toString() ); $.get(url, { 'do' : '1' }, function(responseXML) { clearResults(); displayResults(responseXML); } ); } function clearResults() { var results = $("[class='results']"); for(var i = 0; i < results.length; i++) { while(results[i].childNodes.length > 0) { results[i].removeChild(results[i].childNodes[0]); } } } function displayResults(responseXML) { var maps = responseXML.getElementsByTagName("map"); // Only display the results if there are any if(maps.length === 0) { if(currentTab === "Topographic") { document.getElementById("topo_noResults").style.display = "block"; document.getElementById("topo_results_title").style.display = "none"; } else if(currentTab === "Administrative") { document.getElementById("admin_noResults").style.display = "block"; document.getElementById("admin_results_title").style.display = "none"; } else if(currentTab === "Land Utilisation") { document.getElementById("land_noResults").style.display = "block"; document.getElementById("land_results_title").style.display = "none"; } return; } var head = document.createElement("thead"); var body = document.createElement("tbody"); var table = document.createElement("table"); // Create the header and the headings var header = document.createElement("tr"); var headingPublisher = document.createElement("th"); var headingSeries = document.createElement("th"); var headingEdition = document.createElement("th"); var headingSheet = document.createElement("th"); var headingYear = document.createElement("th"); var headingScale = document.createElement("th"); var headingThumb = document.createElement("th"); // Add the text nodes to the headings headingPublisher.appendChild(document.createTextNode("Publisher")); headingSeries.appendChild(document.createTextNode("Series")); headingEdition.appendChild(document.createTextNode("Edition")); headingSheet.appendChild(document.createTextNode("Sheet")); headingYear.appendChild(document.createTextNode("Year")); headingScale.appendChild(document.createTextNode("Scale")); headingThumb.appendChild(document.createTextNode("Original Map Sheet")); var span = document.createElement("span"); span.appendChild(document.createTextNode("opens in a new window")); headingThumb.appendChild(span); // Add the headings to the header header.appendChild(headingPublisher); header.appendChild(headingSeries); header.appendChild(headingEdition); header.appendChild(headingSheet); header.appendChild(headingYear); header.appendChild(headingScale); header.appendChild(headingThumb); if(downloadEnabled) { var headingDownload = document.createElement("th"); headingDownload.appendChild(document.createTextNode("Data Access")); header.appendChild(headingDownload); } // Add the header to the head head.appendChild(header); // Add the data for(var i = 0; i < maps.length; i++) { // Get the data var map = maps[i]; var index = map.getElementsByTagName("index")[0].firstChild.nodeValue; var publisher = map.getElementsByTagName("publisher")[0].firstChild.nodeValue; var series = map.getElementsByTagName("series")[0].firstChild.nodeValue; var edition = map.getElementsByTagName("edition")[0].firstChild.nodeValue; var sheet = map.getElementsByTagName("sheet")[0].firstChild.nodeValue; var year = map.getElementsByTagName("year")[0].firstChild.nodeValue; var scale = map.getElementsByTagName("scale")[0].firstChild.nodeValue; var filename = map.getElementsByTagName("filename")[0].firstChild.nodeValue; var aspect = map.getElementsByTagName("aspect")[0].firstChild.nodeValue; var restriction = map.getElementsByTagName("restriction")[0].firstChild.nodeValue; var licenceType = map.getElementsByTagName("licenceType")[0].firstChild.nodeValue; // Create the row var row = document.createElement("tr"); row.id = "row" + i; if(i % 2 == 0) { row.className = "alternate"; } // Add the data cells to the row row.appendChild(createCellWithText(publisher)); row.appendChild(createCellWithText(series)); row.appendChild(createCellWithText(edition)); row.appendChild(createIIPImageLinkWithText(filename, sheet)); row.appendChild(createCellWithText(year)); row.appendChild(createCellWithText("1:" + scale)); row.appendChild(createIIPImageLinkWithThumb(filename, aspect)); if(downloadEnabled) { row.appendChild(createDownloadLink(index, filename, series, restriction, licenceType)); } // Add the row to the body body.appendChild(row); } // Add the head and the body to the table table.appendChild(head); table.appendChild(body); // Add the table to the results and enable scrolling if(currentTab === "Topographic") { document.getElementById("topo_results").appendChild(table); document.getElementById("topo_noResults").style.display = "none"; document.getElementById("topo_results_title").style.display = "block"; } else if(currentTab === "Administrative") { document.getElementById("admin_results").appendChild(table); document.getElementById("admin_noResults").style.display = "none"; document.getElementById("admin_results_title").style.display = "block"; } else if(currentTab === "Land Utilisation") { document.getElementById("land_results").appendChild(table); document.getElementById("land_noResults").style.display = "none"; document.getElementById("land_results_title").style.display = "block"; } // Enable scrolling $('table').tableScroll({height: 500, width: 920}); } // Make sure map resize code is commented out in default.js function resizeMap() { largeMapSize = !largeMapSize; var mapAreas = $("[name='mapArea']"); var mapSizes = $("[name='mapSize']"); if(largeMapSize) { document.getElementById("topo_title").style.display = "none"; document.getElementById("admin_title").style.display = "none"; document.getElementById("land_title").style.display = "none"; document.getElementById("topo_series_list").style.display = "none"; document.getElementById("admin_series_list").style.display = "none"; document.getElementById("land_series_list").style.display = "none"; for(var i = 0; i < mapAreas.length; i++) { mapAreas[i].style.height = "570px"; mapAreas[i].style.width = "935px"; } for(var i = 0; i < mapSizes.length; i++) { $(mapSizes[i]).parent().toggleClass("colsPercent100"); $(mapSizes[i]).addClass("mapSizeSmaller").removeClass("mapSize"); } } else { document.getElementById("topo_title").style.display = "block"; document.getElementById("admin_title").style.display = "block"; document.getElementById("land_title").style.display = "block"; document.getElementById("topo_series_list").style.display = "block"; document.getElementById("admin_series_list").style.display = "block"; document.getElementById("land_series_list").style.display = "block"; for(var i = 0; i < mapAreas.length; i++) { mapAreas[i].style.height = "480px"; mapAreas[i].style.width = "515px"; } for(var i = 0; i < mapSizes.length; i++) { $(mapSizes[i]).parent().toggleClass("colsPercent100"); $(mapSizes[i]).removeClass("mapSizeSmaller").addClass("mapSize"); } } embeddedMap.updateSize(); } function toggleTellMeMore() { tellMeMoreEnabled = !tellMeMoreEnabled; if(tellMeMoreEnabled) { document.getElementById("topo_tellMeMore").className = "info_on"; document.getElementById("topo_mapArea").style.cursor = "help"; document.getElementById("admin_tellMeMore").className = "info_on"; document.getElementById("admin_mapArea").style.cursor = "help"; document.getElementById("land_tellMeMore").className = "info_on"; document.getElementById("land_mapArea").style.cursor = "help"; } else { document.getElementById("topo_tellMeMore").className = "info_off"; document.getElementById("topo_mapArea").style.cursor = "default"; document.getElementById("admin_tellMeMore").className = "info_off"; document.getElementById("admin_mapArea").style.cursor = "default"; document.getElementById("land_tellMeMore").className = "info_off"; document.getElementById("land_mapArea").style.cursor = "default"; } embeddedMap.toggleClickControl(); } function selectLayer(dropDown) { if(dropDown.selectedIndex === 0) { embeddedMap.setBaseLayer("europe"); } else if(dropDown.selectedIndex === 1) { embeddedMap.setBaseLayer("nineteenth"); } else if(dropDown.selectedIndex === 2) { embeddedMap.setBaseLayer("land"); } else { embeddedMap.setBaseLayer("osm"); } } function setDropDown() { var currentLayer = embeddedMap.getBaseLayerName(); var dropDowns = $("[name='baseLayer']"); for(var i = 0; i < dropDowns.length; i++) { if(currentLayer === "europe") { dropDowns[i].selectedIndex = 0; } else if(currentLayer === "nineteenth") { dropDowns[i].selectedIndex = 1; } else if(currentLayer === "land") { dropDowns[i].selectedIndex = 2; } else { dropDowns[i].selectedIndex = 3; } } } function tabSwitch(selectedTab) { document.getElementById("topo_noResults").style.display = "none"; document.getElementById("topo_results_title").style.display = "none"; document.getElementById("admin_noResults").style.display = "none"; document.getElementById("admin_results_title").style.display = "none"; document.getElementById("land_noResults").style.display = "none"; document.getElementById("land_results_title").style.display = "none"; if(selectedTab === "Topographic") { embeddedMap.render(document.getElementById("topo_mapArea")); } else if(selectedTab === "Administrative") { embeddedMap.render(document.getElementById("admin_mapArea")); } else if(selectedTab === "Land Utilisation") { embeddedMap.render(document.getElementById("land_mapArea")); } currentTab = selectedTab; switchInfo(); setDropDown(); getMapSearchResults(); } </script> </head> <body class="tText uniquePageIdentifier">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5RQZ6X79" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <div id="header" class="row"> <div id="headerOverlay"> <div class="rowInner"> <img id="printLogo" src="/images/logoPrint.gif" alt="Vision of Britain logo" /> <a id="vobLogo" href="/">A vision of Britain through time</a> <p id="strapLine">A vision of Britain between 1801 and 2011.<br /> Including maps, statistical trends and historical descriptions.</p> <a id="helpLink" href="/about">Help using this website</a> </div> </div> </div> <div id="navigation" class="row"> <ul class="rowInner"> <li><a href="/">Home</a></li> <li><a href="/place/">Places</a></li> <li><a href="/atlas/">Statistical atlas</a></li> <li><a href="/maps/">Historical maps</a></li> <li><a href="/census/">Census reports</a></li> <li><a href="/travellers/">Travel writing</a></li> <li><a href="/learning/">Learning zone</a></li> <li><a href="/data/">Data access</a></li> </ul> </div> <div id="breadcrumbs" class="row"> <ul class="rowInner"> <li><a href="/">Home</a></li> <li><a href="#">Historical Maps</a></li> </ul> </div> <div id="page" class="row"> <div class="rowInner"> <div class="cols18"> <h1>Historical Maps</h1> <div class="tabGroup mapLanding2 mapThumbs"> <ul class="tabs"> <li><a href="#tab01" onclick="tabSwitch('Topographic');">Topographic maps</a></li> <li><a href="#tab02" onclick="tabSwitch('Administrative');">Boundary maps</a></li> <li><a href="#tab03" onclick="tabSwitch('Land Utilisation');">Land Use maps</a></li> <li><a href="#tab04">How to use the map library</a></li> </ul> <div class="tab" id="tab01"> <div class="cols10 colRight" style="margin-left: 0px;"> <p class="mapSize" name="mapSize" onclick="resizeMap()";><em>Bigger Map</em> <span>Smaller Map</span></p> <form class="mapBase"> <div class="label"> <label for="topo_dropDown">Map layer:</label> </div> <select id="topo_dropDown" name="baseLayer" class="textField" onchange="selectLayer(this.form.baseLayer)"> <option selected="selected">Great Britain 20th Century</option> <option>Great Britain 19th Century</option> <option>Great Britain Land Utilisation</option>  </select> </form> <div id="topo_mapArea" class="mapArea" name="mapArea" style="width: 515px; height: 480px"></div> <div id="topo_mapAreaInfo" class="mapAreaDetails"></div> <div id="topo_tellMeMore" class="info_off" onclick="toggleTellMeMore()" title='Click to toggle "Tell me more about a place"'></div> </div> <div class="cols8"> <h2 id="topo_title">Topographic map series</h2> <ul id="topo_series_list" class="searchList"></ul> </div> <br class="clearBoth" /> <p id="topo_noResults" style="display: none">We are sorry, but we don't have any Topographic map sheets at this scale for this region.</p> <h3 id="topo_results_title" style="display: none">Topographic map sheets for this region</h3> <div id="topo_results" class="results"></div> </div> <div class="tab" id="tab02"> <div class="cols10 colRight" style="margin-left: 0px;"> <p class="mapSize" name="mapSize" onclick="resizeMap()";><em>Bigger Map</em> <span>Smaller Map</span></p> <form class="mapBase"> <div class="label"> <label for="admin_dropDown">Map layer:</label> </div> <select id="admin_dropDown" name="baseLayer" class="textField" onchange="selectLayer(this.form.baseLayer)"> <option selected="selected">Great Britain 20th Century</option> <option>Great Britain 19th Century</option> <option>Great Britain Land Utilisation</option>  </select> </form> <div id="admin_mapArea" class="mapArea" name="mapArea" style="width: 515px; height: 480px"></div> <div id="admin_mapAreaInfo" class="mapAreaDetails"></div> <div id="admin_tellMeMore" class="info_off" onclick="toggleTellMeMore()" title='Click to toggle "Tell me more about a place"'></div> </div> <div class="cols8"> <h2 id="admin_title">Boundary map series</h2> <ul id="admin_series_list" class="searchList"></ul> </div> <br class="clearBoth" /> <p id="admin_noResults" style="display: none">We are sorry, but we don't have any Boundary map sheets at this scale for this region.</p> <h3 id="admin_results_title" style="display: none">Boundary map sheets for this region</h3> <div id="admin_results" class="results"></div> </div> <div class="tab" id="tab03"> <div class="cols10 colRight" style="margin-left: 0px;"> <p class="mapSize" name="mapSize" onclick="resizeMap()";><em>Bigger Map</em> <span>Smaller Map</span></p> <form class="mapBase"> <div class="label"> <label for="land_dropDown">Map layer:</label> </div> <select id="land_dropDown" name="baseLayer" class="textField" onchange="selectLayer(this.form.baseLayer)"> <option selected="selected">Great Britain 20th Century</option> <option>Great Britain 19th Century</option> <option>Great Britain Land Utilisation</option>  </select> </form> <div id="land_mapArea" class="mapArea" name="mapArea" style="width: 515px; height: 480px"></div> <div id="land_mapAreaInfo" class="mapAreaDetails"></div> <div id="land_tellMeMore" class="info_off" onclick="toggleTellMeMore()" title='Click to toggle "Tell me more about a place"'></div> </div> <div class="cols8"> <h2 id="land_title">Land Use map series</h2> <ul id="land_series_list" class="searchList"></ul> </div> <br class="clearBoth" /> <p id="land_noResults" style="display: none">We are sorry, but we don't have any Land Use map sheets at this scale for this region.</p> <h3 id="land_results_title" style="display: none">Land Use map sheets for this region</h3> <div id="land_results" class="results"></div> </div> <div class="tab" id="tab04"> <div class="textColumns2"> <p><b>This "historical maps" page lets you search and view our large collection of historical maps. The viewer you can see lets you explore our seamless maps  scroll down to access individual map sheets.</b></p> <h4>What is in our collection</h4> <p>We hold three types of map, which you choose between by selecting one of the thematic tabs:</p> <ul> <li><p><b>Topographic maps:</b> These are general purpose maps showing the physical landscape: hills and valleys, rivers and coast, plus man-made features like settlements, roads and railways. We hold these maps for different periods and at different scales.</p></li> <li><p><b>Boundary maps:</b> These usually include some landscape features, so you can see where you are looking at, but their main concern is showing administrative boundaries, for counties, districts, parishes and so on. We aim to provide a comprehensive collection of boundary maps published by the British government, but cannot include maps published within the last fifty years for copyright reasons.</p></li> <li><p><b>Land Use maps:</b> Our collection includes a complete set of the one mile to the inch and ten miles to the inch maps published by the Land Utilisation Survey of Great Britain. They record what each plot of land was being used for on the day it was surveyed, in the 1930s.</p></li> </ul> <h4>How we store our map collection</h4> <p>We hold maps in two quite different forms, each with its own viewer:</p> <ul> <li><p><b>As individual SHEETS:</b> All the maps in our collection are held as digital images of the complete sheet, including all the information around the edges.</p></li> <li><p><b>As a SEAMLESS view:</b> Selected map series are also held as a seamless, continuous view, which is the final product of much further work: first we removed the margins of each individual map sheet; then we <em>re-projected</em> the map to a standard coordinate system (ETRS-89); and finally we digitally assembled the separate sheets into a single coverage. The end result is a single electronic map covering the whole of Britain, or even Europe.</p> </li> </ul> <h4>Finding and viewing seamless maps</h4> <p>Most of our seamless maps are grouped into one of three <b>layers</b>, each one including coverages at two or three different scales. Our seamless map viewer gives you direct access to these layers, and you begin by seeing the least detailed series in the layer. As you zoom in, by using the slider or by double-clicking on the map, the viewer automatically switches to a more detailed map. The viewer begins by showing you the twentieth century topographic map layer, but use the drop-down menu above the map to switch to nineteenth century maps, or to land use maps. Three tips: <ul> <li><p><b>For more about a place, click on the information button</b> below the zoom slider, then click on the place. This takes you to a <b>location page</b>, with links to information about nearby places and about the historical administrative areas that covered that point.</p></li> <li><p><b>Click on "Bigger Map" to see more map</b>.</p></li> <li><p><b>Pan right to see Europe</b>. Although the initial view of the twentieth century maps is centered on Britain, their top two layers cover the whole of Europe so there is plenty more to see.</p></li> </ul> <p>The maps the viewer shows are not changed by the tabs. That is because the seamless map viewer is also how you search for individual map sheets, especially the boundary maps for which we have no seamless views.</p> <p>To the left of the viewer  when not using the "Bigger Map" option  we list the available map <b>series</b> for the current theme. If you select one of these and we have a seamless view, we take you straight to it. If we do not have a seamless view, the viewer just shows you a modern map which you can use to find relevant map sheets, as explained below.</p> <h4>Finding and viewing map sheets</h4> <p>We do store the usual library catalogue information about individual sheets: publisher, series, title, date of publication, and scale. However, we provide a much simpler way of searching for the sheet you need. This takes advantage of an unusual feature of our collection: <b>every individual sheet is geo-referenced</b>, so the system knows what part of the world the sheet covers.</p> <p><b>Relevant individual map sheets are listed below the seamless map viewer</b>, so scroll down to see this information. We list the most relevant map sheets for the current theme. We define "relevance" based on what you can currently see in the seamless map viewer: the system finds the sheets whose coverage is most similar, and automatically updates the list as you zoom in or out, or pan sideways.</p> <p>The listing includes thumbnail images of the maps. <b>Click on an image and a different viewer for map sheets opens</b>, in its own browser window or tab to give you an uncluttered view. Use the controls or double-click to zoom in. To move around, hold down your mouse button and drag on the map, or drag on the rectangle in the thumbnail view. For fuller instructions on using the sheet viewer, move the cursor to hover over the "IIP" button at top left.</p> <p>Our seamless map viewer uses the OpenLayers toolkit (<a href="https://www.openlayers.org">http://www.openlayers.org</a>). Our sheet viewer is IIPImage with IIPMooViewer (<a href="https://iipimage.sourceforge.net">http://iipimage.sourceforge.net</a>). Both should work with any javascript enabled web browser, including Internet Explorer, Firefox and Google Chrome.</p> </div> </div> </div> </div> </div> </div> <div id="footerAds" class="row"> <div class="rowInner"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1952517583355649" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-1952517583355649" data-ad-slot="0896119656"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div id="footer" class="row"> <div class="rowInner"> <a href="https://www.jisc.ac.uk" id="footerLinkJ">JISC</a> <a href="https://www.port.ac.uk" id="footerLinkP">Portsmouth</a> <a href="#header" class="backToTop">Back to top</a> <ul> <li><a href="/about/credits">©2009-2024 University of Portsmouth and others</a></li> <li><a href="/about">About this site</a></li> <li><a href="/expertsearch">Expert search</a></li> <li><a href="https://headscape.co.uk">Web design by Headscape </a></li> </ul> </div> </div> </body> </html>