Dublin 1916

iiif manifests from UCD Digital Library

by Keir Clarke

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/mejackreed/Leaflet-IIIF/v1.2.1/leaflet-iiif.js"></script>
<div id="map"></div>
<div id="nav"></div>
<div id="text">1916 Rising Postcards - <a href="https://digital.ucd.ie/view/ucdlib:38376">from the UCD Digital Library</a>. Postcards in the UCD Digital Library which were published in 1916, in the immediate aftermath of the Insurrection.
  <br>
  <br>The Easter Rising, also known as the Easter Rebellion, was an armed insurrection in Ireland during Easter Week, April 1916.
</div>

CSS

html,
body,
#map {
  height: 92%;
  margin: 0;
}

#nav {
  background-color: #20101D;
  height: 25px;
  padding: 5px;
  text-align: center;
}

#text {
  padding: 5px;
  font-family: arial;
}

.myButton,
.hands,
.smile,
.veil {
  -moz-box-shadow: inset 0px 1px 3px 0px #CFA64E;
  -webkit-box-shadow: inset 0px 1px 3px 0px #CFA64E;
  box-shadow: inset 0px 1px 3px 0px #CFA64E;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #CFA64E), color-stop(1, #E4BA66));
  background: -moz-linear-gradient(top, #CFA64E 5%, #E4BA66 100%);
  background: -webkit-linear-gradient(top, #CFA64E 5%, #E4BA66 100%);
  background: -o-linear-gradient(top, #CFA64E 5%, #E4BA66 100%);
  background: -ms-linear-gradient(top, #CFA64E 5%, #E4BA66 100%);
  background: linear-gradient(to bottom, #CFA64E 5%, #E4BA66 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#CFA64E', endColorstr='#E4BA66', GradientType=0);
  background-color: #ababab;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #566963;
  display: inline-block;
  cursor: pointer;
  color: #000000;
  font-family: arial;
  font-size: 12px;
  font-weight: bold;
  padding: 5px 15px;
  text-decoration: none;
  text-shadow: 0px -1px 0px #2b665e;
}

JavaScript

var iiifLayers = {};
var manifestUrl = 'https://data.ucd.ie/api/img/manifests/ucdlib:38382';
var sackUrl = 'https://data.ucd.ie/api/img/manifests/ucdlib:38384';
var postUrl = 'https://data.ucd.ie/api/img/manifests/ucdlib:38386';
var ruinsUrl = 'https://data.ucd.ie/api/img/manifests/ucdlib:38387';
var edenUrl = 'https://data.ucd.ie/api/img/manifests/ucdlib:38392';
var carUrl = 'https://data.ucd.ie/api/img/manifests/ucdlib:38395';
var abbeyUrl = 'https://data.ucd.ie/api/img/manifests/ucdlib:38399';
var henryUrl = 'https://data.ucd.ie/api/img/manifests/ucdlib:38397';
var hotelUrl = 'https://data.ucd.ie/api/img/manifests/ucdlib:38406';
var talbotUrl = 'https://data.ucd.ie/api/img/manifests/ucdlib:38407';


var osmMap = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 18,
  attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
  id: 'mapbox.streets'
})


mymap = L.map('map', {
  center: [53.3483987, -6.2594141],
  zoom: 16,
  layers: [osmMap]
});


var mymarker = L.marker([53.3483685, -6.2556584]).addTo(mymap).on('click', onClick);
var sackmarker = L.marker([53.3496389, -6.260044]).addTo(mymap).on('click', markerOnClick);
var postmarker = L.marker([53.349349, -6.260721]).addTo(mymap).on('click', postOnClick);
var ruinsmarker = L.marker([53.347717, -6.2580214]).addTo(mymap).on('click', ruinsOnClick);
var edenmarker = L.marker([53.3479471, -6.2573327]).addTo(mymap).on('click', edenOnClick);
var carmarker = L.marker([53.3474412, -6.2598283]).addTo(mymap).on('click', carOnClick);
var abbeymarker = L.marker([53.3484302, -6.2595766]).addTo(mymap).on('click', abbeyOnClick);
var henrymarker = L.marker([53.3496709, -6.2611769]).addTo(mymap).on('click',...