This example uses the Leaflet draw plugin.
A basic example of out of the box Leaflet-IIIF using Leaflet draw. An annotation backend could be hooked up for storage.
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); | |
// Initialise the FeatureGroup to store editable layers | |
var drawnItems = new L.FeatureGroup(); | |
map.addLayer(drawnItems); | |
// Initialise the draw control and pass it the FeatureGroup of editable layers | |
var drawControl = new L.Control.Draw({ | |
edit: { | |
featureGroup: drawnItems | |
} | |
}); | |
map.addControl(drawControl); | |
map.on(L.Draw.Event.CREATED, function (e) { | |
var type = e.layerType | |
var layer = e.layer; | |
// Do whatever else you need to. (save to db, add to map etc) | |
drawnItems.addLayer(layer); | |
}); |
<!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.3.1/dist/leaflet.css" | |
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" | |
crossorigin=""/> | |
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.2/dist/leaflet.draw.css" /> | |
<link rel="stylesheet" href="styles.css"> | |
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" | |
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" | |
crossorigin=""></script> | |
<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/v2.0.1/leaflet-iiif.js"></script> | |
<script src="https://unpkg.com/leaflet-draw@1.0.2/dist/leaflet.draw.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; | |
} |