[Map][Leaflet] Provide example to load via AJAX

[tacman]

I'd like to load my map point from JSON (specifically, api-platform), can you provide an example of how to do that in the custom controller please? I'm sure it's easy once you get the Leaflet object, but I'm not sure where to get it from.

If there are other events to listen for, like the map moving or being zoomed, can you provide a stub with a console.log to the event data?

[tacman]

I see how to do it now, though it can probably be improved.

async _onConnect(event) {
    // The map, markers and infoWindows are created
    // The instances depend on the renderer you are using
    const map = event.detail.map;
    const url = "/api/members.json";
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error(`Response status: ${response.status}`);
      }

    try {
      await response.json().then(
        data => {
          data.data.forEach(obj => {
            console.log(obj);
            L.marker([obj.mailingLatitude, obj.mailingLongitude], {
              title: obj.displayName
            }).addTo(map);
          })
        }
      );
    } catch (error) {
      console.error(error.message);
    }

    // console.log(event.detail.map);
    // console.log(event.detail.markers);
    // console.log(event.detail.infoWindows);
  }

[Kocal]

Hi @tacman and sorry for the late reply.

The UX Map was not designed to be able to dynamically load/create markers/info-windows/... after a XHR request, but rather using a Live Component (which I think it possible yet, BUT will suffer of webperf issues).

Load/create markers dynamically after a XHR request is not an easy task like as you have seen, you won't have access to internal createMarker from Map Stimulus controllers. Instead you have to listen to ux:map:pre-connnect or ux:map:connect events to get google (or L when using Leaflet) from event.detail, in order to use the provider's API.

[tacman]

ok, thanks! The code I wrote in the comment above works, though the marker is the default and needs to be cleaned up.

I ran into some conflict with Turbo/Live Components when they were still in beta, but need to return to using them. Is there an example of this map using Live Components?

[Kocal]

Is there an example of this map using Live Components?

Not yet, it is not fully compatible

[Kocal]

Using Map with Live Components is possible since #2385 and has been documented (see https://symfony.com/bundles/ux-map/current/index.html#usage-with-live-components).