D3 Examples - Zoomable image with Leaflet.js (Zoomify Layout)

Zoomable image with Leaflet.js (Zoomify Layout)

The famous Kunyu Wanguo Quantu map of Matteo Ricci is displayed using Leaflet.js.

Libvips has been used in order to generate tiles.

vips dzsave --layout zoomify

In order to load tiles with a zoomify layout, a specific plug-in ([1], [2]) has been employed.

A switch button above the Leaflet zoom in/out control have been included in order to toggle the visibility of the highlighted image portions.

xxxxxxxxxx
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Kunyu wanguo quan tu</title>
  <script src="https://d3js.org/d3.v3.min.js"></script>
​
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.min.js"></script>
  <script src="L.D3SvgOverlay.min.js"></script>
  <script src="L.TileLayer.Zoomify.js"></script>
  
  <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div id="map"></div>
  <script src="index.js"></script>
</body>
</html>
    