2b:null 2c:["$","title",null,{"children":"D3 map + leaflet: tile selector | Yuanjie (Tukey) Tu | Observable"}] 31:Tac8,presentMap = { // You'll often see Leaflet examples initializing a map like L.map('map'), // which tells the library to look for a div with the id 'map' on the page. // In Observable, we instead create a div from scratch in this cell (called "map") let container = DOM.element('div', {style: `width:${width}px;height:${width/1.6}px`}) // This component utilizes "yield" which pauses the execution of this code block // returns the value of container back to the notebook which allows the // div to be placed on the page. This is important, because Leaflet uses // the div's .offsetWidth and .offsetHeight (used to get current size of the div) // to size the map. If I were to only return the container at the end of this method, // Leaflet might get the wrong idea about the map's size. yield container // Now we create a map object and add a layer to it. let map = L.map(container).setView([40, -0.1], 6); // initializes the map, sets zoom & coordinates let openstreetmapOsm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "© OpenStreetMap contributors", maxZoom: 6 }) //This adds the tile layer to the map. The map dynamically loads tiles based on current view the experience smooth and seamless. Make sure to add attribution to your map. let openstreetmapHot = L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', { attribution: 'Map data © OpenStreetMap', maxZoom: 6 }) let openstreetmap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © OpenStreetMap', maxZoom: 6 }) let thunderforest = L.tileLayer('https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png', { attribution: 'Map data © OpenStreetMap', maxZoom: 6 }) let CartoDB = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', { attribution: '© OpenStreetMap | © CartoDB', maxZoom: 6 }) //Base layers definition and addition let allOptions = { "Open streetmap: CartoDB": CartoDB, "Open streetmap": openstreetmap, "Open streetmap: Hot": openstreetmapHot, "Open streetmap: Osm": openstreetmapOsm, "Open streetmap: thunderforest": thunderforest }; // Initialize with openstreetmap CartoDB.addTo(map); // Add baseLayers to map as control layers L.control.layers(allOptions).addTo(map); }32:T559,baseMap = { // You'll often see Leaflet examples initializing a map like L.map('map'), // which tells the library to look for a div with the id 'map' on the page. // In Observable, we instead create a div from scratch in this cell (called "map") let container = DOM.element('div', {style: `width:${width}px;height:${width/1.6}px`}) // This component utilizes "yield" which pauses the execution of this code block // returns the value of container back to the notebook which allows the // div to be placed on the page. This is important, because Leaflet uses // the div's .offsetWidth and .offsetHeight (used to get current size of the div) // to size the map. If I were to only return the container at the end of this method, // Leaflet might get the wrong idea about the map's size. yield container // Now we create a map object and add a layer to it. let map = L.map(container).setView([50, -0.1], 4); // initializes the map, sets zoom & coordinates let osmLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "© OpenStreetMap contributors" }).addTo(map) //This adds the tile layer to the map. The map dynamically loads tiles based on current view the experience smooth and seamless. Make sure to add attribution to your map. }33:Tacd,tileSelectorMap = { // You'll often see Leaflet examples initializing a map like L.map('map'), // which tells the library to look for a div with the id 'map' on the page. // In Observable, we instead create a div from scratch in this cell (called "map") let container = DOM.element('div', {style: `width:${width}px;height:${width/1.6}px`}) // This component utilizes "yield" which pauses the execution of this code block // returns the value of container back to the notebook which allows the // div to be placed on the page. This is important, because Leaflet uses // the div's .offsetWidth and .offsetHeight (used to get current size of the div) // to size the map. If I were to only return the container at the end of this method, // Leaflet might get the wrong idea about the map's size. yield container // Now we create a map object and add a layer to it. let map = L.map(container).setView([50, -0.1], 4); // initializes the map, sets zoom & coordinates let openstreetmapOsm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "© OpenStreetMap contributors", maxZoom: 6 }) //This adds the tile layer to the map. The map dynamically loads tiles based on current view the experience smooth and seamless. Make sure to add attribution to your map. let openstreetmapHot = L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', { attribution: 'Map data © OpenStreetMap', maxZoom: 6 }) let openstreetmap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © OpenStreetMap', maxZoom: 6 }) let thunderforest = L.tileLayer('https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png', { attribution: 'Map data © OpenStreetMap', maxZoom: 6 }) let CartoDB = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', { attribution: '© OpenStreetMap | © CartoDB', maxZoom: 6 }) //Base layers definition and addition let allOptions = { "Open streetmap": openstreetmap, "Open streetmap: CartoDB": CartoDB, "Open streetmap: Hot": openstreetmapHot, "Open streetmap: Osm": openstreetmapOsm, "Open streetmap: thunderforest": thunderforest }; // Initialize with openstreetmap CartoDB.addTo(map); // Add baseLayers to map as control layers L.control.layers(allOptions).addTo(map); }34:[] 2f:{"id":"293d0322d75d5313","slug":null,"title":"D3 map + leaflet: tile selector","thumbnail":"fec3accd4ad9bf008b2eb509ac5dc39ff1f0edb8acfddb1f08b55f21aac622d6","access_level":"public","create_time":"$D2024-04-08T23:55:42.975Z","update_time":"$D2024-04-09T05:29:58.514Z","view_time":null,"first_public_time":"$D2024-04-09T00:12:11.350Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"38d64ae7e708b9b5","login":"yuanjt2","name":"Yuanjie (Tukey) Tu","avatar_url":"https://avatars-next.observableusercontent.com/34bc1666f6489c9f64e21f0c1ce4779151877d75c3f3c3f065e58f6a9bd14f0e","tier":"starter_2024"},"version":58,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"450fe71eaac7001f","login":"yuanjt2","name":"Yuanjie (Tukey) Tu","avatar_url":"https://avatars-next.observableusercontent.com/ea52f9066051a7ecd9e98037b8a1e1c0cf765011b054117f0758a83f8e870f29","tier":null}],"members":[{"type":"individual","id":"450fe71eaac7001f","login":"yuanjt2","name":"Yuanjie (Tukey) Tu","avatar_url":"https://avatars-next.observableusercontent.com/ea52f9066051a7ecd9e98037b8a1e1c0cf765011b054117f0758a83f8e870f29","tier":null,"role":"editor"},{"type":"team","id":"38d64ae7e708b9b5","login":"yuanjt2","name":"Yuanjie (Tukey) Tu","avatar_url":"https://avatars-next.observableusercontent.com/34bc1666f6489c9f64e21f0c1ce4779151877d75c3f3c3f065e58f6a9bd14f0e","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"8feacd2f2ece2457","slug":"intro-to-d3","title":"Intro to D3","owner":{"id":"38d64ae7e708b9b5","login":"yuanjt2","name":"Yuanjie (Tukey) Tu"}},"type":"notebook","body":{"title":"D3 map + leaflet: tile selector","cells":[{"id":0,"value":"# D3 map + leaflet: tile selector","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"This tutorial is adapted from [_D3 gallery: tile selector using leaflet.js_](https://d3-graph-gallery.com/graph/backgroundmap_leaflet_buttonLayer.html) and is part of the [_Intro to D3 Collection_](https://observablehq.com/collection/@yuanjt2/intro-to-d3).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"Sometimes we'd like to overlay our D3 maps to some fancier map libraries. In that case we can use the Leaflet library. In this case, we can choose different tile selectors. Try interact with it and explore different tile styles!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":49,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"## Import Leaflet","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\")\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\")\n document.head.appendChild(L._style = html``)\n }\n return L\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"## Create base map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"## Add tile selectors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"## There is more\nCurious about other applications of leaflet.js? Check out our [D3 map + Leaflet: circles](https://observablehq.com/d/7fa8f70646470328) and [D3 map + Leaflet: polygons](https://observablehq.com/d/061ac650041ea623)!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"## Reference\n* [Tile selector using leaflet.js](https://d3-graph-gallery.com/graph/backgroundmap_leaflet_buttonLayer.html), D3 gallery","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"import {toc} from \"@jonfroehlich/collapsible-toc\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"