JSFiddle - React, Tailwind, and code Playground

by gcandela

HTML

<!doctype html>
<!--
A minimal example showing how to display a IIIF manifest for a Europeana record
in the Leaflet-IIIF viewer.
Before running this, you need to change "YOUR_API_KEY" to your actual Europeana
API key. Get one at <http://labs.europeana.eu/api/registration>.
This example builds on Jack Reed's Leaflet-IIIF plugin example at
<http://mejackreed.github.io/Leaflet-IIIF/examples/iiif-manifest-example.js>
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Europeana Leaflet-IIIF example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
    <link rel="stylesheet" href="https://europeanastyleguide.a.cdnify.io/v0.2.62/js/modules/lib/iiif/iiif.css" />

    <style type="text/css">
      html, body, #map {
        height: 100%;
        margin: 0;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script
			  src="https://code.jquery.com/jquery-3.4.1.min.js"
			  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
			  crossorigin="anonymous"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://rawgit.com/mejackreed/Leaflet-IIIF/master/leaflet-iiif.js"></script>

    <script type="text/javascript">
      var recordId = '/9200211/en_list_one_vad_0342';
      var europeanaApiKey = 'J6W44jvPV';
      
      var apiUrl = 'https://www.europeana.eu/api/v2/record' + recordId + '.json?wskey=' + europeanaApiKey;
      $.getJSON(apiUrl, function(data) {
        var manifestUrl = data.object.aggregations[0].webResources[0].dctermsIsReferencedBy[0];
        
        manifestUrl = manifestUrl.replace('http:', '');

        var iiif;
        var iiifLayers = {};

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

        // Grab a IIIF manifest
...