25:["$","title",null,{"children":"Mapbox + D3 within Observable Guide | Ed | Observable"}] 4b:[] 47:{"id":"3cf38c33f2338836","slug":"mapbox-d3-guide","title":"Mapbox + D3 within Observable Guide","thumbnail":"eb2a604fe6f7bab49630763d854e6abf91a12253a0cf3f4e75f51870df439dfb","access_level":"public","create_time":"$D2023-02-07T05:50:40.001Z","update_time":"$D2025-09-03T15:22:40.746Z","view_time":null,"first_public_time":"$D2023-02-07T05:50:40.001Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"e46e4c32c4e48d48","login":"edhschen","name":"Ed","avatar_url":"https://avatars-next.observableusercontent.com/9ef905e08faeda61c408291e15a0802520c17d5a1bbaf783fb02a12a8837caf7","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":157,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c8a171dac0148e66","login":"edhschen","name":"Ed","avatar_url":"https://avatars-next.observableusercontent.com/9ef905e08faeda61c408291e15a0802520c17d5a1bbaf783fb02a12a8837caf7","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"c8a171dac0148e66","login":"edhschen","name":"Ed","avatar_url":"https://avatars-next.observableusercontent.com/9ef905e08faeda61c408291e15a0802520c17d5a1bbaf783fb02a12a8837caf7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mapbox + D3 within Observable Guide","cells":[{"id":0,"value":"# Mapbox + D3 within Observable Guide ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"### intro\nstarter guide on how to use maplibregljs in Observable and add a D3 layer on top of it, following https://franksh.com/posts/d3-mapboxgl/ adapted for Observable. this is just the same code split into blocks with some more explanations, **everything on that reference works fine as is**\n\nnote that depending on your coding style, it may be better to develop this locally due to the intricacies of Observable. Due to Observable's topological execution order (see https://observablehq.com/@observablehq/observable-javascript), sometimes the dots will be re-rendered improperly if you change certain cells. If this happens just reload the page.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"### setup the html\nnote additional bounding tags are unnecessary (doctype, HTML, body, head, etc), though are fine to include aswell.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"### import the library\nImport through unpkg, using maplibregl so API keys are not necessary, mapboxgl works fine too. See https://maplibre.org/maplibre-gl-js-docs/api/ for details","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"maplibregl = {\n const gl = await require(\"maplibre-gl@2.4.0\");\n const href = await require.resolve(\"maplibre-gl@2.4.0/dist/maplibre-gl.css\");\n document.head.appendChild(html``);\n return gl;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"We set up a simple map that has dynamic features. For more examples of how to add topology, buildings, and other features see https://maplibre.org/maplibre-gl-js-docs/example/. There are many different \"styles\" of map you can choose, or make your own at https://maptiler.com. Here we are using one of the default ones referenced in the maplibre documentation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"// reference: https://observablehq.com/@tmcw/using-mapbox-gl-js \nmap = {\n var map = new maplibregl.Map({\n container: 'map',\n style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',\n center: [-122.169961, 37.429491], \n zoom: 13,\n pitch: 45,\n maxBounds: [\n [-122.8, 36.8],\n [-121.8, 38.3]\n ] // restrict the view to a certain area (southwest and northeast coords)\n });\n map.addControl(new maplibregl.NavigationControl(), 'bottom-left'); // adds the controls\n return map\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"### attach the svg to the canvas element\nWith mapbox, after this renders in the DOM something along these lines will show up within our document (more attributes in ellipses omitted for brevity)\n```html\n

\n \n

...

\n```\nWe want to add the D3 SVG after the canvas element to which mapbox renders the map. Mapbox/Maplibre provides us with a command to find the bounding element that holds the canvas, `map.getCanvasContainer();`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"svg = {\n var container = map.getCanvasContainer();\n\n var svg = d3\n .select(container)\n .append(\"svg\")\n .attr(\"width\", \"100%\")\n .attr(\"height\", \"100%\")\n .style(\"position\", \"absolute\")\n .style(\"z-index\", 2); // make this appear above the mapbox backing layer\n return svg\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"We now have the D3 SVG in the aforementioned place in the DOM. We want to require the D3 layer to render above the mapbox element, so we use the `z-index` CSS attribute to force it above. Note that this attribute requires the element to also be positioned, ergo having a `position` attribute. A common error that only happens in Observable is that using `position: absolute` on the `#map` element will break the cell, as Observable renders each of these blocks in a frame, and the attribute will permeate this bounding element.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":128,"value":"### adding the D3 points\nas standard, we add the D3 points. note we don't set a position on these just yet.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"dots = {\n let data = [\n [37.4292654112971,-122.173590660095] // this is Bytes Cafe btw\n ]\n let dots = svg\n .selectAll(\"circle\")\n .data(data)\n .enter()\n .append(\"circle\")\n .attr(\"r\", Math.max(map.getZoom()**2/25, 3))\n return dots\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"### making them to synchronize\nAs noted by the reference, we essentially have to disjoint visualization layers right now. The D3 SVG, and the mapbox/maplibre canvas which is underneath it. When we interact with the map, we need to have the D3 visualization change reference frames along with it. Similar to the D3 geo projections (https://github.com/d3/d3-geo-projection) we would use in a D3-implemented map, mapbox/maplibre provides projection/unprojection functions for us.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"function project(lng,lat) {\n return map.project(new maplibregl.LngLat(lng, lat));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"function unproject(x,y) {\n return map.unproject([x,y]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"We introduce a function to update these attributes for the dot elements in D3. This is called everytime the mapbox view is changed. Note we can also introduce other attribute modifications here, for instance here we scale the radius by some metric related to the zoom level, such that it is not too small when it is zoomed in and not too big when it is zoomed out.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":126,"value":"function render() {\n dots\n .attr(\"cx\", function (d) {\n return project(d[1], d[0]).x;\n })\n .attr(\"cy\", function (d) {\n return project(d[1], d[0]).y;\n })\n .attr(\"r\", Math.max(map.getZoom()**2/25, 3));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"{\n map.on(\"viewreset\", render);\n map.on(\"move\", render);\n map.on(\"moveend\", render);\n render(); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"### conclusion\nvoila! we have plotted the location of Bytes Cafe in the Packard Building. try moving the map around, the dot will stay attached to the same physical position.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null