2b:null 2c:["$","title",null,{"children":"D3 map + Leaflet: paths | Yuanjie (Tukey) Tu | Observable"}] 31:T7f8,presentMap = { const container = html`

`; yield container; const map = L.map(container).setView([37.8, -96.9], 4); let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map) //initialize svg to add to map L.svg({clickable:true}).addTo(map) // we have to make the svg layer clickable const svg = d3.select(map.getPanes().overlayPane) .select('svg') .attr("pointer-events", "auto") const g = svg .append("g") .attr("class", "leaflet-zoom-hide") // Adapt Leaflet’s latLngToLayerPoint and LatLng methods to project a single point, // passing the resulting coordinates to an output geometry stream (https://github.com/d3/d3-geo#streams) function projectPoint(x, y) { var point = map.latLngToLayerPoint(new L.LatLng(y, x)); this.stream.point(point.x, point.y); } // Now that we can project points, we can create a d3.geoPath to convert GeoJSON to SVG... const transform = d3.geoTransform({point: projectPoint}) const path = d3.geoPath().projection(transform); var feature = g.selectAll("path") .data(states.features) .join("path") .attr("d", path) .style("fill", "#000") .style("fill-opacity", .2) .style("stroke", "#fff") .style("stroke-width", "1.5px") .style("pointer-events", "all") .on("mouseover", function () { const element = d3.select(this); const datum = element.data()[0].properties.index; element.style("fill", "lightblue").style("fill-opacity", .7); }) .on("mouseout", function () { d3.select(this).style("fill", "#000").style("fill-opacity", .2) }); // Function to place svg based on zoom const onZoom = () => feature.attr('d', path) // initialize positioning onZoom() // reset whenever map is moved map.on('zoomend', onZoom) }34:[{"id":"ff73290f3fccc5db55f09031bb845e639a07e444ca9fbcf83f2dbb4600a38bf4baccb2a85df3c24dba57a4ed64c230dcf1a87604453969495db835c5f3cbebf2","href":"https://static.observableusercontent.com/files/ff73290f3fccc5db55f09031bb845e639a07e444ca9fbcf83f2dbb4600a38bf4baccb2a85df3c24dba57a4ed64c230dcf1a87604453969495db835c5f3cbebf2","name":"us-counties-10m.json","type":"application/json","lastModified":1712509708085.338,"size":842177}] 2f:{"id":"061ac650041ea623","slug":null,"title":"D3 map + Leaflet: paths","thumbnail":"442f24141fef7cf6b4e4bc60e8c6063aa48661d78d418e76cb0c836847efba2a","access_level":"public","create_time":"$D2024-04-07T16:41:52.295Z","update_time":"$D2024-04-09T00:22:47.905Z","view_time":null,"first_public_time":"$D2024-04-08T16:10:06.870Z","has_unpublished_edits":null,"fork":false,"stars":1,"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":149,"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: paths","cells":[{"id":0,"value":"# D3 map + Leaflet: paths","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":137,"value":"_This tutorial 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":63,"value":"md`Sometimes we'd like to overlay the openstreetmap with our D3 map. In that case we can use the Leaflet library. Our example here is American state map - you can hover over the states, drag, and zoom in and out.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"The steps we are going to take are:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"## Import Leaflet","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":113,"value":"First we will need to import Leaflet library as follows:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"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":15,"value":"## Load data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":115,"value":"md`Next, let's load our dataset - this time we are using the US boundary dataset, and we are extracting the *state* polygons.\n\n**Note: Leaflet only allows the use of GeoJSON, not TopoJSON!**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"us = FileAttachment(\"us-counties-10m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"states = {\n const states = topojson.feature(us, us.objects.states);\n states.features = states.features.map((d, i) => {d.properties = { ...d.properties, index: (i%4).toString() }; return d;})\n return states\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"## Draw base map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":128,"value":"Next, let's add the base openstreetmap as a base map.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"basemap = {\n const container = html`

`;\n yield container;\n const map = L.map(container).setView([37.8, -96.9], 4);\n L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n attribution: \"© OpenStreetMap contributors\"\n }).addTo(map);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"## overlay SVG elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":130,"value":"md`Then, let's overlay SVG elements on top.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"## Set Zoom consistency","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":133,"value":"Last, we will need to set zoom consistency so that the SVG element we overlayed would zoom in and out the same rate as the base map.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"## There is more 👀","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"Curious about what leaflet + D3 can do? Check out my [D3 map + Leaflet: circles](https://observablehq.com/d/7fa8f70646470328) and [D3 map + leaflet: tile selector](https://observablehq.com/d/293d0322d75d5313)!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"## References\n* [Intro to Observable](https://observablehq.com/@jonfroehlich/observable-tutorial), Observable, 2023\n* [Learn D3](https://observablehq.com/collection/@d3/learn-d3), Observable, 2020\n* [D3 tutorial](https://observablehq.com/d/690937bf1b0c96bc), part 1, Observable, 2023\n* [Introduction to leaflet and D3](https://observablehq.com/@sfu-iat355/introduction-to-leaflet-and-d3), IAT355, 2019\n* [D3 + Leaflet](https://observablehq.com/@pbogden/d3-leaflet), pbogden, 2022","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"import {textcolor} from \"@observablehq/text-color-annotations-in-markdown\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"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"