SABRE - Maps

<!DOCTYPE html lang="en"> <head> <script type="text/javascript" src="/ui/js/cookie-consent.js" charset="UTF-8"></script> <script type="text/javascript" charset="UTF-8"> document.addEventListener('DOMContentLoaded', function () { cookieconsent.run({"notice_banner_type":"simple","consent_type":"express","palette":"dark","language":"en","page_load_consent_levels":["strictly-necessary"],"notice_banner_reject_button_hide":false,"preferences_center_close_button_hide":false,"page_refresh_confirmation_buttons":false,"website_name":"SABRE","website_privacy_policy_url":"https://www.sabre-roads.org.uk/wiki/index.php?title=SABRE_Privacy_Statement_and_Subject_Access_Request_policy"}); }); </script>   <script type="text/plain" data-cookie-consent="tracking" async src="https://www.googletagmanager.com/gtag/js?id=G-J1XFR7MJE6"></script> <script type="text/plain" data-cookie-consent="tracking"> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-J1XFR7MJE6'); </script>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>SABRE - Maps</title> <link href="//www.sabre-roads.org.uk/ui/css/sabre.min.css" rel="stylesheet"> <link href="//www.sabre-roads.org.uk/ui/css/all.min.css" rel="stylesheet"> <link href="//www.sabre-roads.org.uk/ui/css/bootstrap-slider.min.css" rel="stylesheet"> <link href="//www.sabre-roads.org.uk/ui/css/global-menu.css" rel="stylesheet"> <style> .navbar { background-position: 50% 50%; background-image: url(https://www.sabre-roads.org.uk/wiki/images/f/f0/IMG_2371.jpeg); } </style> <link href="src/css/maps.css" rel="stylesheet"> <script type="text/javascript" src="src/js/d3.min.js"></script> <script type="text/javascript" src="src/js/OpenLayers-6.15.1/ol.js"></script> <script type="text/javascript" src="src/js/map.js?1718108373"></script> <script type="text/javascript" src="src/js/osm.js?6153"></script> <script type="module"> window["getServerUrl"] = () => { return 'https://www.sabre-roads.org.uk/maps/index.php'; }; function initMap( id ) { var oldCentre = [-2.01,54.56]; var oldZoom = 6; var handler = new OSMMap(); window["handler"] = handler; handler.target = id; handler.createMap( id, oldCentre, oldZoom ); handler.setupMap( id ); handler.switchLayer( 'OSM Standard' ); var centre = [ -122.403333, 37.789167 ]; handler.setCentre( centre, 15); } initMap( 'os_67a682d3b3e46' ); </script> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark" id="main-bar"> <div class="container-fluid"> <div class="card navbar-brand"> <img class="brand-icon" src="//www.sabre-roads.org.uk/img/logo.gif" alt="SABRE"> </div> <button class="navbar-toggler btn-sabre" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"><i class="fas fa-bars fa-border"></i></span> </button> <div class="collapse navbar-collapse global-menu-buttons" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-lg-0"> <li class="nav-item"> <a class="btn btn-sm btn-sabre" href="//www.sabre-roads.org.uk/"><i class="fas fa-home me-2"></i>Home</a> </li> <li class="nav-item"> <a class="btn btn-sm btn-sabre" href="//www.sabre-roads.org.uk/maps/"><i class="fas fa-map-marked-alt me-2"></i>Discover - Maps</a> </li> <li class="nav-item"> <a class="btn btn-sm btn-sabre" href="//www.sabre-roads.org.uk/wiki/"><i class="fas fa-book me-2"></i>Digest - Wiki</a> </li> <li class="nav-item"> <a class="btn btn-sm btn-sabre" href="//www.sabre-roads.org.uk/forum/"><i class="fas fa-comments me-2"></i>Discuss - Forum</a> </li> <li class="nav-item"> <a class="btn btn-sm btn-sabre" href="//www.sabre-roads.org.uk/society/"><i class="fas fa-users me-2"></i>Society</a> </li> <li class="nav-item"> <a class="btn btn-sm btn-sabre" href="//www.sabre-roads.org.uk/websites/"><i class="fas fa-globe-europe me-2"></i>Websites</a> </li> <li class="nav-item"> <a class="btn btn-sm btn-sabre" href="//www.sabre-roads.org.uk/wiki/index.php?title=SABRE_Links"><i class="fas fa-link me-2"></i>Links</a> </li> <li class="nav-item"> <a class="btn btn-sm btn-sabre" href="//www.sabre-roads.org.uk/wiki/index.php?title=Contact_SABRE_and_help"><i class="fas fa-question-circle me-2"></i>Help</a> </li> </ul> <ul class="navbar-nav ms-auto mb-lg-0"> <li class="nav-item"> <a class="btn btn-sm btn-sabre" href="//www.sabre-roads.org.uk/forum/ucp.php?mode=login&returnto=/maps/index.php"> <i class="fas fa-sign-in-alt me-2"></i>Log In </a> </li> <li class="nav-item"> <a class="btn btn-sm btn-sabre" href="//www.sabre-roads.org.uk/forum/ucp.php?mode=register"> <i class="fas fa-clipboard-check me-2"></i>Register </a> </li> </ul> </div> </div> </nav> <div class="container"> <div id="map-overlays"> <div class="row fall-through"> <div class="col-lg-3 col-xl-3 map-controls-outer"> <div class="card border-sabre map-layer"> <h4 class="card-header bg-sabre text-white"> <i class="fas fa-map-marked-alt"></i> SABRE Maps <span class="float-end"> <a class="btn btn-light btn-sm" data-bs-toggle="collapse" href="#collapseMenu" role="button" aria-expanded="false" aria-controls="collapseMenu"><i class="fas fa-bars"></i></a> </span> </h4> <div class="collapse" id="collapseMenu"> <div class="card-body map-controls"> <div class="input-group input-group-sm mb-2"> <label for="category-dropdown" class="input-group-text layer-input-label">Category</label> <select class="form-select form-select-sm" aria-label="Category" name="mapCategory" id="mapCategory" onChange="updateMapList(mapCategory.value)"> <option value="OSMMap" selected>OpenStreetMap</option><option value="MoTMap">OS Ministry of Transport</option><option value="Landranger">OS 1:50,000 (1974-75)</option><option value="NPEMap">OS One Inch (1945-1976)</option><option value="FifthEdition">OS One Inch Fifth Edition (1931-1940)</option><option value="Popular">OS One Inch Popular Ed. (1918-1940)</option><option value="TenMileMap">OS Ten Mile Road Maps (1932-1956)</option><option value="RoutePlanning">OS Route Planning Maps (1964-1975)</option><option value="OSMiniscale">OS Miniscale (2010-2025)</option><option value="QuarterInchMap">OS Quarter Inch (1919-1975)</option><option value="OS250k">OS 1:250k OpenData (1988-2024)</option><option value="HalfInch">OS Half Inch (1935-1974)</option><option value="NIRoadMap">N Ireland Road Maps (1926-1961)</option><option value="IrelandSmallScale">OSI Ireland small scale maps</option><option value="LonMap">Misc London area</option><option value="BartMap">Bartholomew</option><option value="NLSMap">Maps hosted by NLS</option><option value="CountyMap">Historic Counties</option><option value="OtherMap">Miscellaneous</option><option value="Plans">Highway Plans</option><option value="MosaicLayers">Full mosaic layers</option> </select> </div> <div class="input-group input-group-sm mb-2"> <label for="layer-dropdown" class="input-group-text layer-input-label">Layer</label> <select class="form-select form-select-sm" aria-label="Layer" id="mapLayer" name="mapLayer" onChange="changeMapSelection()"> <option id="mapnik" value="mapnik" selected>OSM Standard</option><option id="OSMFrance" value="OSMFrance">OSM France</option><option id="osmde" value="osmde">OSM Germany</option><option id="cyclosm" value="cyclosm">CyclOSM</option><option id="opentopo" value="opentopo">OpenTopoMap</option><option id="openrails" value="openrails">OpenRailwayMap</option><option id="ossv" value="ossv">OS StreetView</option> </select> </div> <div class="mb-2"> <div class="map-control-buttons btn-group-vertical btn-block" role="group" aria-label="Vertical button group"> <a href="sheetfinder" class="btn btn-sabre btn-sm"><i class="fas fa-atlas"></i> Sheetfinder</a> <a href="finder" class="btn btn-sabre btn-sm"><i class="fas fa-drafting-compass"></i> Co-ordinate Finder</a> <a href="finder/converter/gb.php" class="btn btn-sabre btn-sm"><i class="fas fa-retweet"></i> Co-ordinate Converter (GB)</a> <a href="finder/converter/ie.php" class="btn btn-sabre btn-sm"><i class="fas fa-retweet"></i> Co-ordinate Converter (IE)</a> <a href="calibrate/os.php" class="btn btn-sabre btn-sm"><i class="fas fa-ruler-combined"></i> Grid Calibrator</a> <a href="../wiki/index.php?title=SABRE_Maps" class="btn btn-sabre btn-sm"><i class="fas fa-info-circle"></i> About SABRE Maps</a> <a href="../society/donations.php" class="btn btn-sabre btn-sm"><i class="fas fa-money-bill-wave"></i> Donate to SABRE Maps</a> </div> </div> <div class="mb-2"> <div class="input-group input-group-sm mb-0"> <span for="wgSearch" class="input-group-text">Search</span> <input id="wgSearch" type="text" aria-label="Search" class="form-control" onkeydown="if (event.keyCode == 13) { document.getElementById('goButton').click() }" onkeypress="handler.onSearchKey(event)"> <button class="btn btn-sabre" type="button" id="goButton" onClick="handler.onSearch('//www.sabre-roads.org.uk/maps/index.php');">Go</button> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="chkGallery"> <label class="form-check-label" for="chkGallery">Include Pictures</label> </div> </div> <div class="mb-2"> <div class="map-control-buttons btn-group-vertical btn-block" role="group" aria-label="Vertical button group"> <a href="javascript:handler.enableMarkers( true );" id="onEnableMarkers" class="btn btn-sabre btn-sm" > <i class="fas fa-map-marked-alt"></i> <span id="marker-button-text">Enable Markers</span> </a> <a href="javascript:handler.clearMarkers()" class="btn btn-sabre btn-sm" id="onClearMarkers"> <i class="fas fa-map"></i> Clear Markers </a> <a href="javascript:handler.onAadf( true );" class="btn btn-sabre btn-sm" id="onAadf"> <i class="fas fa-traffic-light"></i> <span id="traffic-counts-button-text">Traffic Counts</span> </a>  </div> </div> </div> </div> </div> </div> <div class="col-lg-9"> <div class="row layer-label"> <div class="col-lg-12"> <div id="layertext" class="badge text-bg-sabre text-wrap map-layer">Layer Text</div> <div id="sheettext" class="badge text-bg-sabre text-wrap map-layer">Sheet Text</div> <div id="sublayertext" class="hidden"></div> <div class="markers-card badge text-bg-sabre text-wrap map-layer hidden"> Grid: <span id="markers-grid"></span>, Latitude: <span id="markers-lat"></span>, Longitude: <span id="markers-lon"></span> </div> </div> </div> <div class="row widget-area"> <div class="col-lg-6 map-fader-card hidden"> <div class="card border-sabre map-layer">  <div class="card-body"> <div class="row trace-card"> <div class="col-md-11 outer-slider"> <input id="map-fader" data-slider-id='map-fader-slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-tooltip="hide" data-slider-step="1" data-slider-value="0" onchange="console.log(e)"/> </div> <div class="col-md-1"> <a href="javascript:handler.createSliderUi2022( false );" class="btn btn-danger btn-sm"><i class="fas fa-times fa-fw"></i></a> </div> </div> </div> </div> </div> <div class="col-lg-6 trace-path-card hidden"> <div class="card border-sabre map-layer"> <div class="card-body"> <form> <div class="row trace-card"> <div class="col-md-3"> <div id="trace-buttons" class="btn-group btn-block" role="group" aria-label="Trace button group"> <a href="javascript:handler.undoTrace()" class="btn btn-sabre btn-sm"><i class="fas fa-undo"></i> Undo</a> <a href="javascript:handler.clearTraceClick()" class="btn btn-sabre btn-sm"><i class="fas fa-ban"></i> Cancel</a> </div> </div> <div class="col-md-8 inner-form"> <div class="row trace-card"> <div class="col-md-12 inner-form"> <div class="input-group input-group-sm mb-0"> <span for="trace-save" class="input-group-text trace-label">Save</span> <input id="trace-save" type="text" aria-label="Save name" class="form-control"> <a href="javascript:handler.saveTrace()" class="btn btn-sabre trace-label" id="trace-save-addon">Save</a> </div> </div> </div> <div class="row trace-card"> <div class="col-md-12 inner-form"> <div class="input-group input-group-sm mb-0"> <a href="javascript:handler.loadTraces()" class="btn btn-sabre trace-label" id="trace-list-addon"> List </a> <select class="form-select" id="trace-load" aria-label="load trace"> </select> <a href="javascript:handler.loadTraceUi2022(document.querySelector('#trace-load').selectedOptions)" class="btn btn-sabre trace-label" id="trace-load-addon"> Load </a> </div> </div> </div> </div> <div class="col-md-1"> <a href="javascript:handler.onTrace( false );" class="btn btn-danger btn-sm"><i class="fas fa-times fa-fw"></i></a> </div> </div> </form> </div> </div> </div> <div class="col-lg-6 map-link-card hidden"> <div class="card border-sabre map-layer"> <div class="card-body"> <form> <div class="row trace-card"> <div class="col-md-12 inner-form"> <div class="input-group input-group-sm mb-0"> <span for="map-link-input" class="input-group-text">Link</span> <input id="map-link-input" type="text" aria-label="Save name" class="form-control"> <button class="btn btn-sabre" type="button" id="map-link-addon"><i class="fas fa-copy"></i> Copy</button> <a class="btn btn-danger btn-sm" href="javascript:handler.onPermalink( false );"> <i class="fas fa-times fa-fw"></i> </a> </div> </div> </div> </form> </div> </div> </div> <div class="col-lg-6 search-results-card hidden"> <div class="card border-sabre map-layer"> <div class="card-header bg-sabre text-white"> <i class="fas fa-search"></i>  <span id="search-term">a</span>  <span id="start-end" class="badge text-bg-light text-wrap text-sabre">b</span> <span id="search-coords" class="badge text-bg-light text-wrap text-sabre">b</span> <span class="float-end"> <a class="btn btn-light btn-sm" data-bs-toggle="collapse" href="#collapseSearch" role="button" aria-expanded="false" aria-controls="collapseSearch"> <i class="fas fa-bars fa-fw"></i> </a> <a class="btn btn-danger btn-sm" href="javascript:handler.hideSearchPanel();"> <i class="fas fa-times fa-fw"></i> </a> </span> </div> <div class="collapse" id="collapseSearch"> <div class="card-body fs-6"> <div class="row" id="search-results"> <div class="col-lg-6" id="search-links"> <div id="search-links-list" class="map-control-buttons btn-group-vertical btn-block" role="group" aria-label="Other linksp"> <a type="button" class="btn btn-sabre btn-sm"><i class="fas fa-book"></i> Read more on the SABRE Wiki</a> </div> </div> <div class="col-lg-6" id="search-dabs"> <h6>Did you mean?</h6> <div id="search-dabs-list" class="map-control-buttons btn-group-vertical btn-block" role="group" aria-label="Disambiguation"> </div> </div> <div id="search-none-found" class="col-lg-12"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div id="os_67a682d3b3e46" class="map-holder"> </div> </div> <script src="./src/js/bootstrap-slider.min.js"></script> <script type="text/javascript"> function checkScreenSize() { if (screen.width > 1200) { //boostrap large document.querySelector("#collapseMenu").classList.add("show"); } else { document.querySelector("#collapseMenu").classList.remove("show"); } } checkScreenSize(); window.addEventListener('resize', checkScreenSize); //slider var slider = new Slider('#map-fader', {}); slider.on("slide", (sliderValue) => { handler.updateSlider(sliderValue); }); function updateMapList(category) { var handler = window.handler; handler.sendRequest( getServerUrl(), "category=" + category, function( handler, xhr ) { var opts = JSON.parse(xhr); mapLayer.options.length = 0; for (var o in opts) { mapLayer.options[mapLayer.options.length] = new Option(opts[o].name, o); } changeMapSelection(); } ); } function changeMapSelection() { var handler = window.handler; if (mapCategory.value == 'OSMMap'){ handler.switchLayer(mapLayer.options[mapLayer.selectedIndex].text); } else { handler.switchMap(mapCategory.value, mapLayer.value); } } document.querySelector("#map-link-addon").addEventListener('click', () => { const copyText = document.querySelector("#map-link-input"); copyText.select(); copyText.setSelectionRange(0, 99999); // For mobile devices navigator.clipboard.writeText(copyText.value); }); </script> <script src="//www.sabre-roads.org.uk/ui/js/bootstrap.bundle.min.js"></script> </body> </html>

CINXE.COM

SABRE - Maps