2d:["$","title",null,{"children":"Tile mark | Nicolas Lambert | Observable"}] 32:[] 30:{"id":"128a2a9c998af428","slug":"tile-mark","title":"Tile mark","thumbnail":"8b8cc2d550d493e091d2aec3f06c707cd1a7e057fd668fa4b436d02eec9921fd","access_level":"public","create_time":"$D2023-12-13T15:07:25.646Z","update_time":"$D2026-09-04T10:25:32.447Z","view_time":null,"first_public_time":"$D2023-12-15T12:20:01.367Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":"starter_2024","bio":"Front-end cartographer. Research Engineer in Geographic Information Science at CNRS & UAR RIATE. Author of Mad Maps (2019), Practical Handbook of Thematic Cartography (2016, 2020, 2025) and Cartographia (2025)."},"version":327,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null,"bio":"Front-end cartographer. Research Engineer in Geographic Information Science at CNRS & UAR RIATE. Author of Mad Maps (2019), Practical Handbook of Thematic Cartography (2016, 2020, 2025) and Cartographia (2025)."}],"members":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null,"role":"editor"}],"comments":[{"id":"a42c610e4d8d5c2c","reply_to_id":null,"content":"Is there any simple way to add attribution to OSM contributors on the map?","create_time":"$D2024-04-03T05:22:47.500Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"c1c217aebd614b45","login":"pac02","name":"PAC","avatar_url":"https://avatars-next.observableusercontent.com/2e849389f24e4a039178c801e4df9065e03c23e4077b0ff6bfc8e2763dd06bf9","tier":null}},{"id":"85ec927c80c74717","reply_to_id":"a42c610e4d8d5c2c","content":"You can add a text below the map with viz.footer()","create_time":"$D2024-04-03T09:50:33.557Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"bfb3f0e24e42a069","slug":"geoviz","title":"geoviz","owner":{"id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert"}},"type":"notebook","body":{"titling":"auto","title":"Tile mark","cells":[{"id":0,"value":"# Tile mark","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":286,"value":"🆕 *Updated for Notebook 2.0*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"## 1 - Mercator tiles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"viz.tile()","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"Or","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"viz.plot({ type: \"tile\" })","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"## 2 - Customize","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":230,"value":"(x, y, z) => `https://something/\\${z}/\\${x}/\\${y}.png`","pinned":true,"hidden":true,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"## 3 - Clip","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":251,"value":"You can also clip the tiles with the clipPath argument and the viz.clippath() function.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"2"}} 31:"$30:body" 2c:E{"digest":"NEXT_REDIRECT;replace;/@neocarto/tile-mark;307;"}