[Map] Leaflet vector layers

[dannyvw]

Is it possible to use vector layers like https://github.com/Esri/esri-leaflet-vector? What is the best way to implement this?

[Kocal]

Hi, I think yes, see https://symfony.com/bundles/ux-map/current/index.html#interact-with-the-map

1. create your own Stimulus Controller and use-it to render the map (configure data-controller)
2. in this controller, import esri-leaflet
3. in this controller, listen to the event ux:map:connect, access L and map instances from event.details

[Prometee]

Hi @Kocal!

I tried what you explained with another leaflet plugin (Leaflet.Editable) and I ended up retrieving L var using window.L because event.details.L is not the same variable and does not have the plugin instantiated.

import {Controller} from "@hotwired/stimulus";
import 'leaflet-editable';

//  listen to the event ux:map:connect and pre-connect to set editable: true

_onConnect(event) {
        const { map, L } = event.detail;
        
        // L.Editable does not exist
}

import {Controller} from "@hotwired/stimulus";
import 'leaflet-editable';

//  listen to the event ux:map:connect and pre-connect to set editable: true

_onConnect(event) {
        const { map } = event.detail;
        const L = window.L;
        
        // L.Editable exists
}

Do you see why it's not the same variable ?

[Kocal]

Hi, and sorry for the late reply.

It is not the same variable because:

1. in Symfony UX, we import use import * as L from 'leaflet' (https://github.com/symfony/ux/blob/2.x/src/Map/src/Bridge/Leaflet/assets/src/map_controller.ts#L10) which create a new object
2. but in leaflet-editabe, it use import L from 'leaflet' (https://cdn.jsdelivr.net/npm/leaflet-editable@1.3.0/+esm)

Which can be equivalent, but not identical:

    _onConnect(event) {
        console.log(event.detail.L); // Module
        console.log(window.L); // Object
        console.log(event.detail.L === window.L);
    }

If I edit the Leaflet map_controller.ts to use import L from 'leaflet', then it references the same object and event.detail.L.Editable exists :

I'm not sure how to fix it correctly, because here both syntax are valid.
Maybe, in the Leaflet case, we can use import L? Can it break things if we switch to this syntax?

[Prometee]

I don't know the implication of this change but reading the Leaflet doc for creating a plugin it says require('leaflet') which is the same as import L from 'leaflet', right?
https://github.com/Leaflet/Leaflet/blob/main/PLUGIN-GUIDE.md#module-loaders

Then I guess most of the plugin creator will follow this.

[Kocal]

Well, yes and no, require() and UMD things are relic from the past and we now use ESM import/export system.

When you type import L from 'leaflet', L is the value of the default export (export default ...), but when you use import * as L from 'leaflet' it imports every exportable members and put them under L, which are not the same.

To me, the leaflet-editable API is broken, it should not implant itself under L namespace, but expose bunch of methods that accepts L (or L.*) instances.

[Kocal]

Also, note that even if we change import * as L from 'leaflet' to import L from 'leaflet' (which I don't really want), the library still won't work because it requires the option editable: true to be passed to L.Map() options, which is not possible (yet?).

[Prometee]

@Kocal about the options : setting a custom options is not easy since the PHP class LeafletOptions only allows tileLayer option to be set. That's why in my case I set it during the pre-connect event.

Thank you very much for this explanations it's now very clear and I hope this issue will helps other devs creating their own Stimulus Controller.

[Kocal]

For the L.Map options (and google.maps.Map for Google Maps), we can implement the same behavior than markers, infoWindows (...) , with the rawOptions options.

export default class extends Controller {
    connect() {
        this.element.addEventListener('ux:map:pre-connect', this._onPreConnect);
    }

    disconnect() {
        this.element.removeEventListener('ux:map:pre-connect', this._onPreConnect);
    }

    _onPreConnect(event) {
        event.detail.rawOptions = {
            editable: true,
            // other custom options if you want
        }
    }
}

About importing Leaflet inside a ESM context, I am unable to see on leaflet documentation what is the "official": import * as L from 'leaflet' or import L from 'leaflet'? On Google/StackOverflow I see both syntaxes.

Finally, for the plugin API issues, to me a good plugin should not automatically register itself, but explicitly by passing a L instance (so only the developer is responsible to import leaflet):

import {Controller} from "@hotwired/stimulus";
import {install as installLeafletEditable} 'leaflet-editable';

export default class extends Controller {
    connect() {
        // ...
        this.element.addEventListener('ux:map:connect', this._onConnect);
    }

    disconnect() {
        // ...
        this.element.removeEventListener('ux:map:connect', this._onConnect);
    }

    _onConnect(event) {
        installLeafletEditable(event.detail.L);
    }
}

[dannyvw]

@Kocal The rawOptions on pre-connect is very useful. This is not working right now right?

[dannyvw]

We tried to implement esri vector layers with the code below. This works but there are some drawbacks. We must remove the default layer to activate the vector layer. This now loads some tilelayers till the request is cancelled. Is there some other option possible hat we don't add the default tile layer?

import { Controller } from "@hotwired/stimulus";

/* stimulusFetch: 'lazy' */
export default class extends Controller {
    connect() {
        this.element.addEventListener('ux:map:connect', this._onConnect);
    }

    disconnect() {
        this.element.removeEventListener('ux:map:connect', this._onConnect);
    }

    async _onConnect(event) {
        const { map } = event.detail;

        // use async because else we miss the connect event. Also set esri vars
        window.L.esri = await import("esri-leaflet/dist/esri-leaflet");
        window.L.esri.Vector = await import("esri-leaflet-vector/dist/esri-leaflet-vector");

        map.removeLayer(Object.values(map._layers)[0]); // Remove default layer else vector map is not working

        L.esri.Vector.vectorBasemapLayer('ArcGIS:Streets', {
          apikey: "<key>",
        }).addTo(map);
    }
}