ol-map-screenshot
Version:
A simple and easy-to-use library to provide the OpenLayers map screenshot.
105 lines (95 loc) • 5.24 kB
HTML
<html><head><meta charset="utf-8"><title>OpenLayers Map Screenshot Demo</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="demo.6312aa21.css"><link href="prism.0ff39440.css" rel="stylesheet"><link rel="stylesheet" href="ol-map-screenshot-demo.39c95c43.css"></head><body> <div class="container"> <div class="text-center"> <h1 class="h2 py-3">ol-map-screenshot library demo</h1> <p>It allows you to export an OpenLayers map as a PNG / JPG image or PDF document.</p> </div> <div class="row"> <div class="col-3"> <div id="loader" class="text-right lead" style="display:none"> <small class="text-muted"> Loading...<i class="fas fa-circle-notch fa-spin fa-3x fa-fw"></i> </small> </div> </div> <div class="col-6 text-center"> <div class="btn-group mr-2 mb-3"> <button id="export-jpeg-button" type="button" class="btn btn-sm btn-outline-secondary"><i class="fa fa-download"></i> JPEG</button> <button id="export-png-button" type="button" class="btn btn-sm btn-outline-secondary"><i class="fa fa-download"></i> PNG</button> <button id="export-pdf-button" type="button" class="btn btn-sm btn-outline-secondary"><i class="fa fa-file-pdf-o"></i> PDF</button> </div> </div> <div class="col-3"></div> </div> <div class="row"> <div class="col-12"> <div id="map"></div> </div> </div> <div class="row-fluid"> <pre><legend>index.html</legend><code id="example-html-source" class="language-markup">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OpenLayers Map Screenshot</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
#map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<button id="export-jpeg-button" type="button"> JPEG</button>
<button id="export-png-button" type="button"> PNG</button>
<button id="export-pdf-button" type="button"> PDF</button>
<div id='map'></div>
</body>
</html>
</code></pre> </div> <div class="row-fluid"> <pre><legend>index.js</legend><code id="example-js-source" class="language-js">
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import olMapScreenshot from 'ol-map-screenshot';
import '@fortawesome/fontawesome-free/css/all.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import jsPDF from 'jspdf';
const map = new Map({
layers: [
new TileLayer({
source: new OSM()
})
],
target: 'map',
view: new View({
center: [-531626.1241455, 4563250.0861921],
zoom: 14
})
});
const mapScreenshotParam = {
dim: [190, 160]
};
document.getElementById('export-jpeg-button').onclick = async() => {
doDonwload('map-screenshot.jpg');
};
document.getElementById('export-png-button').onclick = async() => {
mapScreenshotParam.format = "png";
doDonwload('map-screenshot.png');
};
document.getElementById('export-pdf-button').onclick = async() => {
mapScreenshotParam.format = "jpeg";
const response = await doScreenshot();
createPDFDocument(response);
};
function createPDFDocument(data) {
const pdf = new jsPDF('p', 'mm', 'a4');
pdf.setFont("times");
pdf.setFontSize(16);
pdf.setFontStyle("bold");
const title = "ol-map-screenshop example!";
const pageWidth = pdf.internal.pageSize.getWidth();
pdf.text((pageWidth / 2) - (title.length), 20, title);
pdf.text(pageWidth, 20, title);
pdf.setFontSize(10);
pdf.setFontStyle("italic");
pdf.text(10, 28, "Location: Córdoba, Andalucia, España");
pdf.addImage(data.img, 'JPEG', 10, 30, data.w, data.h);
pdf.save('map-screenshot.pdf');
}
async function doDonwload(fileName) {
const response = await doScreenshot();
const element = document.createElement('a');
element.setAttribute('href', response.img);
element.setAttribute('download', fileName);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
async function doScreenshot() {
try {
return await olMapScreenshot.getScreenshot(map, mapScreenshotParam);
} catch (ex) {
showloader(false);
alert(ex.message);
}
}
</code></pre></div> </div> <script src="prism.min.f56599be.js"></script> <script src="ol-map-screenshot-demo.1b114e34.js"></script>
</body></html>