10 things you need to know about maps - National Library of Scotland

<!DOCTYPE html> <html class="no-js" dir="ltr" lang="en-GB"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>10 things you need to know about maps - National Library of Scotland</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maps.nls.uk/assets/css/viewer-bootstrap-slider.css"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/cta-slider.css"> <script src="js/vendor/modernizr-2.8.3.min.js"></script> <script src="js/vendor/jquery-1.11.3.min.js"></script>   <script src="https://maps.nls.uk/assets/scripts/geo/bootstrap-slider.js" ></script> <script src="https://maps.nls.uk/assets/scripts/geo/ol-explore.js"></script>  <style> #mapspy { position: absolute; top: 0px; left: 0; bottom: 0px; width: 100%; height: 100%; } .slider.slider-horizontal { width: 110px; height: 20px; } #mapViewerPrint #searchSideBar { display:none; } </style> <script> 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', 'ad_personalization': 'denied', 'ad_user_data': 'denied' }); </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-5N7J2JW');</script> </head> <body class="home-page" itemscope itemtype="http://schema.org/WebPage"> <div class="header clearfix"> <header itemscope="" itemtype="http://schema.org/WPHeader"> <div class="wrap"> <h1 class="site-title" itemprop="headline"><a itemprop="url" href="./">You are here</a></h1> <div class="main-nav clearfix" id="main-nav"> <div class="responsive-menu"><a href="#main-menu" id="toggle-menu"></a></div> <nav role="navigation" aria-label="Navigation" id="main-menu" class="menu clearfix" itemscope itemtype="http://schema.org/SiteNavigationElement"> <ul> <li><a itemprop="url" href="10-things/">10 things<span class="icon down-arrows"></span></a> <ul> <li class="sub-item-1"><a itemprop="url" href="10-things/"><span>1</span>Do all maps show real places?</a></li> <li><a itemprop="url" href="10-things/#feature-2"><span>2</span>How are features selected?</a></li> <li><a itemprop="url" href="10-things/#feature-3"><span>3</span>Why do maps have scale?</a></li> <li><a itemprop="url" href="10-things/#feature-4"><span>4</span>Why do place names change over time?</a></li> <li><a itemprop="url" href="10-things/#feature-5"><span>5</span>How are hills shown on a flat map?</a></li> <li><a itemprop="url" href="10-things/#feature-6"><span>6</span>Why use symbols?</a></li> <li><a itemprop="url" href="10-things/#feature-7"><span>7</span>Do maps go out of date?</a></li> <li><a itemprop="url" href="10-things/#feature-8"><span>8</span>How do maps show human activity?</a></li> <li><a itemprop="url" href="10-things/#feature-9"><span>9</span>How is the spherical world made flat?</a></li> <li><a itemprop="url" href="10-things/#feature-10"><span>10</span>Why is north to the top?</a></li> </ul> </li> <li><a itemprop="url" href="gallery">Gallery</a></li> <li><a itemprop="url" href="quizzes">Quizzes<span class="icon down-arrows"></span></a> <ul> <li><a itemprop="url" href="quizzes/you-are-where/">You are where?</a></li> <li><a itemprop="url" href="quizzes/where-in-europe/">Where in Europe?</a></li> </ul> </li> <li><a itemprop="url" href="glossary">Glossary </a></li> <li><a itemprop="url" href="learning-activity">Learning activity</a></li> </ul> </nav> </div> </div> </header> </div> <div class="spymap" id="mapViewerPrint"> <div id="searchSideBar"> <p>Change size of spyglass: <br />     <p class="infomapslider"> <input id="mapslider" data-slider-id='mapsslider' type="text" data-slider-min="2" data-slider-max="95" data-slider-step="1" data-slider-value="30"/> </p> </div> <div id="mapspy" class="mapspy"></div> <script> var BingapiKey = "AgS4SIQqnI-GRV-wKAQLwnRJVcCXvDKiOzf9I1QpUQfFcnuV82wf1Aw6uw5GJPRz"; var roads = new ol.layer.Tile({ source: new ol.source.BingMaps({key: BingapiKey, imagerySet: 'Road'}) }); var OS1900sGB = new ol.layer.Tile({ extent: ol.proj.transformExtent([-8.8, 49.8, 1.77, 60.9 ], 'EPSG:4326', 'EPSG:3857'), preload: Infinity, title: 'Great Britain - OS 1:1 million-1:10K, 1900s', mosaic_id: '175', typename: 'nls:WFS', source: new ol.source.TileJSON({ attributions: '<a href=\'https://maps.nls.uk/projects/subscription-api/\'>NLS Historic Maps Subscription API layer</a>', url: 'https://api.maptiler.com/tiles/uk-osgb1888/tiles.json?key=7Y0Q1ck46BnB8cXXXg8X', minZoom: 8, maxZoom: 17 }) }); var edin1893 = new ol.layer.Tile({ title: "Scotland, Town Plans - Edinburgh, OS [1893]", source: new ol.source.XYZ({ url: "http://geo.nls.uk/maps/towns/edinburgh1893/{z}/{x}/{-y}.png", minZoom: 8, maxZoom: 20 }), numZoomLevels: 22, maxResolution: 0.5971642834779395 }); var os25scotland1 = new ol.layer.Tile({ extent: ol.proj.transformExtent([-7.70343904,54.62907430,-0.76245137,60.82129362], 'EPSG:4326', 'EPSG:3857'), source: new ol.source.XYZ({ url: 'http://geo.nls.uk/mapdata2/os/25_inch/scotland_1/{z}/{x}/{y}.png', minZoom: 8, maxZoom: 18 }), minResolution: 0.5971642834779395, maxResolution: 1.194328566955879 }); var os1900s = new ol.layer.Group({ title: "Great Britain - OS 25 Inch, 1892-1905", layers: [OS1900sGB, os25scotland1, edin1893], }); var bing = new ol.layer.Tile({ source: new ol.source.BingMaps({ key: BingapiKey, imagerySet: 'Aerial' }) }); var container = document.getElementById('mapspy'); var map = new ol.Map({ layers: [ bing, OS1900sGB], target: 'mapspy', controls: ol.control.defaults({ attributionOptions: { collapsed: true, collapsible: true }}), view: new ol.View({ center: [-355281.3975444914, 7548182.818389628], minZoom: 4, maxZoom: 18, zoom: 17, extent: ol.proj.transformExtent([-8,48,3,62], 'EPSG:4326', 'EPSG:3857') }) }); var maxwidth = map.getSize()[0]; var maxradius = maxwidth / 2; jQuery('#mapslider').slider({ formater: function(value) { radius = ( value / 100 ) * maxradius; return 'Diameter: ' + value + '% screen width'; } }); document.addEventListener('keydown', function(evt) { if (evt.which === 38) { radius = Math.min(radius + 5, 150); map.render(); evt.preventDefault(); } else if (evt.which === 40) { radius = Math.max(radius - 5, 25); map.render(); evt.preventDefault(); } }); // get the pixel position with every move var mousePosition = null; container.addEventListener('mousemove', function(event) { mousePosition = map.getEventPixel(event); map.render(); }); container.addEventListener('mouseout', function() { mousePosition = null; map.render(); }); // before rendering the layer, do some clipping OS1900sGB.on('precompose', function(event) { var ctx = event.context; var pixelRatio = event.frameState.pixelRatio; ctx.save(); ctx.beginPath(); if (mousePosition) { // only show a circle around the mouse ctx.arc(mousePosition[0] * pixelRatio, mousePosition[1] * pixelRatio, radius * pixelRatio, 0, 2 * Math.PI); ctx.lineWidth = 5 * pixelRatio; ctx.strokeStyle = 'rgba(0,0,0,0.5)'; ctx.stroke(); } ctx.clip(); }); // after rendering the layer, restore the canvas context OS1900sGB.on('postcompose', function(event) { var ctx = event.context; ctx.restore(); }); </script> </div> <div class="main-content-wrap clearfix"> <div class="wrap"> <h2 itemprop="headline">10 things you need to know about maps</h2> </div> <div class="slider-control-wrap"> <div class="jcarousel-control-prev gallery-controls" tabindex="0" aria-label="Previous">Previous</div> <div class="jcarousel-control-next gallery-controls" tabindex="0" aria-label="Next">Next</div> </div> <div class="wrap2"> <div class="jcarousel-wrapper"> <div class="jcarousel" id="jcarousel"> <ul aria-labelledby="page-header-gallery"> <li><span>1</span><a href="10-things/">Do all maps show real places?</a></li> <li><span>2</span><a href="10-things/#feature-2">How are features selected?</a></li> <li><span>3</span><a href="10-things/#feature-3">Why do maps have scale?</a></li> <li><span>4</span><a href="10-things/#feature-4">Why do place names change over time?</a></li> <li><span>5</span><a href="10-things/#feature-5">How are hills shown on a flat map?</a></li> <li><span>6</span><a href="10-things/#feature-6">Why use symbols?</a></li> <li><span>7</span><a href="10-things/#feature-7">Do maps go out of date?</a></li> <li><span>8</span><a href="10-things/#feature-8">How do maps show human activity?</a></li> <li><span>9</span><a href="10-things/#feature-9">How is the spherical world made flat?</a></li> <li><span>10</span><a href="10-things/#feature-10">Why is north to the top?</a></li> </ul> </div> </div> </div> <div class="wrap"> <main class="main-content"> <section> <p>Maps are everywhere, on our phones, in our cars and pockets, on walls, bus stops and adverts. They proclaim YOU ARE HERE! Maps plant us firmly in a place, at an exact spot in the world. We rely on them to navigate safely from one place to another. But how much do we really know about them?<br> This website challenges our acceptance of maps by posing questions about how they are made and how we understand them.<br> Travel to the edge of the world, look into the maps and seek the answers. Wonder at the cartographers’ skill, drawing together art and science to produce versatile, useful, beautiful maps.</p> </section> </main> </div> </div> <div class="footer"> <div class="wrap"> <footer class="clearfix"> <nav role="navigation" aria-label="Navigation" class="menu clearfix" itemscope itemtype="http://schema.org/SiteNavigationElement"> <ul> <li><a itemprop="url" href="http://www.nls.uk">National Library of Scotland</a></li> <li><a itemprop="url" href="http://maps.nls.uk/">Explore our map images website</a></li> </ul> </nav> <div class="footer-logo" itemprop="image" itemscope itemtype="http://schema.org/ImageObject"><a itemprop="url" href="http://www.nls.uk" title="Visit National Library main website"><img src="images/content/NLS-logo.gif" width="329" height="50" alt="National Library of Scotland logo"></a></div> <p class="copyright">Copyright © 2016, National Library of Scotland</p> </footer> </div> </div> <script src="js/main.js"></script> <script src="js/what-input.js"></script> <script src="js/cta-slider.js"></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*', '_sg*'], 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> <script type="text/javascript"> (function(d,e,j,h,f,c,b){d.SurveyGizmoBeacon=f;d[f]=d[f]||function(){(d[f].q=d[f].q||[]).push(arguments)};c=e.createElement(j),b=e.getElementsByTagName(j)[0];c.async=1;c.src=h;b.parentNode.insertBefore(c,b)})(window,document,'script','//d2bnxibecyz4h5.cloudfront.net/runtimejs/intercept/intercept.js','sg_beacon'); sg_beacon('init','NzMzMjE5LWMwODc5MzE1ZjI1NTQ0MzcyZTZhMzc5ZTE1ZjhmYzFjOTAzZDY5YjhhYjdhNzUyYWE5'); sg_beacon('onoffered',function(){ gtag('event', 'Survey Offered'); }); $("html").on("click", ".sg-b-l-t", function(){ gtag('event', 'Survey Clicked'); }); </script> </body> </html>

CINXE.COM

10 things you need to know about maps - National Library of Scotland