This example uses the Leaflet label plugin.
A quick proof of concept for labels in Leaflet-IIIF. This could quickly be adapted to use an annotation resource.
var map; | |
map = L.map('map', { | |
center: [0, 0], | |
crs: L.CRS.Simple, | |
zoom: 0 | |
}); | |
var baseLayer = L.tileLayer.iiif( | |
'https://stacks.stanford.edu/image/iiif/cv770rd9515%2F0767_23A_SM/info.json' | |
).addTo(map); | |
L.marker([-60.625, 27.625]) | |
.bindLabel('Steve Jobs', { noHide: true }) | |
.addTo(map); | |
L.polygon([ | |
[-87.25, 77.625], | |
[-91.375, 103.625], | |
[-97.625, 102.275], | |
[-92.75, 76], | |
]).bindLabel('Staff Mass Storage GA', { noHide: true }).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; | |
} |