Skip to content

Instantly share code, notes, and snippets.

@danswick

danswick/index.html

Created October 30, 2015 22:07
Show Gist options
  • Save danswick/d30c44b081be31aea483 to your computer and use it in GitHub Desktop.
Save danswick/d30c44b081be31aea483 to your computer and use it in GitHub Desktop.
Download ZIP
save from leaflet draw
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Demo</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<!--Add mapbox.js -->
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />
<!--Add draw plugin -->
<link rel='stylesheet' href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.css' />
<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.js'></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#delete, #export {
position: absolute;
top:50px;
right:10px;
z-index:100;
background:white;
color:black;
padding:6px;
border-radius:4px;
font-family: 'Helvetica Neue';
cursor: pointer;
font-size:12px;
text-decoration:none;
}
#export {
top:90px;
}
</style>
</head>
<body>
<div id='map'></div>
<div id='delete'>Delete Features</div>
<a href='#' id='export'>Export Features</a>
<script>
var map = L.mapbox.map('map')
.setView([37.7711,-482.4424], 14);
// Add layers to the map
L.control.layers({
'Satellite Map': L.mapbox.tileLayer('bobbysud.map-l4i2m7nd', {
detectRetina: true
}).addTo(map),
'Terrain Map': L.mapbox.tileLayer('bobbysud.i2pfp2lb', {
detectRetina: true
})
}).addTo(map);
var featureGroup = L.featureGroup().addTo(map);
var drawControl = new L.Control.Draw({
edit: {
featureGroup: featureGroup
}
}).addTo(map);
map.on('draw:created', function(e) {
// Each time a feaute is created, it's added to the over arching feature group
featureGroup.addLayer(e.layer);
});
// on click, clear all layers
document.getElementById('delete').onclick = function(e) {
featureGroup.clearLayers();
}
document.getElementById('export').onclick = function(e) {
// Extract GeoJson from featureGroup
var data = featureGroup.toGeoJSON();
// Stringify the GeoJson
var convertedData = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data));
// Create export
document.getElementById('export').setAttribute('href', 'data:' + convertedData);
document.getElementById('export').setAttribute('download','data.geojson');
}
</script>
</body>
</html>
@kleysonr
Copy link

I'm trying to run and icons for drawing not appearing.

Getting the following error in the console:

GET file://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.css net::ERR_FILE_NOT_FOUND
index.html:16 GET file://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.js net::ERR_FILE_NOT_FOUND
index.html:71 Uncaught TypeError: L.Control.Draw is not a constructor
    at index.html:71

@brutaldigital
Copy link

Hi Dan,
Thanks for sharing. Could you post an example of how the base layer might be changed for a IIIF tiled image?
e.g. https://dlc.services/iiif-img/48/24/e7a4f78a-64bd-41fd-a760-e85823ed98dc/info.json
Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment