An example of using Leaflet-IIIF display a cutting in a manuscript.
Example data is pulled from the IIIF manifest http://demos.biblissima-condorcet.fr/iiif/metadata/BVMM/chateauroux/manifest.json
An example of using Leaflet-IIIF display a cutting in a manuscript.
Example data is pulled from the IIIF manifest http://demos.biblissima-condorcet.fr/iiif/metadata/BVMM/chateauroux/manifest.json
var map = L.map('map', { | |
center: [0, 0], | |
crs: L.CRS.Simple, | |
zoom: 0, | |
}); | |
var inset; | |
var pageLayer = L.tileLayer.iiif('http://iiif.irht.cnrs.fr/iiif/Ch%C3%A2teauroux/B360446201_MS0005/jp2/B360446201_MS0005_0038/info.json') | |
.addTo(map); | |
var baseLayers = { | |
'Manuscript Page': pageLayer | |
} | |
var loaded = false | |
pageLayer.on('load', function() { | |
if (!loaded) { | |
var maxNativeZoom = pageLayer.maxNativeZoom; | |
var b = [3949, 994, 1091, 1232]; | |
var minPoint = L.point(b[0], b[1]); | |
var maxPoint = L.point(parseInt(b[0]) + parseInt(b[2]), parseInt(b[1]) + parseInt(b[3])); | |
var min = map.unproject(minPoint, maxNativeZoom); | |
var max = map.unproject(maxPoint, maxNativeZoom); | |
var bounds = L.latLngBounds(min, max); | |
var inset = L.imageOverlay('http://gallica.bnf.fr/iiif/ark:/12148/btv1b10511139b/f1/full/pct:25/0/native.jpg', bounds); | |
var imageOverlays = { | |
'Cutting': inset | |
} | |
L.control.layers(baseLayers, imageOverlays).addTo(map); | |
} | |
loaded = true; | |
}); |
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> | |
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /> | |
<link rel="stylesheet" href="styles.css"> | |
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> | |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
<script src="https://cdn.rawgit.com/mejackreed/Leaflet-IIIF/v1.0.1/leaflet-iiif.js"></script> | |
</head> | |
<body> | |
<div id="map"></div> | |
<script src="app.js"></script> | |
</body> | |
</html> |
MIT License | |
Copyright (c) 2016 Jack Reed | |
Permission is hereby granted, free of charge, to any person obtaining a copy | |
of this software and associated documentation files (the "Software"), to deal | |
in the Software without restriction, including without limitation the rights | |
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | |
copies of the Software, and to permit persons to whom the Software is | |
furnished to do so, subject to the following conditions: | |
The above copyright notice and this permission notice shall be included in all | |
copies or substantial portions of the Software. | |
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | |
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | |
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | |
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | |
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | |
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | |
SOFTWARE. |
html, body, #map{ | |
height: 100%; | |
margin: 0; | |
} | |
.leaflet-areaselect-container { | |
position:absolute; | |
width:100%; | |
height:100%; | |
} | |
#urlArea { | |
background-color: rgba(255, 255, 255, 0.5); | |
font-family: sans-serif; | |
position: absolute; | |
top: 0px; | |
left: 50%; | |
z-index: 100000; | |
} |