Last active
January 1, 2020 10:47
-
-
Save mapsmania/6486214d30f8684bd1a0550481138d5e to your computer and use it in GitHub Desktop.
iiif scroll
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" rel="stylesheet"> | |
| <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> | |
| <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"> | |
| </script> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> | |
| <script src="leaflet-iiif.js"> | |
| </script> | |
| <script src="waypoints.min.js"></script> | |
| <style> | |
| html, body { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| #map { | |
| position:fixed; top:0; bottom:0; height: 100%; width:70%; | |
| } | |
| h2 { | |
| margin: 1em 0 0.5em 0; | |
| color: #254250; | |
| font-size: 18px; | |
| line-height: 40px; | |
| font-weight: normal; | |
| text-transform: uppercase; | |
| font-family: 'Orienta', sans-serif; | |
| letter-spacing: 1px; | |
| font-style: italic; | |
| } | |
| h3 { | |
| margin: 1em 0 0.5em 0; | |
| color: #a2aeb4; | |
| font-size: 15px; | |
| line-height: 40px; | |
| font-weight: normal; | |
| text-transform: uppercase; | |
| font-family: 'Orienta', sans-serif; | |
| letter-spacing: 1px; | |
| font-style: italic; | |
| } | |
| #features { | |
| padding: 10px; | |
| width: 29%; | |
| margin-left: 70%; | |
| font-family: sans-serif; | |
| h2 { color: #ffffff; font-family: 'Lato', sans-serif; font-size: 54px; font-weight: 300; line-height: 58px; margin: 0 0 58px; } | |
| } | |
| .aftermath, .ultramarine, .wall, .muras, .wales, .merlin, .scale { | |
| padding: 5px; | |
| font-family: sans-serif; | |
| background-color:#254250; | |
| color:#fff; | |
| opacity: 0.5; | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); | |
| margin:10px; | |
| } | |
| .leaflet-popup-content-wrapper .leaflet-popup-content { | |
| padding:5px; | |
| font-size:16px; | |
| line-height:24px; | |
| border-top-left-radius: 4px; | |
| border-top-right-radius: 4px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <div id="features"> | |
| <h2>Matthew Paris' Map of Britain</h2> | |
| This is one of four maps of Great Britain drawn by the 13th-century monk historian Matthew Paris. <br><br>The map shows Hadrian's Wall, with Scotland lying to the north of the wall. Northern England and Wales are to the south of the wall. Southern England has been torn off and lost. <br><br>You can click on most of the place-names. When you click on a medieval place-name on the map you can view the name we know it as today. | |
| <br><br> | |
| Let's take a tour around Matthew Paris' Map of Britain and examine some of the map's most interesting features. | |
| <br><br> | |
| <div class="scale"> | |
| <h3>The Size of Britain</h3> | |
| <p>A unique scale legend is included on the map in the form of four large lines of text running down the middle of the map between England and Wales. The text says that Briain is 800 Roman miles long and 300 miles wide. (Anglia habet in longitudine miliaria DCCC ... In Latitudine vero CCC).</p> | |
| </div> | |
| <div class="aftermath"> | |
| <h3>Sterling Bridge</h3> | |
| <p>The majority of Scotland is shown as an island, connected to the rest of Britain by Sterling Bridge, which is labeled 'Estriuelin pons' on the map</p> | |
| </div> | |
| <div class="ultramarine"> | |
| <h3>Ultramarine</h3> | |
| <p>The sense that Scotland is a separate island from England & Wales is reinforced by the place-name 'Scocia Ultramarina'. This describes Scotland as beyond the sea. </p> | |
| </div> | |
| <div class="wall"> | |
| <h3>Hadrian's Wall</h3> | |
| <p>Scotland is also divided from the rest of Britain by Hadrian's Wall. The wall is shown on the map stretching from Carlisle (carleolum) to Wallsend (wallesend). The text describing the wall reads 'The wall which divides the Angles and the Picts' (murus diuidens Anglos et pictos).</p> | |
| </div> | |
| <div class="muras"> | |
| <h3>Antonine Wall</h3> | |
| <p>Scotland is also divided from England by a second Roman wall, the Antonine Wall. This is shown on the map by a single line labeled 'murus scotorum' (Scots Wall). The Antonine Wall was a turf fortification on stone foundations, built by the Romans across what is now the Central Belt of Scotland, between the Firth of Forth and the Firth of Clyde.</p> | |
| </div> | |
| <div class="wales"> | |
| <h3>Wales</h3> | |
| <p>Wales is described on the map as "A mountainous and half-marshy land of busy and productive but bellicose men descended from the Trojan Brutus". <br><br>In medieval British history Brutus, or Brute of Troy, the legendary descendant of the Trojan hero Aeneas, is seen as the eponymous founder and first king of Britain. When Matthew Paris says that the Welsh are 'descended from the Trojan Brutus' he presumably is suggesting that they have a direct line back to the very first Britains (descended from Brutus and his fellow Trojans).</p> | |
| </div> | |
| <div class="merlin"> | |
| <h3>Merlin</h3> | |
| <p>This isn't the only role that myth plays in Paris' descriptipns of Wales. On the map the Welsh town now called Carmarthen is labeled as 'caermerdin id est civitas Merlini'. Translated from Latin this reads 'Caermerdin, i.e. the city of Merlin'.</p> | |
| </div> | |
| <h2>Map labels</h2> | |
| <p>You can continue to explore the map on your own. Most of the place-names | |
| on the map are interactive. If you click on them you can read the modern English | |
| translation.</p> | |
| <p>I've translated around 80% of the place-names and Latin text on the map. However | |
| I haven't been able to read all of Matthew Paris' map labels. So my apologies | |
| for the untranslated towns on the map.</p> | |
| <p>If you are intrigued about the torn off half of Britain then you might want | |
| to refer to one of the other three Mathew Paris maps of Britain. The <a href="https://www.bl.uk/collection-items/matthew-paris-map-of-britain">one | |
| owned by the British Library</a> includes Southern England. | |
| <p>If you want to explore more interactive maps then why not head over to <a href="https://googlemapsmania.blogspot.com/">Maps | |
| Mania</a>. | |
| </div> | |
| <script type="text/javascript"> | |
| var map, stanfordMlk; | |
| map = L.map('map', { | |
| center: [0, 0], | |
| crs: L.CRS.Simple, | |
| zoom: 4 | |
| }); | |
| stanfordMlk = L.tileLayer.iiif('https://stacks.stanford.edu/image/iiif/rb378fk5493%2F016I_iv_V_TC_46/info.json', { | |
| attribution: '<a href="https://searchworks.stanford.edu/">This work is copyright of the Master and Fellows of Corpus Christi College, Cambridge and is licensed under a Creative Common Attribution-NonCommercial 4.0 International License. ', | |
| maxZoom: 5, | |
| tileSize: 512 | |
| }).addTo(map); | |
| setTimeout(myTimeout1, 1000) | |
| function myTimeout1() { | |
| map.setView([-99.88,97.00], 3); | |
| } | |
| L.polygon([ | |
| [-148.563,28.563], | |
| [-148.813,48.250], | |
| [-161.188,44.375], | |
| [-159.969,27.906] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Carmarthen<br><br>The Welsh town now called Carmarthen is labelled on Maththew Paris' map as 'caermerdin id est civitas Merlini'. Translated from Latin this reads 'Caermerdin, i.e. the city of Merlin'."); | |
| L.polygon([ | |
| [-127.094,132.844], | |
| [-128.250,145.313], | |
| [-141.125,147.000], | |
| [-140.844,132.063] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("York <br>(Eboracum"); | |
| L.polygon([ | |
| [-108.688,122.531], | |
| [-110.375,137.344], | |
| [-115.469,137.531], | |
| [-114.531,122.188] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Durham <br>(Dunelmu)"); | |
| L.polygon([ | |
| [-95.031,139.313], | |
| [-95.656,151.156], | |
| [-100.500,150.094], | |
| [-100.844,140.281] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Tynemouth <br>(Thinemue).<br><br> A fortified monastry had been in Tynemouth since the 7th century."); | |
| L.polygon([ | |
| [-110.156,102.063], | |
| [-110.156,118.719], | |
| [-114.938,119.469], | |
| [-116.000,102.969] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Weardale<br> (Werdale). <br><br>Weardale is a dale, or valley, of the east side of the Pennines in County Durham"); | |
| L.polygon([ | |
| [-80.188,31.375], | |
| [-80.938,59.563], | |
| [-84.969,58.156], | |
| [-83.938,31.781] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Galloway <br>(Galeweia). <br><br>On the map Scotland is divided into six regions Galloway (Galeweia), Fife (Fiif), Ross (Ros), Caithness (Katenes), Srathearn (Sratherne) and Sutherland (Sutherland)."); | |
| L.polygon([ | |
| [-32.5,61.25], | |
| [-32.5,78.00], | |
| [-41.75,75.50], | |
| [-41.031,59.719] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Ross <br>(Ros).<br><br> On the map Scotland is divided into six regions Galloway (Galeweia), Fife (Fiif), Ross (Ros), Caithness (Katenes), Srathearn (Sratherne) and Sutherland (Sutherland)."); | |
| L.polygon([ | |
| [-15.31,92.19], | |
| [-13.344,114.969], | |
| [-22.500,115.906], | |
| [-23.844,91.656] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Caithness <br>(Katenes). <br><br>On the map Scotland is divided into six regions Galloway (Galeweia), Fife (Fiif), Ross (Ros), Caithness (Katenes), Srathearn (Sratherne) and Sutherland (Sutherland)."); | |
| L.polygon([ | |
| [-52.344,111.531], | |
| [-51.875,130.625], | |
| [-59.250,129.625], | |
| [-59.406,112.281] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Strathearn <br>(Sratherne). <br><br>On the map Scotland is divided into six regions Galloway (Galeweia), Fife (Fiif), Ross (Ros), Caithness (Katenes), Srathearn (Sratherne) and Sutherland (Sutherland)."); | |
| L.polygon([ | |
| [-14,128.500], | |
| [-14,143.125], | |
| [-19.250,141.938], | |
| [-18.156,128.656] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Aberdeen <br>(Aberden)"); | |
| L.polygon([ | |
| [-30.281,140.6885], | |
| [-31.063,151.188], | |
| [-35.375,150.469], | |
| [-34.063,140.375] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Dundee<br> (Dunde)"); | |
| L.polygon([ | |
| [-46.250,134.750], | |
| [-47.219,150.219], | |
| [-54.219,150.500], | |
| [-54.781,135.656] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Fife <br>(Fiif).<br><br> On the map Scotland is divided into six regions Galloway (Galeweia), Fife (Fiif), Ross (Ros), Caithness (Katenes), Srathearn (Sratherne) and Sutherland (Sutherland)."); | |
| L.polygon([ | |
| [-89.906,128.344], | |
| [-90.688,142.781], | |
| [-94.781,140.375], | |
| [-94.219,126.531] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Wallsend <br>(wallesend).<br><br>Wallsend derives its name from being the location of the end of Hadrian's Wall."); | |
| L.polygon([ | |
| [-96.750,53.375], | |
| [-97.469,67.031], | |
| [-102.938,68.031], | |
| [-103.031,54.000] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Carlisle <br>(carleolum).<br><br> The name derives from Celtic 'cair' for fortified town. Carlisle was originally established by the Roman's to serve the forts on Hadrian's Wall"); | |
| L.polygon([ | |
| [-92.375,59.906], | |
| [-91.031,84.063], | |
| [-102.438,84.688], | |
| [-101.125,68.438], | |
| [-96.188,67.531], | |
| [-96.969,59.344] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("The wall which divides the Angles and the Picts.<br><br> (murus diuidens Anglos et pictos)"); | |
| L.polygon([ | |
| [-19.219,143.844], | |
| [-18.000,179.875], | |
| [-28.188,180.875], | |
| [-27.094,142.156] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Sutherland <br>(Sutherland). <br><br>On the map Scotland is divided into six regions Galloway (Galeweia), Fife (Fiif), Ross (Ros), Caithness (Katenes), Srathearn (Sratherne) and Sutherland (Sutherland)."); | |
| L.polygon([ | |
| [-39.406,79.000], | |
| [-42.219,134.531], | |
| [-48.656,135.875], | |
| [-49.875,78.156] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Scotland Beyond the Sea <br>(Scocia Ultramarina). <br><br>The description of Scotland as beyond the sea is reflected in Paris' map, which depicts Scotland as an island seperated from the rest of Britain by Stirling Bridge."); | |
| L.polygon([ | |
| [-24.13,86.81], | |
| [-25.56,139], | |
| [-38.06,139], | |
| [-39.31,83.44] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("The region is mountainous and woody, creating a pastoral and uncultivated nation, because of the marsh and reeds. <br><br>(regio montuosa et nemorosa, gentem incultam generans et pastoralem, quia pars eius mariscus est et harundinetum)."); | |
| L.polygon([ | |
| [-48.00,57.31], | |
| [-49.69,91.31], | |
| [-54.56,88.63], | |
| [-53.00,58.44] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("A damp and impassable region. <br>(regio invia et aquosa)"); | |
| L.polygon([ | |
| [-38.50,138.31], | |
| [-40.94,154.69], | |
| [-46.38,153.50], | |
| [-45.44,138.00] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Town of St. Andrews<br> (civitas St Andree)"); | |
| L.polygon([ | |
| [-56.406,95.844], | |
| [-54.844,113.250], | |
| [-61.156,112.750], | |
| [-62.563,96.250] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Dunfermline <br> (Dunfirmelin)"); | |
| L.polygon([ | |
| [-12.531,147.688], | |
| [-13.844,164.500], | |
| [-19.156,161.156], | |
| [-18.781,147.813] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Arbroath <br> (Aberbropoc)"); | |
| L.polygon([ | |
| [-24.969,72.719], | |
| [-25.156,86.156], | |
| [-32.375,85.281], | |
| [-32.500,71.438] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Castle Dingwall <br> (castrum dinkwal)"); | |
| L.polygon([ | |
| [-68.656,70.125], | |
| [-69.000,87.625], | |
| [-75.438,87.594], | |
| [-74.938,68.219] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Clydesdale <br> (cludsdale)"); | |
| L.polygon([ | |
| [-69.344,109.219], | |
| [-69.438,126.031], | |
| [-73.969,125.719], | |
| [-73.750,109.031] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Peebles <br> (tuedsedale)"); | |
| L.polygon([ | |
| [-84.813,63.906], | |
| [-85.688,84.406], | |
| [-90.906,83.844], | |
| [-90.000,62.969] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Region of the Picts <br> (regio pictorum)"); | |
| L.polygon([ | |
| [-79.844,15.531], | |
| [-80.656,23.625], | |
| [-93.063,20.500], | |
| [-92.250,12.125] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Isle of Man <br> (man)"); | |
| L.polygon([ | |
| [-85.531,85.000], | |
| [-85.688,109.500], | |
| [-93.875,109.000], | |
| [-94.219,83.219] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("The Cheviot Hills <br> (montes chiviti)"); | |
| L.polygon([ | |
| [-73.000,55.531], | |
| [-73.531,67.438], | |
| [-78.781,67.313], | |
| [-77.594,56.063] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("The River Clyde <br> (fluvius clud)"); | |
| L.polygon([ | |
| [-66.19,41.38], | |
| [-66.88,56.50], | |
| [-74.56,54.94], | |
| [-73.88,41.25] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Dumbarton<br> (Dunbrutan)"); | |
| L.polygon([ | |
| [-72.563,121.500], | |
| [-72.625,128.469], | |
| [-78.594,129.125], | |
| [-78.719,120.563] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("River Tweed<br> (fluvius tuid)"); | |
| L.polygon([ | |
| [-73.875,110.344], | |
| [-73.938,122.031], | |
| [-78.719,120.625], | |
| [-78.563,110.031] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("River Teviot<br> (fluvius tiveth)"); | |
| L.polygon([ | |
| [-85.781,135.281], | |
| [-85.625,141.344], | |
| [-88.344,141.219], | |
| [-88.156,135.500] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Coquet<br> (coc)"); | |
| L.polygon([ | |
| [-85.531,38.594], | |
| [-85.469,58.188], | |
| [-94.031,59.094], | |
| [-92.781,38.500] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Bishopric at Whithorn<br> (Episcopatus unus sive candida casa)<br> (bishop of the white house)"); | |
| L.polygon([ | |
| [-76.375,95.219], | |
| [-76.250,106.000], | |
| [-81.750,105.875], | |
| [-81.094,94.375] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Glasgow<br> (Glasgu)"); | |
| L.polygon([ | |
| [-73.750,130.156], | |
| [-72.813,140.344], | |
| [-79.438,141.719], | |
| [-79.375,130.375] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Edinburgh<br> (edeneburc)"); | |
| L.polygon([ | |
| [-82.000,113.219], | |
| [-81.875,122.063], | |
| [-88.125,121.938], | |
| [-88.031,112.688] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Roxburgh<br> (Rokesburc)"); | |
| L.polygon([ | |
| [-79.81,120.38], | |
| [-80.00,128.50], | |
| [-87.44,127.75], | |
| [-89.13,121.75] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Kelso<br> (kelstoe)"); | |
| L.polygon([ | |
| [-79.938,131.375], | |
| [-79.656,144.406], | |
| [-84.781,145.344], | |
| [-84.094,131.281] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Berwick<br> (berewic)"); | |
| L.polygon([ | |
| [-142.94,25.81], | |
| [-142.81,65.13], | |
| [-158.81,67.13], | |
| [-158.25,44.94], | |
| [-150.38,44.69], | |
| [-149.19,27.63] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("A mountainous and half-marshy land of busy and productive but bellicose men descended from the Trojan Brutus.<br><br> (Terra montuosa et palustris homines agiles generans et billicose de Bruto propagatus, qui a Troiannus duxit originem)"); | |
| L.polygon([ | |
| [-160.156,42.563], | |
| [-160.750,64.906], | |
| [-168.188,64.500], | |
| [-170.063,42.250] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("South Wales<br>(Suth Wallia)<br><br>Wales is divided into three regions or counties - Suth Wallia, north Wallia and Sein."); | |
| L.polygon([ | |
| [-102.375,32.938], | |
| [-101.313,45.031], | |
| [-107.219,45.281], | |
| [-107.469,33.250] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("North Wales<br>(north Wallia)<br><br>Wales is divided into three regions or counties - Suth Wallia, north Wallia and Sein."); | |
| L.polygon([ | |
| [-102.15,69.563], | |
| [-102.438,77.563], | |
| [-105.031,77.375], | |
| [-106.531,69.344] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Chain<br>(Sein)<br><br>Wales is divided into three regions or counties - Suth Wallia, north Wallia and Sein.<br><br>Chain is an old name for West Moreland."); | |
| L.polygon([ | |
| [-127.781,26.000], | |
| [-127.563,53.344], | |
| [-132.750,53.188], | |
| [-135.656,26.438] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Wales<br>(Wallia)"); | |
| L.polygon([ | |
| [-170.875,44.719], | |
| [-170.844,68.125], | |
| [-179.125,67.938], | |
| [-179.688,44.688] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("South Wales is described as a 'marshy and mountainous area'<br><br>(regio palustris et invia ac montuosa.)"); | |
| L.polygon([ | |
| [-116.188,27.969], | |
| [-109.719,43.719], | |
| [-113.656,45.250], | |
| [-119.719,28.250] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Mount Snowdon<br>(Mons Snaudun)"); | |
| L.polygon([ | |
| [-117.250,48.969], | |
| [-115.281,60.625], | |
| [-117.719,67.719], | |
| [-122.969,74.500], | |
| [-124.906,74.156], | |
| [-122.063,67.750], | |
| [-119.281,63.344], | |
| [-119.906,50.219] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Severn River and Sea<br>(sabrina fluvius quod mare )"); | |
| L.polygon([ | |
| [-137.156,61.563], | |
| [-136.781,70.250], | |
| [-145.094,71.969], | |
| [-143.906,62.000] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("River Usk<br>(Oske fluvius)"); | |
| L.polygon([ | |
| [-106.125,33.844], | |
| [-107.250,45.000], | |
| [-110.625,44.813], | |
| [-111.000,33.156] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Bangor<br>(Bangor)"); | |
| L.polygon([ | |
| [-118.344,18.625], | |
| [-118.563,28.250], | |
| [-129.031,29.125], | |
| [-128.188,16.563] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("St. David's<br>(St David Menevia)"); | |
| L.polygon([ | |
| [-138.906,44.469], | |
| [-137.750,57.625], | |
| [-143.063,56.688], | |
| [-142.844,43.938] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Llandaff<br>(Landaf)"); | |
| L.polygon([ | |
| [-97.031,23.531], | |
| [-95.344,35.500], | |
| [-101.750,35.938], | |
| [-104.594,23.469] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Anglesey<br>(Englesia insula)"); | |
| L.polygon([ | |
| [-120.125,58.406], | |
| [-120.188,62.906], | |
| [-122.344,68.250], | |
| [-125.594,68.281], | |
| [-125.156,58.219] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Pola Abbey<br>(pola ab)"); | |
| L.polygon([ | |
| [-126.500,69.688], | |
| [-127.250,76.656], | |
| [-137.031,77.094], | |
| [-135.969,70.906] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Shrewsbury<br>(salopreber)"); | |
| L.polygon([ | |
| [-137.19,73.38], | |
| [-139.88,80.69], | |
| [-148.31,81.00], | |
| [-148.25,74.69] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Bridgenorth<br>(Bruge)"); | |
| L.polygon([ | |
| [-147.969,71.219], | |
| [-149.063,86.375], | |
| [-153.000,87.000], | |
| [-152.688,70.875] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Worcester<br>(Wigornia)"); | |
| L.polygon([ | |
| [-154.56,71.06], | |
| [-154.906,88.281], | |
| [-160.250,87.688], | |
| [-160.063,70.813] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Tewkesbury<br>(Theokesbri)"); | |
| L.polygon([ | |
| [-168.969,70.688], | |
| [-169.094,83.313], | |
| [-173.750,82.938], | |
| [-172.781,69.188] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Gloucester<br>(Glovernia)"); | |
| L.polygon([ | |
| [-111.250,59.875], | |
| [-111.188,68.219], | |
| [-113.906,67.563], | |
| [-114.375,60.188] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("St. Asaph<br>(asaf)"); | |
| L.polygon([ | |
| [-97.375,115.781], | |
| [-95.406,128.625], | |
| [-99.313,128.656], | |
| [-101.656,116.469] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Tynedale<br>(tindale)"); | |
| L.polygon([ | |
| [-112.781,145.375], | |
| [-112.906,154.469], | |
| [-121.938,153.875], | |
| [-121.750,146.000] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("North Riding<br>(Blackamor)"); | |
| L.polygon([ | |
| [-107.250,95.188], | |
| [-107.469,104.406], | |
| [-110.438,103.219], | |
| [-110.000,94.500] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("River Tyne<br>(thine)"); | |
| L.polygon([ | |
| [-113.594,92.531], | |
| [-114.531,99.594], | |
| [-118.500,99.188], | |
| [-117.406,92.938] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("River Wear<br>(Wer)"); | |
| L.polygon([ | |
| [-120.656,93.500], | |
| [-121.750,102.000], | |
| [-125.000,101.656], | |
| [-124.938,93.094] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("River Tees<br>(therse)"); | |
| L.polygon([ | |
| [-117.531,118.406], | |
| [-117.875,133.500], | |
| [-121.938,133.469], | |
| [-120.750,117.938] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Northallerton<br>(Alvertona)"); | |
| L.polygon([ | |
| [-126.594,118.063], | |
| [-126.719,131.719], | |
| [-130.125,131.094], | |
| [-129.531,117.750] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Boroughbridge<br>(Pons Burgi)"); | |
| L.polygon([ | |
| [-134.719,114.031], | |
| [-134.719,128.094], | |
| [-139.688,127.969], | |
| [-139.031,113.281] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Pontefract<br>(Pons Fractus)"); | |
| L.polygon([ | |
| [-145.125,110.906], | |
| [-146.563,125.438], | |
| [-150.125,125.469], | |
| [-150.000,110.344] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Doncaster<br>(Danecastro)"); | |
| L.polygon([ | |
| [-158.219,130.188], | |
| [-158.844,141.313], | |
| [-163.344,141.688], | |
| [-162.594,129.438] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Lincoln<br>(Lincolnia)"); | |
| L.polygon([ | |
| [-164.969,105.375], | |
| [-165.500,120.875], | |
| [-169.375,119.844], | |
| [-169.281,104.969] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Newark<br>(Neuwerc)"); | |
| L.polygon([ | |
| [-124.406,105.000], | |
| [-123.406,112.531], | |
| [-131.563,112.750], | |
| [-131.781,104.813] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Fountains Abbey<br>(Fontes Abbatia)"); | |
| L.polygon([ | |
| [-104.438,108.219], | |
| [-101.094,117.469], | |
| [-108.313,118.156], | |
| [-109.281,109.344] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Corbridge-on-Tyne<br>(Corbruge)"); | |
| L.polygon([ | |
| [-56.31,81.75], | |
| [-56.625,95.188], | |
| [-64.500,95.438], | |
| [-64.750,81.625] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Scotland is joined to the rest of Britain only by a bridge at Stirling.<br>(Estriuelin pons)"); | |
| L.polygon([ | |
| [-100.219,123.406], | |
| [-99.844,134.313], | |
| [-108.469,133.813], | |
| [-107.563,124.531] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Newcastle.<br>(Nouucastrum)"); | |
| L.polygon([ | |
| [-80.969,67.781], | |
| [-81.000,86.219], | |
| [-84.875,85.281], | |
| [-84.531,67.781] | |
| ], { | |
| color: 'red', | |
| opacity:0, | |
| fillColor: '#f03', | |
| fillOpacity: 0 | |
| } | |
| ).addTo(map).bindPopup("Scots Wall<br>(murus scotorum)<br><br>The Antonine Wall was a turf fortification on stone foundations, built by the Romans across what is now the Central Belt of Scotland, between the Firth of Forth and the Firth of Clyde. <br><br>On Paris' map the Antonine Wall is indicated by a single line."); | |
| //scroll action | |
| $('.scale').waypoint(function(direction) { | |
| if (direction === 'down') { | |
| map.setView([-136.38,94.88], 3); | |
| this.style.opacity = 1; | |
| } | |
| }, { offset: '40%' }); | |
| $('.scale').waypoint(function(direction) { | |
| if (direction === 'down') { | |
| this.style.opacity = 0.5; | |
| } | |
| }, { offset: '10%' }); | |
| $('.aftermath').waypoint(function(direction) { | |
| if (direction === 'down') { | |
| map.setView([-59.984,87.844], 6); | |
| this.style.opacity = 1; | |
| } | |
| }, { offset: '40%' }); | |
| $('.aftermath').waypoint(function(direction) { | |
| if (direction === 'down') { | |
| this.style.opacity = 0.5; | |
| } | |
| }, { offset: '10%' }); | |
| $('.ultramarine').waypoint(function(direction) { | |
| if (direction === 'down') { | |
| map.setView([-45.66,105.81], 4); | |
| this.style.opacity = 1; | |
| } | |
| }, { offset: '40%' }); | |
| $('.ultramarine').waypoint(function(direction) { | |
| if (direction === 'down') { | |
| this.style.opacity = 0.5; | |
| } | |
| }, { offset: '10%' }); | |
| $('.wall').waypoint(function(direction) { | |
| if (direction === 'down') { | |
| map.setView([-96.41,93.13], 3); | |
| this.style.opacity = 1; | |
| } | |
| }, { offset: '40%' }); | |
| $('.wall').waypoint(function(direction) { | |
| if (direction === 'down') { | |
| this.style.opacity = 0.5; | |
| } | |
| }, { offset: '10%' }); | |
| $('.muras').waypoint(function(direction) { | |
| if (direction === 'down') { | |
| map.setView([-86.66,80.31], 4); | |
| this.style.opacity = 1; | |
| } | |
| }, { offset: '40%' }); | |
| $('.muras').waypoint(function(direction) { | |
| if (direction === 'down') { | |
| this.style.opacity = 0.5; | |
| } | |
| }, { offset: '10%' }); | |
| $('.wales').waypoint(function(direction) { | |
| if (direction === 'down') { | |
| map.setView([-153.03,47.75], 4); | |
| this.style.opacity = 1; | |
| } | |
| }, { offset: '40%' }); | |
| $('.wales').waypoint(function(direction) { | |
| if (direction === 'down') { | |
| this.style.opacity = 0.5; | |
| } | |
| }, { offset: '10%' }); | |
| $('.merlin').waypoint(function(direction) { | |
| if (direction === 'down') { | |
| map.setView([-154.047,35.156], 5); | |
| this.style.opacity = 1; | |
| } | |
| }, { offset: '40%' }); | |
| $('.merlin').waypoint(function(direction) { | |
| if (direction === 'down') { | |
| this.style.opacity = 0.5; | |
| } | |
| }, { offset: '10%' }); | |
| $('.scale').waypoint(function(direction) { | |
| if (direction === 'up') { | |
| map.setView([-136.38,94.88], 3); | |
| this.style.opacity = 1; | |
| } | |
| }, { offset: '30%' }); | |
| $('.scale').waypoint(function(direction) { | |
| if (direction === 'up') { | |
| this.style.opacity = 0.5; | |
| } | |
| }, { offset: '70%' }); | |
| $('.aftermath').waypoint(function(direction) { | |
| if (direction === 'up') { | |
| map.setView([-59.984,87.844], 6); | |
| this.style.opacity = 1; | |
| } | |
| }, { offset: '30%' }); | |
| $('.aftermath').waypoint(function(direction) { | |
| if (direction === 'up') { | |
| this.style.opacity = 0.5; | |
| } | |
| }, { offset: '70%' }); | |
| $('.ultramarine').waypoint(function(direction) { | |
| if (direction === 'up') { | |
| map.setView([-45.66,105.81], 4); | |
| this.style.opacity = 1; | |
| } | |
| }, { offset: '30%' }); | |
| $('.ultramarine').waypoint(function(direction) { | |
| if (direction === 'up') { | |
| this.style.opacity = 0.5; | |
| } | |
| }, { offset: '70%' }); | |
| $('.wall').waypoint(function(direction) { | |
| if (direction === 'up') { | |
| map.setView([-96.41,93.13], 3); | |
| this.style.opacity = 1; | |
| } | |
| }, { offset: '30%' }); | |
| $('.wall').waypoint(function(direction) { | |
| if (direction === 'up') { | |
| this.style.opacity = 0.5; | |
| } | |
| }, { offset: '70%' }); | |
| $('.muras').waypoint(function(direction) { | |
| if (direction === 'up') { | |
| map.setView([-86.66,80.31], 4); | |
| this.style.opacity = 1; | |
| } | |
| }, { offset: '30%' }); | |
| $('.muras').waypoint(function(direction) { | |
| if (direction === 'up') { | |
| this.style.opacity = 0.5; | |
| } | |
| }, { offset: '70%' }); | |
| $('.wales').waypoint(function(direction) { | |
| if (direction === 'up') { | |
| map.setView([-153.03,47.75], 4); | |
| this.style.opacity = 1; | |
| } | |
| }, { offset: '30%' }); | |
| $('.wales').waypoint(function(direction) { | |
| if (direction === 'up') { | |
| this.style.opacity = 0.5; | |
| } | |
| }, { offset: '70%' }); | |
| $('.merlin').waypoint(function(direction) { | |
| if (direction === 'up') { | |
| map.setView([-154.047,35.156], 5); | |
| this.style.opacity = 1; | |
| } | |
| }, { offset: '30%' }); | |
| $('.merlin').waypoint(function(direction) { | |
| if (direction === 'up') { | |
| this.style.opacity = 0.5; | |
| } | |
| }, { offset: '70%' }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * Leaflet-IIIF 1.2.1 | |
| * IIIF Viewer for Leaflet | |
| * by Jack Reed, @mejackreed | |
| */ | |
| L.TileLayer.Iiif = L.TileLayer.extend({ | |
| options: { | |
| continuousWorld: true, | |
| tileSize: 256, | |
| updateWhenIdle: true, | |
| tileFormat: 'jpg', | |
| fitBounds: true, | |
| setMaxBounds: false | |
| }, | |
| initialize: function(url, options) { | |
| options = typeof options !== 'undefined' ? options : {}; | |
| if (options.maxZoom) { | |
| this._customMaxZoom = true; | |
| } | |
| // Check for explicit tileSize set | |
| if (options.tileSize) { | |
| this._explicitTileSize = true; | |
| } | |
| // Check for an explicit quality | |
| if (options.quality) { | |
| this._explicitQuality = true; | |
| } | |
| options = L.setOptions(this, options); | |
| this._infoDeferred = new $.Deferred(); | |
| this._infoUrl = url; | |
| this._baseUrl = this._templateUrl(); | |
| this._getInfo(); | |
| }, | |
| getTileUrl: function(coords) { | |
| var _this = this, | |
| x = coords.x, | |
| y = (coords.y), | |
| zoom = _this._getZoomForUrl(), | |
| scale = Math.pow(2, _this.maxNativeZoom - zoom), | |
| tileBaseSize = _this.options.tileSize * scale, | |
| minx = (x * tileBaseSize), | |
| miny = (y * tileBaseSize), | |
| maxx = Math.min(minx + tileBaseSize, _this.x), | |
| maxy = Math.min(miny + tileBaseSize, _this.y); | |
| var xDiff = (maxx - minx); | |
| var yDiff = (maxy - miny); | |
| return L.Util.template(this._baseUrl, L.extend({ | |
| format: _this.options.tileFormat, | |
| quality: _this.quality, | |
| region: [minx, miny, xDiff, yDiff].join(','), | |
| rotation: 0, | |
| size: Math.ceil(xDiff / scale) + ',' | |
| }, this.options)); | |
| }, | |
| onAdd: function(map) { | |
| var _this = this; | |
| // Wait for deferred to complete | |
| $.when(_this._infoDeferred).done(function() { | |
| // Set maxZoom for map | |
| map._layersMaxZoom = _this.maxZoom; | |
| // Call add TileLayer | |
| L.TileLayer.prototype.onAdd.call(_this, map); | |
| if (_this.options.fitBounds) { | |
| _this._fitBounds(); | |
| } | |
| if(_this.options.setMaxBounds) { | |
| _this._setMaxBounds(); | |
| } | |
| // Reset tile sizes to handle non 256x256 IIIF tiles | |
| _this.on('tileload', function(tile, url) { | |
| var height = tile.tile.naturalHeight, | |
| width = tile.tile.naturalWidth; | |
| // No need to resize if tile is 256 x 256 | |
| if (height === 256 && width === 256) return; | |
| tile.tile.style.width = width + 'px'; | |
| tile.tile.style.height = height + 'px'; | |
| }); | |
| }); | |
| }, | |
| onRemove: function(map) { | |
| var _this = this; | |
| // Remove maxBounds set for this image | |
| if(_this.options.setMaxBounds) { | |
| map.setMaxBounds(null); | |
| } | |
| // Call remove TileLayer | |
| L.TileLayer.prototype.onRemove.call(_this, map); | |
| }, | |
| _fitBounds: function() { | |
| var _this = this; | |
| // Find best zoom level and center map | |
| var initialZoom = _this._getInitialZoom(_this._map.getSize()); | |
| var imageSize = _this._imageSizes[initialZoom]; | |
| var sw = _this._map.options.crs.pointToLatLng(L.point(0, imageSize.y), initialZoom); | |
| var ne = _this._map.options.crs.pointToLatLng(L.point(imageSize.x, 0), initialZoom); | |
| var bounds = L.latLngBounds(sw, ne); | |
| _this._map.fitBounds(bounds, true); | |
| }, | |
| _setMaxBounds: function() { | |
| var _this = this; | |
| // Find best zoom level, center map, and constrain viewer | |
| var initialZoom = _this._getInitialZoom(_this._map.getSize()); | |
| var imageSize = _this._imageSizes[initialZoom]; | |
| var sw = _this._map.options.crs.pointToLatLng(L.point(0, imageSize.y), initialZoom); | |
| var ne = _this._map.options.crs.pointToLatLng(L.point(imageSize.x, 0), initialZoom); | |
| var bounds = L.latLngBounds(sw, ne); | |
| _this._map.setMaxBounds(bounds, true); | |
| }, | |
| _getInfo: function() { | |
| var _this = this; | |
| // Look for a way to do this without jQuery | |
| $.getJSON(_this._infoUrl) | |
| .done(function(data) { | |
| _this.y = data.height; | |
| _this.x = data.width; | |
| var tierSizes = [], | |
| imageSizes = [], | |
| scale, | |
| width_, | |
| height_, | |
| tilesX_, | |
| tilesY_; | |
| // Set quality based off of IIIF version | |
| if (data.profile instanceof Array) { | |
| _this.profile = data.profile[0]; | |
| }else { | |
| _this.profile = data.profile; | |
| } | |
| _this._setQuality(); | |
| // Unless an explicit tileSize is set, use a preferred tileSize | |
| if (!_this._explicitTileSize) { | |
| // Set the default first | |
| _this.options.tileSize = 256; | |
| if (data.tiles) { | |
| // Image API 2.0 Case | |
| _this.options.tileSize = data.tiles[0].width; | |
| } else if (data.tile_width){ | |
| // Image API 1.1 Case | |
| _this.options.tileSize = data.tile_width; | |
| } | |
| } | |
| function ceilLog2(x) { | |
| return Math.ceil(Math.log(x) / Math.LN2); | |
| }; | |
| // Calculates maximum native zoom for the layer | |
| _this.maxNativeZoom = Math.max(ceilLog2(_this.x / _this.options.tileSize), | |
| ceilLog2(_this.y / _this.options.tileSize)); | |
| // Enable zooming further than native if maxZoom option supplied | |
| if (_this._customMaxZoom && _this.options.maxZoom > _this.maxNativeZoom) { | |
| _this.maxZoom = _this.options.maxZoom; | |
| } | |
| else { | |
| _this.maxZoom = _this.maxNativeZoom; | |
| } | |
| for (var i = 0; i <= _this.maxZoom; i++) { | |
| scale = Math.pow(2, _this.maxNativeZoom - i); | |
| width_ = Math.ceil(_this.x / scale); | |
| height_ = Math.ceil(_this.y / scale); | |
| tilesX_ = Math.ceil(width_ / _this.options.tileSize); | |
| tilesY_ = Math.ceil(height_ / _this.options.tileSize); | |
| tierSizes.push([tilesX_, tilesY_]); | |
| imageSizes.push(L.point(width_,height_)); | |
| } | |
| _this._tierSizes = tierSizes; | |
| _this._imageSizes = imageSizes; | |
| // Resolved Deferred to initiate tilelayer load | |
| _this._infoDeferred.resolve(); | |
| }); | |
| }, | |
| _setQuality: function() { | |
| var _this = this; | |
| var profileToCheck = _this.profile; | |
| if (_this._explicitQuality) { | |
| return; | |
| } | |
| // If profile is an object | |
| if (typeof(profileToCheck) === 'object') { | |
| profileToCheck = profileToCheck['@id']; | |
| } | |
| // Set the quality based on the IIIF compliance level | |
| switch (true) { | |
| case /^http:\/\/library.stanford.edu\/iiif\/image-api\/1.1\/compliance.html.*$/.test(profileToCheck): | |
| _this.options.quality = 'native'; | |
| break; | |
| // Assume later profiles and set to default | |
| default: | |
| _this.options.quality = 'default'; | |
| break; | |
| } | |
| }, | |
| _infoToBaseUrl: function() { | |
| return this._infoUrl.replace('info.json', ''); | |
| }, | |
| _templateUrl: function() { | |
| return this._infoToBaseUrl() + '{region}/{size}/{rotation}/{quality}.{format}'; | |
| }, | |
| _isValidTile: function(coords) { | |
| var _this = this, | |
| zoom = _this._getZoomForUrl(), | |
| sizes = _this._tierSizes[zoom], | |
| x = coords.x, | |
| y = (coords.y); | |
| if (!sizes) return false; | |
| if (x < 0 || sizes[0] <= x || y < 0 || sizes[1] <= y) { | |
| return false; | |
| }else { | |
| return true; | |
| } | |
| }, | |
| _getInitialZoom: function (mapSize) { | |
| var _this = this, | |
| tolerance = 0.8, | |
| imageSize; | |
| for (var i = _this.maxNativeZoom; i >= 0; i--) { | |
| imageSize = this._imageSizes[i]; | |
| if (imageSize.x * tolerance < mapSize.x && imageSize.y * tolerance < mapSize.y) { | |
| return i; | |
| } | |
| } | |
| // return a default zoom | |
| return 2; | |
| } | |
| }); | |
| L.tileLayer.iiif = function(url, options) { | |
| return new L.TileLayer.Iiif(url, options); | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Generated by CoffeeScript 1.6.2 | |
| /* | |
| jQuery Waypoints - v2.0.3 | |
| Copyright (c) 2011-2013 Caleb Troughton | |
| Dual licensed under the MIT license and GPL license. | |
| https://github.com/imakewebthings/jquery-waypoints/blob/master/licenses.txt | |
| */ | |
| (function(){var t=[].indexOf||function(t){for(var e=0,n=this.length;e<n;e++){if(e in this&&this[e]===t)return e}return-1},e=[].slice;(function(t,e){if(typeof define==="function"&&define.amd){return define("waypoints",["jquery"],function(n){return e(n,t)})}else{return e(t.jQuery,t)}})(this,function(n,r){var i,o,l,s,f,u,a,c,h,d,p,y,v,w,g,m;i=n(r);c=t.call(r,"ontouchstart")>=0;s={horizontal:{},vertical:{}};f=1;a={};u="waypoints-context-id";p="resize.waypoints";y="scroll.waypoints";v=1;w="waypoints-waypoint-ids";g="waypoint";m="waypoints";o=function(){function t(t){var e=this;this.$element=t;this.element=t[0];this.didResize=false;this.didScroll=false;this.id="context"+f++;this.oldScroll={x:t.scrollLeft(),y:t.scrollTop()};this.waypoints={horizontal:{},vertical:{}};t.data(u,this.id);a[this.id]=this;t.bind(y,function(){var t;if(!(e.didScroll||c)){e.didScroll=true;t=function(){e.doScroll();return e.didScroll=false};return r.setTimeout(t,n[m].settings.scrollThrottle)}});t.bind(p,function(){var t;if(!e.didResize){e.didResize=true;t=function(){n[m]("refresh");return e.didResize=false};return r.setTimeout(t,n[m].settings.resizeThrottle)}})}t.prototype.doScroll=function(){var t,e=this;t={horizontal:{newScroll:this.$element.scrollLeft(),oldScroll:this.oldScroll.x,forward:"right",backward:"left"},vertical:{newScroll:this.$element.scrollTop(),oldScroll:this.oldScroll.y,forward:"down",backward:"up"}};if(c&&(!t.vertical.oldScroll||!t.vertical.newScroll)){n[m]("refresh")}n.each(t,function(t,r){var i,o,l;l=[];o=r.newScroll>r.oldScroll;i=o?r.forward:r.backward;n.each(e.waypoints[t],function(t,e){var n,i;if(r.oldScroll<(n=e.offset)&&n<=r.newScroll){return l.push(e)}else if(r.newScroll<(i=e.offset)&&i<=r.oldScroll){return l.push(e)}});l.sort(function(t,e){return t.offset-e.offset});if(!o){l.reverse()}return n.each(l,function(t,e){if(e.options.continuous||t===l.length-1){return e.trigger([i])}})});return this.oldScroll={x:t.horizontal.newScroll,y:t.vertical.newScroll}};t.prototype.refresh=function(){var t,e,r,i=this;r=n.isWindow(this.element);e=this.$element.offset();this.doScroll();t={horizontal:{contextOffset:r?0:e.left,contextScroll:r?0:this.oldScroll.x,contextDimension:this.$element.width(),oldScroll:this.oldScroll.x,forward:"right",backward:"left",offsetProp:"left"},vertical:{contextOffset:r?0:e.top,contextScroll:r?0:this.oldScroll.y,contextDimension:r?n[m]("viewportHeight"):this.$element.height(),oldScroll:this.oldScroll.y,forward:"down",backward:"up",offsetProp:"top"}};return n.each(t,function(t,e){return n.each(i.waypoints[t],function(t,r){var i,o,l,s,f;i=r.options.offset;l=r.offset;o=n.isWindow(r.element)?0:r.$element.offset()[e.offsetProp];if(n.isFunction(i)){i=i.apply(r.element)}else if(typeof i==="string"){i=parseFloat(i);if(r.options.offset.indexOf("%")>-1){i=Math.ceil(e.contextDimension*i/100)}}r.offset=o-e.contextOffset+e.contextScroll-i;if(r.options.onlyOnScroll&&l!=null||!r.enabled){return}if(l!==null&&l<(s=e.oldScroll)&&s<=r.offset){return r.trigger([e.backward])}else if(l!==null&&l>(f=e.oldScroll)&&f>=r.offset){return r.trigger([e.forward])}else if(l===null&&e.oldScroll>=r.offset){return r.trigger([e.forward])}})})};t.prototype.checkEmpty=function(){if(n.isEmptyObject(this.waypoints.horizontal)&&n.isEmptyObject(this.waypoints.vertical)){this.$element.unbind([p,y].join(" "));return delete a[this.id]}};return t}();l=function(){function t(t,e,r){var i,o;r=n.extend({},n.fn[g].defaults,r);if(r.offset==="bottom-in-view"){r.offset=function(){var t;t=n[m]("viewportHeight");if(!n.isWindow(e.element)){t=e.$element.height()}return t-n(this).outerHeight()}}this.$element=t;this.element=t[0];this.axis=r.horizontal?"horizontal":"vertical";this.callback=r.handler;this.context=e;this.enabled=r.enabled;this.id="waypoints"+v++;this.offset=null;this.options=r;e.waypoints[this.axis][this.id]=this;s[this.axis][this.id]=this;i=(o=t.data(w))!=null?o:[];i.push(this.id);t.data(w,i)}t.prototype.trigger=function(t){if(!this.enabled){return}if(this.callback!=null){this.callback.apply(this.element,t)}if(this.options.triggerOnce){return this.destroy()}};t.prototype.disable=function(){return this.enabled=false};t.prototype.enable=function(){this.context.refresh();return this.enabled=true};t.prototype.destroy=function(){delete s[this.axis][this.id];delete this.context.waypoints[this.axis][this.id];return this.context.checkEmpty()};t.getWaypointsByElement=function(t){var e,r;r=n(t).data(w);if(!r){return[]}e=n.extend({},s.horizontal,s.vertical);return n.map(r,function(t){return e[t]})};return t}();d={init:function(t,e){var r;if(e==null){e={}}if((r=e.handler)==null){e.handler=t}this.each(function(){var t,r,i,s;t=n(this);i=(s=e.context)!=null?s:n.fn[g].defaults.context;if(!n.isWindow(i)){i=t.closest(i)}i=n(i);r=a[i.data(u)];if(!r){r=new o(i)}return new l(t,r,e)});n[m]("refresh");return this},disable:function(){return d._invoke(this,"disable")},enable:function(){return d._invoke(this,"enable")},destroy:function(){return d._invoke(this,"destroy")},prev:function(t,e){return d._traverse.call(this,t,e,function(t,e,n){if(e>0){return t.push(n[e-1])}})},next:function(t,e){return d._traverse.call(this,t,e,function(t,e,n){if(e<n.length-1){return t.push(n[e+1])}})},_traverse:function(t,e,i){var o,l;if(t==null){t="vertical"}if(e==null){e=r}l=h.aggregate(e);o=[];this.each(function(){var e;e=n.inArray(this,l[t]);return i(o,e,l[t])});return this.pushStack(o)},_invoke:function(t,e){t.each(function(){var t;t=l.getWaypointsByElement(this);return n.each(t,function(t,n){n[e]();return true})});return this}};n.fn[g]=function(){var t,r;r=arguments[0],t=2>=arguments.length?e.call(arguments,1):[];if(d[r]){return d[r].apply(this,t)}else if(n.isFunction(r)){return d.init.apply(this,arguments)}else if(n.isPlainObject(r)){return d.init.apply(this,[null,r])}else if(!r){return n.error("jQuery Waypoints needs a callback function or handler option.")}else{return n.error("The "+r+" method does not exist in jQuery Waypoints.")}};n.fn[g].defaults={context:r,continuous:true,enabled:true,horizontal:false,offset:0,triggerOnce:false};h={refresh:function(){return n.each(a,function(t,e){return e.refresh()})},viewportHeight:function(){var t;return(t=r.innerHeight)!=null?t:i.height()},aggregate:function(t){var e,r,i;e=s;if(t){e=(i=a[n(t).data(u)])!=null?i.waypoints:void 0}if(!e){return[]}r={horizontal:[],vertical:[]};n.each(r,function(t,i){n.each(e[t],function(t,e){return i.push(e)});i.sort(function(t,e){return t.offset-e.offset});r[t]=n.map(i,function(t){return t.element});return r[t]=n.unique(r[t])});return r},above:function(t){if(t==null){t=r}return h._filter(t,"vertical",function(t,e){return e.offset<=t.oldScroll.y})},below:function(t){if(t==null){t=r}return h._filter(t,"vertical",function(t,e){return e.offset>t.oldScroll.y})},left:function(t){if(t==null){t=r}return h._filter(t,"horizontal",function(t,e){return e.offset<=t.oldScroll.x})},right:function(t){if(t==null){t=r}return h._filter(t,"horizontal",function(t,e){return e.offset>t.oldScroll.x})},enable:function(){return h._invoke("enable")},disable:function(){return h._invoke("disable")},destroy:function(){return h._invoke("destroy")},extendFn:function(t,e){return d[t]=e},_invoke:function(t){var e;e=n.extend({},s.vertical,s.horizontal);return n.each(e,function(e,n){n[t]();return true})},_filter:function(t,e,r){var i,o;i=a[n(t).data(u)];if(!i){return[]}o=[];n.each(i.waypoints[e],function(t,e){if(r(i,e)){return o.push(e)}});o.sort(function(t,e){return t.offset-e.offset});return n.map(o,function(t){return t.element})}};n[m]=function(){var t,n;n=arguments[0],t=2<=arguments.length?e.call(arguments,1):[];if(h[n]){return h[n].apply(null,t)}else{return h.aggregate.call(null,n)}};n[m].settings={resizeThrottle:100,scrollThrottle:30};return i.load(function(){return n[m]("refresh")})})}).call(this); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment