Mona Lisa Style

by Keir Clarke

HTML

<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css">
<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">
  <button class="myButton" data-point="-238.5,235.8">Eyes</button>
  <button class="hands" data-point="-38.3,129.3">Text</button>
  <button class="smile" data-point="-120.5,189.5">Background</button>
  <button class="veil" data-point="-507,252">Coat</button>
</div>
<div id="text">
  <br>Vincent Van Gogh sent his 'Self-Portrait Dedicated to Paul Gauguin' to Gauguin in 1888. Shortly after he sent the work to Gauguin, however, their friendship deteriorated, and Gauguin sold it for three hundred francs.
</div>

CSS

html,
	body,
	#map {
	  height: 92%;
	  margin: 0;
	}
	
	#nav {
	  background-color: #20101D;
	  padding: 5px;
	  text-align: center;
	}
	
	#text {
	  padding: 5px;
	  font-family: arial;
	}
	
	.myButton,
	.hands,
	.smile,
	.veil {
	  -moz-box-shadow: inset 0px 1px 3px 0px #CFA64E;
	  -webkit-box-shadow: inset 0px 1px 3px 0px #CFA64E;
	  box-shadow: inset 0px 1px 3px 0px #CFA64E;
	  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #CFA64E), color-stop(1, #E4BA66));
	  background: -moz-linear-gradient(top, #CFA64E 5%, #E4BA66 100%);
	  background: -webkit-linear-gradient(top, #CFA64E 5%, #E4BA66 100%);
	  background: -o-linear-gradient(top, #CFA64E 5%, #E4BA66 100%);
	  background: -ms-linear-gradient(top, #CFA64E 5%, #E4BA66 100%);
	  background: linear-gradient(to bottom, #CFA64E 5%, #E4BA66 100%);
	  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#CFA64E', endColorstr='#E4BA66', GradientType=0);
	  background-color: #ababab;
	  -moz-border-radius: 5px;
	  -webkit-border-radius: 5px;
	  border-radius: 5px;
	  border: 1px solid #566963;
	  display: inline-block;
	  cursor: pointer;
	  color: #000000;
	  font-family: arial;
	  font-size: 12px;
	  font-weight: bold;
	  padding: 5px 15px;
	  text-decoration: none;
	  text-shadow: 0px -1px 0px #2b665e;

JavaScript

var map;
var iiifLayers = {};

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

var manifestUrl = 'https://iiif.harvardartmuseums.org/manifests/object/299843';

// 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');
  });
  // Add layers control to the map
  L.control.layers(iiifLayers).addTo(map);

  // 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() {
  // parse lat and lng from the divs data attribute
  var latlng = $(this).data().point.split(',');
  var lat = latlng[0];
  var lng = latlng[1];
  var zoom = 2;

  // set the view
  map.setView([lat, lng], zoom);
  document.getElementById('text').innerHTML = "<br>The brush strokes in this self-portrait wrap around the eyes. In a letter to his brother Van Gogh wrote, 'I have made the eyes slightly slanting like the Japanese'. The strong cheek bones make it seem like the artist's skull is almost pushing through his skin. The bones underneath his flesh therefore almost acting as a momento-mori."

})

$('.hands').on('click', function() {
  // parse lat and lng from the divs data attribute
  var latlng = $(this).data().point.split(',');
  var lat = latlng[0];
  var lng = latlng[1];
  var zoom = 4;

  // set the view
  map.setView([lat, lng], zoom);
  document.getElementById('text').innerHTML = "<br>At the top of the painting you can just see some faded letters which read 'à mon ami Paul'. There is now some debate about who attempted to erase this dedication. It could have been Van Gogh himself or Gauguin or even someone else. "

})

$('.smile').on('click', function() {
  // parse lat and...