30:[] 2e:{"title":"Export","cells":[{"id":0,"value":"# Export","pinned":false,"hidden":false,"mode":"md"},{"id":126,"value":"🆕 *Updated for Notebook 2.0*","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"Making maps for the web is great. And that's what the `geoviz` library is for. But you can also use it as a tool for designing static maps for a blog or printed document. You may also want to edit maps generated with geoviz in CAD software. That's what the exportPNG() and exportSVG() functions are.","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"Here is a simple map created with geoviz.","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"let svg = viz.create({ projection: \"NaturalEarth1\" });\n svg.plot({ type: \"outline\" });\n svg.plot({ type: \"graticule\" });\n svg.plot({ datum: world, fill: \"white\", fillOpacity: 0.3 });\n svg.plot({\n type: \"prop\",\n data: world,\n var: \"pop\",\n symbol: \"square\",\n fill: \"red\",\n fillOpacity: 0.8,\n leg_title: \"Population\"\n });\n svg.plot({ type: \"header\", text: \"A simple map\" });\n // svg.exportPNG(); // <- HERE\n let map = display(svg.render())\n","pinned":true,"hidden":false,"mode":"js"},{"id":33,"value":"If you replace `svg.render()` with `svg.exportSVG()`, the map is exported in svg format. If you use svg.exportPNG(), it is exported in png format. See below.","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"let svg = viz.create({ projection: \"NaturalEarth1\" });\n svg.plot({ type: \"outline\" });\n svg.plot({ type: \"graticule\" });\n svg.plot({ datum: world, fill: \"white\", fillOpacity: 0.3 });\n svg.plot({\n type: \"prop\",\n data: world,\n var: \"pop\",\n symbol: \"square\",\n fill: \"red\",\n fillOpacity: 0.8,\n leg_title: \"Population\"\n });\n svg.plot({ type: \"header\", text: \"A simple map\" });\n // Uncomment the lines below to trigger the download\n // svg.exportSVG({ filename: \"mymap.svg\" });\n //svg.exportPNG({ filename: \"mymap.png\" });","pinned":true,"hidden":false,"mode":"js"},{"id":46,"value":"You can also trigger the download with a button like that. ","pinned":true,"hidden":false,"mode":"md"},{"id":52,"value":"let button = view(Inputs.button(\"Download in svg\"))","pinned":false,"hidden":false,"mode":"js"},{"id":50,"value":"{\n button;\n if (button) {\n viz.exportSVG(d3.select(map));\n }\n}","pinned":true,"hidden":false,"mode":"js"},{"id":57,"value":"## High-resolution exports","pinned":false,"hidden":false,"mode":"md"},{"id":59,"value":"When you're doing publishing mapping, you want images with good resolution. With `exportPNG()`, you can use the scale parameter to increase the size of the generated image.","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"let button2 = view(Inputs.button(\"Download in png (scale = 5)\"))","pinned":false,"hidden":false,"mode":"js"},{"id":62,"value":"{\n button2;\n if (button2) {\n viz.exportSVG(d3.select(map));\n }\n}","pinned":true,"hidden":false,"mode":"js"},{"id":70,"value":"With `exportSVG()`, there are no resolution issues since the drawing is vector-based. Unless you are using the `earth()` layer. In this case, you need to adjust the url (To have a good quality image at the input), resolution, and tileSize (To get around the out of memory error) parameters to get HD rendering. Obviously, the more you increase the precision, the longer it takes to generate.. See the documentation: https://riatelab.github.io/geoviz/global.html#earth","pinned":false,"hidden":false,"mode":"md"},{"id":125,"value":"Uncomment the cell to execute:","pinned":false,"hidden":false,"mode":"md"},{"id":77,"value":"// let svg = viz.create({\n// projection: \"NaturalEarth1\",\n// domain: africa\n// });\n// await svg.earth({\n// url: \"https://raw.githubusercontent.com/riatelab/geoviz/refs/heads/main/earth/raw/HYP_50M_SR_W.png\",\n// tileSize: 64, // <----- HERE!\n// resolution: 5 // <----- HERE!\n// });\n// svg.path({ data: world, fill: \"none\", stroke: \"white\" });\n// svg.graticule({\n// stroke: \"white\",\n// strokeWidth: 1.5,\n// strokeOpacity: 0.3,\n// strokeDasharray: 5\n// });\n// svg.exportPNG({ filename: \"map_HD.png\" }); // <----- HERE!\n// display(svg.render());\n","pinned":true,"hidden":false,"mode":"js"},{"id":11,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"import {\n style,\n world,\n disclaimer,\n africa,\n viz\n} from \"observable:@neocartocnrs/geoviz-appendix\"","pinned":true,"hidden":false,"mode":"js"},{"id":133,"value":"style","pinned":true,"hidden":false,"mode":"js"}],"files":"$W30","stdlib":"2","titling":"auto"}