Leaflet component for Drupal Canvas

Problem/Motivation

On a DrupalCMS 2.1.0 instance, the modules Leaflet, Geofield and Leaflet More Maps work as designed because DrupalCMS is powered by Drupal 11. But when you want to use Drupal Canvas in the same instance to implement a map, you have to add a custom component. Using Claude, the custom component has been implemented with some features. Now, please allow me to be bold: there is zero chance I could have implemented this custom component without Claude. Besides that, other features of the Leaflet module (enable the Leaflet Fullscreen JS Library, for instance) also have to be coded with AI.

Because Drupal Canvas has a promising future, I wonder if creating a Leaflet component could be in the pipe.

Steps to reproduce

Create a custom content type
Create a Geofield field named "Emplacement"
Populate your website with at least one node using this content type
In /canvas of your instance, go to Code > New > Code Component
Add two props: latitude and longitude (see props.png)
Type the following code in the Javascript editor:

const Component = ({
  latitude = 50.1833,
  longitude = 5.5833,
}) => {
  const initMap = (el) => {
    if (!el || el._mapInitialized) return;
    el._mapInitialized = true;

    const startMap = (L) => {
      const map = L.map(el, {
        scrollWheelZoom: false,  // désactive molette
      }).setView([latitude, longitude], 13);

      L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
        maxZoom: 17,
        attribution: '© OpenStreetMap contributors, © OpenTopoMap (CC-BY-SA)'
      }).addTo(map);

      L.marker([latitude, longitude]).addTo(map);
      L.control.scale({ imperial: false }).addTo(map);  // scale bar
    };

    if (window.L) {
      startMap(window.L);
    } else {
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
      document.head.appendChild(link);
      const script = document.createElement('script');
      script.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
      script.onload = () => startMap(window.L);
      document.head.appendChild(script);
    }
  };

  return <div ref={initMap} style={{ width: "100%", height: "400px" }} />;
};

export default Component;

Save changes and perform a drush cr
In /canvas, create a new template for your content type
In Library, add the "Emplacement" component in the desired section
In the settings (see settings.png), map the latitude with "Centroid Latitude" and the longitude with "Centroid Longitude"
Save and visit your node (see result.png)