Map Race Games

by Keir Clarke

HTML

<script src="https://fonts.googleapis.com/css?family=Sancreek"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.0.2/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">

  <label class="radio inline">
    <input type="radio" name="sex" id="myRadio" class="hands" checked>
    <span> Tour England & Wales </span>
  </label>
  <label class="radio inline">
    <input type="radio" name="sex" id="myButton" class="myButton">
    <span> Overland Mail</span>
  </label>
  <label class="radio inline">
    <input type="radio" name="sex" id="veil" class="veil">
    <span> Pirate Game</span>
  </label>
  <label class="radio inline">
    <input type="radio" name="sex" id="produce" class="produce">
    <span> Produce Game</span>
  </label>
  <label class="radio inline">
    <input type="radio" name="sex" id="railway" class="railway">
    <span> Railway Game</span>
  </label>
  <label class="radio inline">
    <input type="radio" name="sex" id="walkers" class="walkers">
    <span> Walkers Game</span>
  </label>
  <label class="radio inline">
    <input type="radio" name="sex" id="travel" class="travel">
    <span> Travellers of Europe</span>
  </label>

</div>
<div id="text">

  <div align="center">
    <h3>Maps Mania's Spectacular Compendium of Victorian Map Games </h3>
  </div>
</div>

CSS

html,
	body,
	#map {
	  height: 92%;
	  margin: 0;
	}
	
	#nav {
	  background-color: #20101D;
	  padding: 5px;
	  text-align: center;
	}
	
	#text {
	  font-family: 'arial';
	  padding: 5px;
	}
	
	h3 {
	  margin: 0px;
	  padding-top: 20px;
	  font-size: 40px;
	  font-family: 'Sancreek', cursive;
	}
	
	.inline {
	  display: inline-block;
	}
	
	.inline + .inline {
	  margin-left: 10px;
	}
	
	.radio {
	  color: #999;
	  font-size: 15px;
	  position: relative;
	}
	
	.radio span {
	  position: relative;
	  padding-left: 20px;
	}
	
	.radio span:after {
	  content: '';
	  width: 15px;
	  height: 15px;
	  border: 3px solid;
	  position: absolute;
	  left: 0;
	  top: 1px;
	  border-radius: 100%;
	  -ms-border-radius: 100%;
	  -moz-border-radius: 100%;
	  -webkit-border-radius: 100%;
	  box-sizing: border-box;
	  -ms-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  -webkit-box-sizing: border-box;
	}
	
	.radio input[type="radio"] {
	  cursor: pointer;
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  z-index: 1;
	  opacity: 0;
	  filter: alpha(opacity=0);
	  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
	}
	
	.radio input[type="radio"]:checked + span {
	  color: #0B8;
	}
	
	.radio input[type="radio"]:checked + span:before {
	  content: '';
	  width: 5px;
	  height: 5px;
	  position: absolute;
	  background: #0B8;
	  left: 5px;
	  top: 6px;
	  border-radius: 100%;
	  -ms-border-radius: 100%;
	  -moz-border-radius: 100%;
	  -webkit-border-radius: 100%;
	}

JavaScript

var map;
var iiifLayers = {};
var iiifLayers2 = {};
var iiifLayers3 = {};
var iiifLayers4 = {};
var iiifLayers5 = {};
var iiifLayers6 = {};
var iiifLayers7 = {};

map = L.map('map', {
  center: [0, 0],
  crs: L.CRS.Simple,
  zoom: 2
});

var manifestUrl = 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/51372634-f77b-4840-93c3-d8972d906413.json';
var overlandmail = 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/35ae0bfb-122d-44b1-b46a-f1a4f26cadce.json';
var pirategame = 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/8f2e34a1-c86a-4ed4-9a52-17afc7c57b21.json';
var producegame = 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/4e7d99f1-9b0e-4fc4-a0ed-d26db2e74bc7.json';
var railwaygame = 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/0d6e8dcb-a2d9-4a16-961a-f2e9d875d53d.json';
var walkersgame = 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/83d6b647-837c-46fc-ba06-1ad4249bc484.json';
var travelgame = 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/a5c530d2-ecf7-468b-8f62-e68d0529e6a7.json';


// Grab a IIIF manifest
$.getJSON(manifestUrl, function(data) {
  // For each image create a L.TileLayer.Iiif object and add that to an object literal for the layer control
  $.each(data.sequences[0].canvases, function(_, val) {
    iiifLayers[val.label] = L.tileLayer.iiif(val.images[0].resource.service['@id'] + '/info.json');
  });
  // Access the first Iiif object and add it to the map
  iiifLayers[Object.keys(iiifLayers)[0]].addTo(map);
});


// bind click event to the story divs
$('.myButton').on('click', function() {
  $.getJSON(overlandmail, function(data) {

    // For each image create a L.TileLayer.Iiif object and add that to an object literal for the layer control
    $.each(data.sequences[0].canvases, function(_, val) {
      iiifLayers2[val.label] = L.tileLayer.iiif(val.images[0].resource.service['@id'] + '/info.json');
    });
    // Access the first Iiif object and add it to the map


    map.eachLayer(function(layer) {
      map.removeLayer(layer);
    });
   ...