30: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)")}); }31:[] 2e:{"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"},{"id":122,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"map = svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"tiles = tile()","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":20,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3-geo@3\", \"d3-tile@1\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}