31:[] 2f:{"title":"Tile mark","cells":[{"id":0,"value":"# Tile mark","pinned":false,"hidden":false,"mode":"md"},{"id":286,"value":"🆕 *Updated for Notebook 2.0*","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"## 1 - Mercator tiles","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"In cartography, displaying raster tiles is a very common practice. Leaflet, for example, comes to mind. In `geoviz`, you can display tiles with the tile mark. Of course, theses tiles are zoomable.","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"viz.tile()","pinned":true,"hidden":false,"mode":"js"},{"id":283,"value":"Or","pinned":false,"hidden":false,"mode":"md"},{"id":285,"value":"viz.plot({ type: \"tile\" })","pinned":true,"hidden":false,"mode":"js"},{"id":44,"value":"If you want to overlay several layers, you'll need to use a container. In this case, you must use the **`d3.geoMercator()`** projection. You can also simply write **`\"mercator\"`**. You can also define the domain and the margin.","pinned":false,"hidden":false,"mode":"md"},{"id":52,"value":"let svg = viz.create({\n projection: \"mercator\",\n domain: aus,\n zoomable: true,\n margin: 30\n });\n\n svg.tile();\n svg.path({ data: aus_roads, stroke: \"#38896F\", strokeWidth: 1.5 });\n svg.path({ data: aus_ports, stroke: \"#38896F\", fill: \"white\" });\n display(svg.render())","pinned":true,"hidden":false,"mode":"js"},{"id":71,"value":"## 2 - Customize","pinned":false,"hidden":false,"mode":"md"},{"id":180,"value":"You can change the style of raster tiles by changing the provider with the url attribute. To do this, you can write a function like that:","pinned":false,"hidden":false,"mode":"md"},{"id":230,"value":"(x, y, z) => `https://something/\\${z}/\\${x}/\\${y}.png`","pinned":true,"hidden":true,"mode":"js"},{"id":236,"value":"You can also enter the following strings directly: \n- **`\"openstreetmap\"`** (*OpenStreetMap*)\n- **`\"opentopomap\"`** (*OpenStreetMap*)\n- **`\"worldterrain\"`** (*USGS, Esri, TANA, DeLorme, and NPS*)\n- **`\"worldimagery\"`** (*Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community\"*)\n- **`\"worldStreet\"`** (*Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012*)\n- **`\"worldphysical\"`** (*Esri, US National Park Service*)\n- **`\"shadedrelief\"`** (*ESRI*)\n\n*See more here: https://riatelab.github.io/geoviz/global.html#tile*","pinned":false,"hidden":false,"mode":"md"},{"id":247,"value":"You can also modify tile size with tileSize, the zoom offset with zoomDelta and the transparency with the opacity argument.","pinned":false,"hidden":false,"mode":"md"},{"id":147,"value":"let svg = viz.create({\n projection: \"Mercator\",\n domain: aus,\n margin: 30,\n zoomable: true\n });\n\n svg.tile({ url: \"worldimagery\" });\n display(svg.render())\n","pinned":true,"hidden":false,"mode":"js"},{"id":163,"value":"## 3 - Clip","pinned":false,"hidden":false,"mode":"md"},{"id":251,"value":"You can also clip the tiles with the clipPath argument and the viz.clippath() function.","pinned":false,"hidden":false,"mode":"md"},{"id":165,"value":"let svg = viz.create({\n projection: d3.geoMercator(),\n domain: aus,\n zoomable: true\n });\n\n svg.tile({\n url: \"worldimagery\",\n zoomDelta: 1,\n clipPath: svg.effect.clipPath({ datum: aus })\n });\n display(svg.render())","pinned":true,"hidden":false,"mode":"js"},{"id":11,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"import {\n style,\n world,\n disclaimer,\n aus_ports,\n aus,\n aus_roads,\n viz\n} from \"observable:@neocartocnrs/geoviz-appendix\"","pinned":true,"hidden":false,"mode":"js"},{"id":16,"value":"style","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"2","titling":"auto"}