This is a beta version of migrating these workshop materials to a new platform. If you run into issues please file an issue or click on the edit link above and submit a pull request. You can use the previous version of the workshop materials as a fallback.

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. This HTML code of a short script uses the info.json for a resource to load it into the Leaflet viewer.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<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="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://unpkg.com/leaflet-iiif@1.2.1"></script>


<div id="map" style="width:100%;height:400px;"></div>


<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>