Use FileSaver.js in export-map example
Instead of relying on the download attribute.
This commit is contained in:
@@ -7,6 +7,7 @@
|
|||||||
"d3": false,
|
"d3": false,
|
||||||
"jsPDF": false,
|
"jsPDF": false,
|
||||||
"jsts": false,
|
"jsts": false,
|
||||||
|
"saveAs": false,
|
||||||
"topojson": false,
|
"topojson": false,
|
||||||
"turf": false
|
"turf": false
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -5,10 +5,8 @@ shortdesc: Example of exporting a map as a PNG image.
|
|||||||
docs: >
|
docs: >
|
||||||
Example of exporting a map as a PNG image.
|
Example of exporting a map as a PNG image.
|
||||||
tags: "export, png, openstreetmap"
|
tags: "export, png, openstreetmap"
|
||||||
|
resources:
|
||||||
|
- https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<div id="no-download" class="alert alert-danger" style="display: none">
|
<a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>
|
||||||
This example requires a browser that supports the
|
|
||||||
<a href="http://caniuse.com/#feat=download">link download</a> attribute.
|
|
||||||
</div>
|
|
||||||
<a id="export-png" class="btn btn-default" download="map.png"><i class="fa fa-download"></i> Download PNG</a>
|
|
||||||
|
|||||||
+10
-16
@@ -1,3 +1,5 @@
|
|||||||
|
// NOCOMPILE
|
||||||
|
// this example uses FileSaver.js for which we don't have an externs file.
|
||||||
goog.require('ol.Map');
|
goog.require('ol.Map');
|
||||||
goog.require('ol.View');
|
goog.require('ol.View');
|
||||||
goog.require('ol.control');
|
goog.require('ol.control');
|
||||||
@@ -31,20 +33,12 @@ var map = new ol.Map({
|
|||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
var exportPNGElement = document.getElementById('export-png');
|
document.getElementById('export-png').addEventListener('click', function() {
|
||||||
|
map.once('postcompose', function(event) {
|
||||||
if ('download' in exportPNGElement) {
|
var canvas = event.context.canvas;
|
||||||
exportPNGElement.addEventListener('click', function() {
|
canvas.toBlob(function(blob) {
|
||||||
map.once('postcompose', function(event) {
|
saveAs(blob, 'map.png');
|
||||||
var canvas = event.context.canvas;
|
|
||||||
exportPNGElement.href = canvas.toDataURL('image/png');
|
|
||||||
});
|
});
|
||||||
map.renderSync();
|
});
|
||||||
}, false);
|
map.renderSync();
|
||||||
} else {
|
});
|
||||||
var info = document.getElementById('no-download');
|
|
||||||
/**
|
|
||||||
* display error message
|
|
||||||
*/
|
|
||||||
info.style.display = '';
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user