2a:null 2b:["$","title",null,{"children":"Map Export | mradamcox | Observable"}] 30:T842,hideControls = { await delay(1000) if (document.getElementById("show-zoom-and-layers") == null) {return "run this module before you try to hide controls"} document.getElementById("show-zoom-and-layers").onclick = function () { if (!this.checked) { Array.from(document.getElementsByClassName("leaflet-top")).forEach( function (element, index) { element.style.display = "none" }); } else { Array.from(document.getElementsByClassName("leaflet-top")).forEach( function (element, index) { element.style.display = "block" }); } }; document.getElementById("show-scale").onclick = function () { if (!this.checked) { Array.from(document.getElementsByClassName("leaflet-control-scale")).forEach( function (element, index) { element.style.display = "none" }); } else { Array.from(document.getElementsByClassName("leaflet-control-scale")).forEach( function (element, index) { element.style.display = "block" }); } }; document.getElementById("show-attributions").onclick = function () { let attrElMos = document.getElementById("mosaic-map").getElementsByClassName("leaflet-control-attribution")[0] let attrElSlider = document.getElementById("slider-map").getElementsByClassName("leaflet-control-attribution")[0] if (!this.checked) { Array.from(document.getElementsByClassName("leaflet-control-attribution")).forEach( function (element, index) { element.style.display = "none"; document.getElementById("attr-msg-mosaic").innerHTML = "attributions: "+attrElMos.innerHTML; document.getElementById("attr-msg-slider").innerHTML = "attributions: "+attrElSlider.innerHTML; }); } else { Array.from(document.getElementsByClassName("leaflet-control-attribution")).forEach( function (element, index) { element.style.display = "block" document.getElementById("attr-msg-mosaic").innerHTML = ""; document.getElementById("attr-msg-slider").innerHTML = ""; }); } }; return "ready" }31:[] 2e:{"id":"b868dac63d953cf2","slug":"map-export","title":"Map Export","thumbnail":"e5f4eeceaf7672bb68ed44761f0986082d0c6b1f351f375158c8233ec3f13e24","access_level":"public","create_time":"$D2019-12-10T16:38:21.473Z","update_time":"$D2020-10-16T16:27:34.533Z","view_time":null,"first_public_time":"$D2019-12-10T17:47:25.875Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0ae73f6174cae4c3","login":"mradamcox","name":"","avatar_url":"https://avatars-next.observableusercontent.com/748562e30e1ea8d52d99446db67cf5bcf90ff0dff6c65ab473a44a444958ee6a","tier":"starter_2024"},"version":318,"publish_version":318,"role":null,"authored":false,"authors":[{"type":"individual","id":"826f0155b2644262","login":"mradamcox","name":"","avatar_url":"https://avatars-next.observableusercontent.com/748562e30e1ea8d52d99446db67cf5bcf90ff0dff6c65ab473a44a444958ee6a","tier":null}],"members":[{"type":"individual","id":"826f0155b2644262","login":"mradamcox","name":"","avatar_url":"https://avatars-next.observableusercontent.com/748562e30e1ea8d52d99446db67cf5bcf90ff0dff6c65ab473a44a444958ee6a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"1335bf57ae24aff5","slug":"a-break-from-the-past","title":"New Techniques for Old Maps","owner":{"id":"0ae73f6174cae4c3","login":"mradamcox","name":""}},"type":"notebook","body":{"titling":"auto","title":"Map Export","cells":[{"id":0,"value":"md`# Map Export`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"md`We can export views of interactive maps as static images. Use the sliders to change the export size of the map, and you can optionally hide the zoom/layers controls, scale bar, and attributions. If you hide the attributions, please remember to use them as credits for the exported image if you re-use it.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"html`

Show Zoom/Layer Controls Show Scale Show Attributions
these settings apply to both maps

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"md`## Survey Plat Mosaic\n\nfrom [@mradamcox/interactive-map-mosaic](https://observablehq.com/@mradamcox/interactive-map-mosaic)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"viewof widthSlider = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"viewof heightSlider = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"mapResize = {\n \n let mapEl = document.getElementById(\"mosaic-map\")\n if (mapEl == null) {return { \"width\":width, \"height\": width/1.6 }}\n let mapHeight = (heightSlider/100*width)\n\n mapEl.style.height = mapHeight+\"px\";\n mapEl.style.width = widthSlider+\"%\";\n\n return { \"width\":mapEl.clientWidth, \"height\": mapEl.clientHeight }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"mosaicmap","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"html`\n

\n \n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"html`

Township/Range:

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"md`## Captured Confederate Maps\n\nfrom [@mradamcox/a-better-transparency](https://observablehq.com/@mradamcox/a-better-transparency)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"viewof widthSlider2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"viewof heightSlider2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"mapResize2 = {\n \n let mapEl = document.getElementById(\"slider-map\")\n if (mapEl == null) {return { \"width\":width, \"height\": width/1.6 }}\n let mapHeight = (heightSlider2/100*width)\n\n mapEl.style.height = mapHeight+\"px\";\n mapEl.style.width = widthSlider2+\"%\";\n\n return { \"width\":mapEl.clientWidth, \"height\": mapEl.clientHeight }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"slidermap","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"html`\n

\n \n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"backgroundSlider = html`

Background Opacity

Full Layer Opacity

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"md`#### Map Export Logic`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"mapExportRelay = {\n \n document.getElementById(\"mosaic-export-button\").onclick = function () {\n let fileName = document.getElementById('mosaic-export-file-name').value;\n let fileExt = fileName.split('.').pop()\n if (fileExt != \"png\") { fileName = fileName + \".png\"}\n exportMap(fileName, mosaicmap)\n\n };\n \n document.getElementById(\"slider-export-button\").onclick = function () {\n let fileName = document.getElementById('slider-export-file-name').value;\n let fileExt = fileName.split('.').pop()\n if (fileExt != \"png\") { fileName = fileName + \".png\"}\n exportMap(fileName, slidermap)\n };\n\n return \"ready\"\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"function exportMap(fileName, mapEl) {\n\n html_to_image.toPng(mapEl, { quality: 1, width: mapEl.clientWidth, height: mapEl.clientHeight })\n .then(function (dataUrl) {\n var link = document.createElement('a');\n link.download = fileName;\n link.href = dataUrl;\n link.click();\n });\n \n return fileName\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`#### Dependency Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"import {map as mosaicmap}\nfrom \"@mradamcox/interactive-map-mosaic\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"import {map as slidermap} from \"@mradamcox/a-new-approach-to-transparency\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"import {delay} from \"@mradamcox/resources\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"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"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"