2f:null 30:["$","title",null,{"children":"Printable OpenLayers w/ Natural Earth Lakes and Reservoirs [GeoJSON] | Aaron Kyle Dennis | Observable"}] 35: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; }36:[] 33:{"id":"618c79c8e66d2ccf","slug":"printable-openlayers-with-natural-earth-lakes-and-reservo","title":"Printable OpenLayers w/ Natural Earth Lakes and Reservoirs [GeoJSON]","thumbnail":"db335c947baa86f9f8c79e64ca2a5323eab8ebe67ad4d17f33b588f55dc2a7da","access_level":"public","create_time":"$D2019-12-01T05:29:38.944Z","update_time":"$D2021-01-31T13:03:10.832Z","view_time":null,"first_public_time":"$D2019-12-06T02:46:49.698Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"8d652a601386fcf4","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":"starter_2024"},"version":191,"publish_version":191,"role":null,"authored":false,"authors":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}],"members":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"7cbfafa649b21931","slug":"ports","title":"Ports","owner":{"id":"8d652a601386fcf4","login":"aaronkyle","name":"Aaron Kyle Dennis"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"html`\n

\n \n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"map.getTargetElement()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"jsPDF = require('https://bundle.run/jspdf@1.5.3/dist/jspdf.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 34:"$33:body"