This example uses the Leaflet label plugin.
A quick proof of concept for labels in Leaflet-IIIF. This example parses open annotations and places them on the IIIF image.
| var map; | |
| map = L.map('map', { | |
| center: [0, 0], | |
| crs: L.CRS.Simple, | |
| zoom: 0 | |
| }); | |
| var baseLayer; | |
| var annoFeatures = new L.FeatureGroup(); | |
| map.addLayer(annoFeatures); | |
| $.getJSON('https://dms-data.stanford.edu/data/manifests/BnF/jr903ng8662/manifest.json', function(data) { | |
| var page = data.sequences[0].canvases[7]; | |
| baseLayer = L.tileLayer.iiif( | |
| page.images[0].resource.service['@id'] + '/info.json', | |
| { | |
| tileSize: 1024 | |
| } | |
| ).addTo(map); | |
| $.getJSON(page.otherContent[0]['@id'], function(annoData) { | |
| $.each(annoData.resources, function(i, value) { | |
| var b = /xywh=(.*)/.exec(value.on)[1].split(','); | |
| 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, 3); | |
| var max = map.unproject(maxPoint, 3); | |
| L.rectangle(L.latLngBounds(min, max)).bindLabel(value.resource.chars).addTo(map); | |
| }); | |
| }); | |
| }); |
| <!DOCTYPE html> | |
| <head> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" /> | |
| <link rel="stylesheet" href="https://cdn.rawgit.com/Leaflet/Leaflet.label/0.8/dist/leaflet.label.css" /> | |
| <link rel="stylesheet" href="styles.css"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> | |
| <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 src="https://cdn.rawgit.com/Leaflet/Leaflet.label/0.8/dist/leaflet.label.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; | |
| } |