mapsmania/index.html

## index.html
<!DOCTYPE html>
  <head>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <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>


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

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

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

	.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="nav">
      </div>
	<div id="text" ><br>
  Bird's eye view of Sherbrooke, P.Q. [Sherbrooke, Québec: s.n, 1881] Map. <a href="https://www.loc.gov/item/95684855/">https://www.loc.gov/item/95684855/</a>.
</div>

<script type="text/javascript">

	var map;
var iiifLayers = {};

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

var manifestUrl = 'https://www.loc.gov/item/95684855/manifest.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);
});


L.marker([-216.09,129.56]).addTo(map)
		.bindPopup("<b>Methodist Episcopal Church</b><br />");

		L.marker([-178.91,183.63]).addTo(map)
		.bindPopup("<b>Roman Catholic Church</b><br />");

		L.marker([-176.78,308.06]).addTo(map)
		.bindPopup("<b>Post Office</b><br />");

		L.marker([-185.84,316.31]).addTo(map)
		.bindPopup("<b>Magog Carriage Manufactory </b><br />");

		L.marker([-195.53,218.19]).addTo(map)
		.bindPopup("<b>Young Ladies Academy</b><br />");

		L.marker([-281.28,51.69]).addTo(map)
		.bindPopup("<b>Round House</b><br />");

		L.marker([-142.97,252.06]).addTo(map)
		.bindPopup("<b>Smith-Elkins Manufacturing Co., Shops</b><br />");

	</script>
  </body>
</html>
	<!DOCTYPE html>
	<head>

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<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>



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

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

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

	.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="nav">
	</div>
	<div id="text" ><br>
	Bird's eye view of Sherbrooke, P.Q. [Sherbrooke, Québec: s.n, 1881] Map. <a href="https://www.loc.gov/item/95684855/">https://www.loc.gov/item/95684855/</a>.
	</div>

	<script type="text/javascript">

	var map;
	var iiifLayers = {};

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

	var manifestUrl = 'https://www.loc.gov/item/95684855/manifest.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);
	});


	L.marker([-216.09,129.56]).addTo(map)
	.bindPopup("<b>Methodist Episcopal Church</b><br />");

	L.marker([-178.91,183.63]).addTo(map)
	.bindPopup("<b>Roman Catholic Church</b><br />");

	L.marker([-176.78,308.06]).addTo(map)
	.bindPopup("<b>Post Office</b><br />");

	L.marker([-185.84,316.31]).addTo(map)
	.bindPopup("<b>Magog Carriage Manufactory </b><br />");

	L.marker([-195.53,218.19]).addTo(map)
	.bindPopup("<b>Young Ladies Academy</b><br />");

	L.marker([-281.28,51.69]).addTo(map)
	.bindPopup("<b>Round House</b><br />");

	L.marker([-142.97,252.06]).addTo(map)
	.bindPopup("<b>Smith-Elkins Manufacturing Co., Shops</b><br />");

	</script>
	</body>
	</html>