Leaflet

If the image above isn't showing up reload the page.

Below is the code used for the above example. You can read the code comments to learn about what each part does.

This HTML code sets everything up.

<!-- Load Leaflet CSS and and JavaScript -->
<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>

<!-- The Leaflet-IIIF plugin depends on jQuery. -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Load the Leaflet-IIIF plugin -->
<script src="https://unpkg.com/leaflet-iiif@1.2.1"></script>

<!-- Create a div with an id that can be referred to. Set a height and width for the div. -->
<div id="map" style="width:100%;height:400px;"></div>

This HTML code of a short script uses the info.json for a resource to load it into the Leaflet viewer.

<!-- Note: The setTimeout bit is just hackery for gitbook -->
<script>
  setTimeout(function(){
    var map = L.map('map', {
      center: [0, 0],
      crs: L.CRS.Simple,
      zoom: 0
    });
    L.tileLayer.iiif('https://iiif.lib.ncsu.edu/iiif/mc00042-005-ff0033-000-001_0001/info.json').addTo(map);
  }, 2000);
</script>