30:T4a7,let svg = viz.create({ projection: "NaturalEarth1", domain: africa, width: 800, margin: 40 }); await svg.earth({ url: "https://raw.githubusercontent.com/riatelab/geoviz/refs/heads/main/earth/raw/OB_50M.png" }); svg.path({ datum: africa, fill: "black", fillOpacity: 0.6, filter: svg.effect.shadow({ stdDeviation: 1.5, fill: "black", fillOpacity: 0.7, dx: 4, dy: 4 }) }); svg.path({ datum: world, fill: "white", fillOpacity: 0.3 }); svg.graticule({ stroke: "white", strokeWidth: 1.5, strokeOpacity: 0.3, strokeDasharray: 5 }); await svg.earth({ clipPath: africa, url: "https://raw.githubusercontent.com/riatelab/geoviz/refs/heads/main/earth/raw/PRIMSA_SR_50M.png" }); svg.plot({ type: "choro", data: africa, colors: "Peach", var: "gdppc", nb: 5, leg_title: "GDP per capita", fillOpacity: 0.8 }); svg.header({ text: "Wealth in Africa", background_fill: "#ff7f6e", fill: "white", fontSize: 30 }); svg.scalebar(); svg.north({ scale: 1.5, pos: [640, 170], fill: "white", fillOpacity: 0.5 }); let map = display(svg.render())31:[] 2e:{"title":"earth","cells":[{"id":0,"value":"# earth","pinned":false,"hidden":false,"mode":"md"},{"id":197,"value":"🆕 *Updated for Notebook 2.0*","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"The earth() function allows you to customize your world maps by adding a raster map layer in png format, which can be reprojected on the fly.","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"let svg = viz.create({ projection: \"NaturalEarth1\", zoomable: \"versor\" });\n await svg.earth();\n svg.plot({\n type: \"prop\",\n data: world,\n var: \"pop\",\n fill: \"red\",\n fillOpacity: 0.5\n });\n display(svg.render())","pinned":true,"hidden":false,"mode":"js"},{"id":28,"value":"With the url parameter, you can use any image by entering a URL. These are images representing the world. Their size must therefore be in a format such as 1000x500 or 2000x1000 or 4000x2000, etc. You get the idea. But you can also choose a low res file in this list : `\"GRAY_50M_SR\"`, `\"GRAY_50M_SR_OB\"`, `\"GRAY_50M_SR_W\"`, `\"HYP_50M_SR\"`, `\"HYP_50M_SR_W\"`, `\"MSR_50M\"`, `\"NE1_50M_SR_W\"`, `\"NE2_50M_SR\"`, `\"NE2_50M_SR_W\"`, `\"OB_50M\"`, `\"PRIMSA_SR_50M\"`, `\"SR_50M\"`. The images provided are from Natural Earth, reduced and compressed. Don't forget to credit the source. These images are low resolution. But you can find them in higher resolution here: https://github.com/riatelab/geoviz/tree/main/earth/raw. For example, you can type `url: \"https://raw.githubusercontent.com/riatelab/geoviz/refs/heads/main/earth/raw/GRAY_50M_SR.png\"`","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"Other parameters are available, such as opacity (image transparency), dx (shift in x), dy (shift in y), and clipPath (a geojson to clip the image).","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"let svg = viz.create({ projection: \"Polar\", width: 500 });\n await svg.plot({ type: \"earth\", clipPath: world, url: \"PRIMSA_SR_50M\" });\n display(svg.render())","pinned":true,"hidden":false,"mode":"js"},{"id":51,"value":"The earth layer supports pan and zoom functions. But if the image is too heavy or the projection too computationally demanding, it slows down a bit.","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"let svg = viz.create({\n projection: \"Orthographic.rotate([-50,-23])\",\n width: 400,\n zoomable: \"versor\"\n });\n await svg.plot({ type: \"earth\" });\n svg.plot({ type: \"graticule\", stroke: \"white\", step: 30 });\n svg.plot({ type: \"header\", text: \"globe view\" });\n display(svg.render())","pinned":true,"hidden":false,"mode":"js"},{"id":71,"value":"Other parameters are available.","pinned":false,"hidden":false,"mode":"md"},{"id":74,"value":" resolution allows to increase the image resolution. 1 = normal resolution (1 pixel in the canvas = 1 visible tile pixel). 2 = double resolution (2 pixels in the canvas = 1 visible pixel) → the tile is rendered in double resolution, so it is more detailed/sharper (useful for Retina displays or high-quality exports) 3 = triple resolution, etc. The parameter is important only **if you want to export the map**. tileSize allows you to cut the input image into tiles on the fly. Et max_canvas_size peut être utilisé pour limiter la taille maximale (en pixels) de l'image raster chargée ou générée avant de l'utiliser pour le rendu des tuiles. Si l'image d'entrée est trop grande, vous pouvez utiliser ce paramètre pour définir une taille maximale (largeur ou hauteur), par exemple 2048.","pinned":false,"hidden":false,"mode":"md"},{"id":82,"value":"With this new layer, we can now design beautiful maps ready for printing. Take a look at this!","pinned":false,"hidden":false,"mode":"md"},{"id":89,"value":"$30","pinned":false,"hidden":false,"mode":"js"},{"id":182,"value":"And with geoviz's export functions, you can export the map.","pinned":false,"hidden":false,"mode":"md"},{"id":184,"value":"let button = view(Inputs.button(\"Download in svg\"))","pinned":false,"hidden":false,"mode":"js"},{"id":196,"value":"*NB: If you want to retrieve the map in high resolution, you need to modify the resolution parameter in the earth function and possibly modify the scale parameter in the export function. More explanations [here]()*","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":7,"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":186,"value":"{\n button;\n if (button) {\n viz.exportSVG(d3.select(map));\n }\n}","pinned":true,"hidden":false,"mode":"js"},{"id":9,"value":"style","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"2","titling":"auto"}