29:null 2a:["$","title",null,{"children":"PRINTABLE: OpenLayers w/ GEOJSON Lakes & Reservoirs - Natural Earth (not working) | Bryan Gin-ge Chen | Observable"}] 2f:T881,viewof map = { form; 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 }) })); // 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 = [100, 100]; 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; }30:[] 2d:{"id":"3f7eb2589bfd3cc1","slug":null,"title":"PRINTABLE: OpenLayers w/ GEOJSON Lakes & Reservoirs - Natural Earth (not working)","thumbnail":"db335c947baa86f9f8c79e64ca2a5323eab8ebe67ad4d17f33b588f55dc2a7da","access_level":"unlisted","create_time":"$D2019-12-06T02:06:48.719Z","update_time":"$D2019-12-06T02:19:48.625Z","view_time":null,"first_public_time":null,"fork":{"id":"618c79c8e66d2ccf","slug":"printable-openlayers-with-natural-earth-lakes-and-reservo","title":"Printable OpenLayers w/ Natural Earth Lakes and Reservoirs [GeoJSON]","owner":{"id":"8d652a601386fcf4","login":"aaronkyle","name":"Aaron Kyle Dennis"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d2fd23101beb2a61","login":"bryangingechen","name":"Bryan Gin-ge Chen","avatar_url":"https://avatars-next.observableusercontent.com/73f0dccc0b7fc5c845e6a52a58e01a2ae432cc529aaada0d10ab602137e603c0","tier":"starter_2024"},"version":169,"publish_version":169,"role":null,"authored":false,"authors":[{"type":"individual","id":"5c13a1a27cf52564","login":"bryangingechen","name":"Bryan Gin-ge Chen","avatar_url":"https://avatars-next.observableusercontent.com/73f0dccc0b7fc5c845e6a52a58e01a2ae432cc529aaada0d10ab602137e603c0","tier":null}],"members":[{"type":"individual","id":"5c13a1a27cf52564","login":"bryangingechen","name":"Bryan Gin-ge Chen","avatar_url":"https://avatars-next.observableusercontent.com/73f0dccc0b7fc5c845e6a52a58e01a2ae432cc529aaada0d10ab602137e603c0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"PRINTABLE: OpenLayers w/ GEOJSON Lakes & Reservoirs - Natural Earth (not working)","cells":[{"id":0,"value":"md`\n# PRINTABLE: OpenLayers w/ GEOJSON Lakes & Reservoirs - Natural Earth (not working)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":126,"value":"md`\nTHIS MIGHT TAKE A MINUTE TO LOAD.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":146,"value":"form = html`\n

\n \n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":18,"value":"map.getTargetElement()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"html_to_image = require('https://bundle.run/html-to-image@0.1.1')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":133,"value":"jsPDF = require('https://bundle.run/jspdf@1.5.3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"