2b:null 2c:["$","title",null,{"children":"Raster tiles | D3 | Observable"}] 31:T4dc,viewof url = { const options = new Map([ ["CartoDB Voyager", (x, y, z) => `https://${"abc"[Math.abs(x + y) % 3]}.basemaps.cartocdn.com/rastertiles/voyager/${z}/${x}/${y}${devicePixelRatio > 1 ? "@2x" : ""}.png`], ["Stamen Terrain", (x, y, z) => `https://tiles.stadiamaps.com/tiles/stamen_terrain/${z}/${x}/${y}${devicePixelRatio > 1 ? "@2x" : ""}.png`], ["Stamen Toner", (x, y, z) => `https://tiles.stadiamaps.com/tiles/stamen_toner/${z}/${x}/${y}${devicePixelRatio > 1 ? "@2x" : ""}.png`], // ["Stamen Toner (hybrid)", (x, y, z) => `https://stamen-tiles-${"abc"[Math.abs(x + y) % 3]}.a.ssl.fastly.net/toner-hybrid/${z}/${x}/${y}${devicePixelRatio > 1 ? "@2x" : ""}.png`], ["Stamen Toner (lite)", (x, y, z) => `https://tiles.stadiamaps.com/tiles/stamen_toner_lite/${z}/${x}/${y}${devicePixelRatio > 1 ? "@2x" : ""}.png`], ["Stamen Watercolor", (x, y, z) => `https://tiles.stadiamaps.com/tiles/stamen_watercolor/${z}/${x}/${y}.jpg`], ["OSM Mapnik", (x, y, z) => `https://${"abc"[Math.abs(x + y) % 3]}.tile.osm.org/${z}/${x}/${y}.png`], ["Wikimedia Maps", (x, y, z) => `https://maps.wikimedia.org/osm-intl/${z}/${x}/${y}.png`] ]); return Inputs.select(options, {value: options.get("Stamen Toner (lite)")}); }32:[] 2f:{"id":"62edc6e36b69ef42","slug":"raster-tiles","title":"Raster tiles","thumbnail":"031e4ff748a37fcfd06c54f6a9fde622d738a94b6d17fba98958f02bace4e3ec","access_level":"public","create_time":"$D2019-03-09T21:46:06.173Z","update_time":"$D2023-10-26T09:28:49.999Z","view_time":null,"first_public_time":"$D2019-03-09T21:55:16.127Z","fork":{"id":"27823d7d147e66d4","slug":"vector-tiles","title":"Vector tiles","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":17,"starred":false,"owner":{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024"},"version":181,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":47,"collection":{"id":"271c421a5537aab2","slug":"d3-tile","title":"d3-tile","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"type":"notebook","body":{"title":"Raster tiles","cells":[{"id":0,"value":"

Raster tiles

D3 › Gallery

\n\n# Raster tiles\n\nThis notebook demonstrates using [d3-tile](https://github.com/d3/d3-tile) to display [Mercator-projected](https://d3js.org/d3-geo/cylindrical#geoMercator) raster tiles. The tiles are copyright [OpenStreetMap contributors](https://www.openstreetmap.org/copyright).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"map = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"tiles = tile()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"tile = d3.tile()\n .size([width, height])\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection([0, 0]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"projection = d3.geoMercator()\n .center([-122.4183, 37.7750])\n .scale(Math.pow(2, 21) / (2 * Math.PI))\n .translate([width / 2, height / 2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3-geo@3\", \"d3-tile@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"