Including examples for overlaying D3 svg objects

[thedivtagguy]

Thank you for a great library.

I would really appreciate an example, if possible with the current APIs, on how I can add D3-drawn SVG objects to the canvas.
I am referring to this notebook and the magic appears to lie in:

 //Project any point to map's current state
  function projectPoint(lon, lat) {
    let point = map.project(new maplibregl.LngLat(lon, lat));
    this.stream.point(point.x, point.y);
  }

Would it be possible to add a simple demo or two about how I might add lines, polygons or points with D3 on top of the<MapLibre> canvas in a similar style to how other examples have been executed?

[dimfeld]

Thanks for the suggestion! I don't have the time to put together an example at the moment but I agree it's a useful pattern, so here are some tips I hope will help.

If I understand the notebook correctly, it looks like it is just appending the svg elements to the div that contains the map. I think this could be accomplished by doing something like this:

• Get the HTML element for the map from the MapLibre component. This isn't currently possible but a small change could update the library to expose it. I think it would also work to place the MapLibre component in another div and have D3 add its SVG elements to that div.
• Get the map instance from the MapLibre component by either listening for the load event or binding to the map property.
• Wait for the map and the HTML element to both exist.
• Set up the move, moveend, and viewreset event handlers on the map, just like the notebook does.

Then you're all set up, and can use D3 or whatever you want to manage the SVG on top of the map. Basically, every time one of the above events fires, you would want to re-project all the points in your SVG and update the elements so that they move along with the map.

Here's a really rough outline of what I'm talking about:

<script>
  let map;
  let container;

  $: if(map && container) {
    // Any initial setup work
    setupShapes();

    // Add event listeners to make the SVGs follow the map around
    map.on('move', update);
    map.on('moveend', update);
    map.on('viewreset', update);
  }
</script>

<div bind:this={container} style="width:400px;height:400px">
  <MapLibre bind:map style="your style url">
    <!-- Other sources and layers in here, if you have any -->
  </MapLibre>
</div>