31:T8a6,viewof map = { const target = html`

`; yield target; // Give the container dimensions. const map = target.value = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer ], target, view: new ol.View({ center: ol.proj.fromLonLat([-77.41, 37.5]), zoom: 4 }) }); var dims = { a0: [1189, 841], a1: [841, 594], a2: [594, 420], a3: [420, 297], a4: [297, 210], a5: [210, 148] }; // export options for html-to-image. // See: https://github.com/bubkoo/html-to-image#options var exportOptions = { filter: function(element) { return element.className.indexOf('ol-control') === -1; } }; var exportButton = document.getElementById('export-pdf'); exportButton.addEventListener( 'click', function() { exportButton.disabled = true; document.body.style.cursor = 'progress'; var format = document.getElementById('format').value; var resolution = document.getElementById('resolution').value; console.log(format, resolution); var dim = dims[format]; var width = Math.round(dim[0] * resolution / 25.4); var height = Math.round(dim[1] * resolution / 25.4); var size = map.getSize(); var viewResolution = map.getView().getResolution(); map.once('rendercomplete', function() { exportOptions.width = width; exportOptions.height = height; html_to_image.toJpeg(map.getViewport(), exportOptions).then(function(dataUrl) { var pdf = new jsPDF('landscape', undefined, format); pdf.addImage(dataUrl, 'JPEG', 0, 0, dim[0], dim[1]); pdf.save('map.pdf'); // Reset original map size map.setSize(size); map.getView().setResolution(viewResolution); exportButton.disabled = false; document.body.style.cursor = 'auto'; }); }); // Set print size var printSize = [width, height]; map.setSize(printSize); var scaling = Math.min(width / size[0], height / size[1]); map.getView().setResolution(viewResolution / scaling); }, false); invalidation.then(() => map.dispose()); return target; }32:[] 2f:{"title":"Printable OpenLayers w/ Natural Earth Lakes and Reservoirs [GeoJSON]","cells":[{"id":0,"value":"md`\n# Printable OpenLayers w/ Natural Earth Lakes and Reservoirs [GeoJSON]\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"md`\nThis notebook ports this example to Observable [OpenLayers: Export PDF](https://openlayers.org/en/latest/examples/export-pdf.html) in response to [this forum question](https://talk.observablehq.com/t/save-a-map-openlayers/2598) by [Maxime Hebrard](https://observablehq.com/@mhebrard)\n\n**The data layer may take a moment to load.** Also, if [bundle.run](https://bundle.run/) is down, so too will be this notebook.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"md`\nThanks to [@bryangingechen](https://observablehq.com/@bryangingechen) for [doing all the difficult troubleshooting in getting this to work](https://talk.observablehq.com/t/save-a-map-openlayers/2598/6)!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"html`\n

\n \n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"vectorLayer = {\n \n let vectorSource = new ol.source.Vector({\n url: \"https://raw.githubusercontent.com/aaronkyle/geospatial-data/master/ne_10m_lakes.geojson\",\n format: new ol.format.GeoJSON()\n });\n \n const vectorLayer = new ol.layer.Vector({\n source: vectorSource,\n });\n \n return vectorLayer;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"map.getTargetElement()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"ol = {\n // OpenLayers doesn’t publish a build to npm. :(\n const ol = await require(\"https://openlayers.org/en/v6.1.1/build/ol.js\").catch(() => window.ol);\n if (!ol.css) ol.css = document.head.appendChild(html``);\n return ol;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"html_to_image = require('https://bundle.run/html-to-image@0.1.1/lib/index.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"jsPDF = require('https://bundle.run/jspdf@1.5.3/dist/jspdf.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}