Skip to content

Instantly share code, notes, and snippets.

@ThomasG77

ThomasG77/index.html

Created April 16, 2018 23:41
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ThomasG77/415906d5ac34bf710f8c2fbe42f48201 to your computer and use it in GitHub Desktop.
Save ThomasG77/415906d5ac34bf710f8c2fbe42f48201 to your computer and use it in GitHub Desktop.
Download ZIP
Map Export with PNGW & PRJ files
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Map Export with PNGW &amp; PRJ files</title>
<meta charset=utf-8>
<meta name=description content="">
<meta name=viewport content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<style type="text/css">
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
height: 80%;
}
</style>
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>
<script>
// this example uses FileSaver.js for which we don't have an externs file.
var view = new ol.View({
center: ol.proj.fromLonLat([
10.458984374999991,
41.96765920367818
]),
zoom: 2
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
source: new ol.source.Vector({
url: 'https://openlayers.org/en/v4.6.5/examples/data/geojson/countries.geojson',
format: new ol.format.GeoJSON()
})
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: {
collapsible: false
}
}),
view: view
});
document.getElementById('export-png').addEventListener('click', function() {
map.once('postcompose', function(event) {
var canvas = event.context.canvas;
var zip = new JSZip();
var currentResolution = view.getResolution();
var currentExtent = view.calculateExtent(); // Return [minx, miny, maxx, maxy]
var pngwContent = [
currentResolution,
0,
0,
-currentResolution,
currentExtent[0] + currentResolution / 0.5,
currentExtent[3] - currentResolution / 0.5
].join('\n');
// Add an top-level, arbitrary text file with contents
zip.file("map.pngw", pngwContent);
zip.file("map.prj", 'PROJCS["WGS 84 / Pseudo-Mercator",GEOGCS["WGS 84",DATUM["WGS_1984",SPHEROID["WGS 84",6378137,298.257223563,AUTHORITY["EPSG","7030"]],AUTHORITY["EPSG","6326"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4326"]],PROJECTION["Mercator_1SP"],PARAMETER["central_meridian",0],PARAMETER["scale_factor",1],PARAMETER["false_easting",0],PARAMETER["false_northing",0],UNIT["metre",1,AUTHORITY["EPSG","9001"]],AXIS["X",EAST],AXIS["Y",NORTH],EXTENSION["PROJ4","+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs"],AUTHORITY["EPSG","3857"]]');
// Add a file to the directory, in this case an image with data URI as contents
if (navigator.msSaveBlob) {
zip.file("map.png", canvas.msToBlob(), {base64: true});
zip.generateAsync({type:"blob"})
.then(function(content) {
// Force down of the Zip file
saveAs(content, "archive.zip");
})
} else {
canvas.toBlob(function(blob) {
// debugger;
zip.file("map.png", blob, {base64: true});
zip.generateAsync({type:"blob"})
.then(function(content) {
// Force down of the Zip file
saveAs(content, "archive.zip");
})
});
}
});
map.renderSync();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment