Error connecting controller on map_controller.js when using leaflet

[michelcourtade]

Hi,

I have an issue since (I think) I upgraded my ux-map bundle to 2.22 via composer update symfony/* but I also rebuilt my docker images on my sf roject. I'm running sf 7.3.1 now (7.2 before)
I don't manage to display a Marker anymore on a map. The map is here but the markers don't display due to this error. If I try to display polygons, it works but I have to remove the code for the markers.
I have this error showing on my browser console, just after "symfony--ux-leaflet-map--map #initialize" :

Error connecting controller

TypeError: Cannot read properties of null (reading 'createIcon')
    at NewClass._initIcon (leaflet-src.js:7893:1)
    at NewClass.onAdd (leaflet-src.js:7800:1)
    at NewClass._layerAdd (leaflet-src.js:6897:1)
    at NewClass.whenReady (leaflet-src.js:4590:1)
    at NewClass.addLayer (leaflet-src.js:6955:1)
    at NewClass.addTo (leaflet-src.js:6835:1)
    at extended.doCreateMarker (map_controller.js:151:104)
    at extended.createMarker (map_controller.js:73:1)
    at map_controller.js:25:1
    at Array.forEach (<anonymous>)

{identifier: 'symfony--ux-leaflet-map--map', controller: extended, element: div.leaflet-container.leaflet-touch.leaflet-fade-anim.leaflet-grab.leaflet-touch-drag.leaflet-touch…}

Here is the code on my symfony controller :

$map = (new Map('default'))
            ->center(new Point(44.84581135142777, -0.5735346335130781))
            ->zoom(6)
            ->options(
                (new LeafletOptions())
                    ->tileLayer(new TileLayer(
                        url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
                       options: ['maxZoom' => 19]
                    ))
            );
// $pager is a query builder result from doctrine repository
        foreach ($pager as $site) {
            $map->
            addMarker(new Marker(
                position: new Point($site->getLat(), $site->getLong()),
                title: $site->getName(),
                infoWindow: new InfoWindow(
                    content: '<p>' . $site->getName() . '<br />' . $site->getCustomer()->getName() . '</p>',
                )
            ));
        }

I tried to use symfony/ux-icon in order to define an Icon and pass it to the marker but it doesn't work either ...

I don't know what I'm missing.
Anyone help please ?

Thanks !

[Kocal]

Hi,

The code seems correct, but I wonder, you said

• I upgraded my ux-map bundle to 2.22 via composer update symfony/*

but the latest version is the 2.27.0 and not 2.22

• How do you load Leaflet on the page? Are you using a development version (leaflet-src.js), and which version number?

[michelcourtade]

Hi,
it's a mistake, I'm currently on 2.27.0 version not 2.22.

I installed the leaflet package via
composer require symfony/ux-leaflet-map
and I'm using webpack Encore.
I do not use a development version.
The version of leaflet used is : Leaflet 1.9.4

[Kocal]

Hi, it's a mistake, I'm currently on 2.27.0 version not 2.22.

Perfect then 👍🏻

I installed the leaflet package via composer require symfony/ux-leaflet-map and I'm using webpack Encore. I do not use a development version. The version of leaflet used is : Leaflet 1.9.4

Nah okay that's fine, it uses the unminified (development) version because of main entry in Leaflet's package.json, but that's fine.

Maybe... it's due to a normalization issue? C
an you show the source code of your page, and copy/paste the HTML code that renders the Map? It should be something like <div data-controller="symfony--ux-leaflet-map--map" data-symfony--ux-leaflet-map--map-provider-options-value="{}" ...>

Thanks!

[michelcourtade]

Thanks,

here is the html code :

<!--StartFragment-->
<div data-controller="symfony--ux-leaflet-map--map" data-symfony--ux-leaflet-map--map-provider-options-value="{}" data-symfony--ux-leaflet-map--map-center-value="{&quot;lat&quot;:45.7534031,&quot;lng&quot;:4.8295061}" data-symfony--ux-leaflet-map--map-zoom-value="6" data-symfony--ux-leaflet-map--map-fit-bounds-to-markers-value="false" data-symfony--ux-leaflet-map--map-options-value="{&quot;tileLayer&quot;:{&quot;url&quot;:&quot;https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png&quot;,&quot;attribution&quot;:&quot;\u00a9 &lt;a href=\&quot;https:\/\/www.openstreetmap.org\/copyright\&quot;&gt;OpenStreetMap&lt;\/a&gt;&quot;,&quot;options&quot;:{&quot;maxZoom&quot;:19}},&quot;attributionControlOptions&quot;:{&quot;position&quot;:&quot;bottomright&quot;,&quot;prefix&quot;:&quot;Leaflet&quot;},&quot;zoomControlOptions&quot;:{&quot;position&quot;:&quot;topleft&quot;,&quot;zoomInText&quot;:&quot;&lt;span aria-hidden=\&quot;true\&quot;&gt;+&lt;\/span&gt;&quot;,&quot;zoomInTitle&quot;:&quot;Zoom in&quot;,&quot;zoomOutText&quot;:&quot;&lt;span aria-hidden=\&quot;true\&quot;&gt;&amp;#x2212;&lt;\/span&gt;&quot;,&quot;zoomOutTitle&quot;:&quot;Zoom out&quot;},&quot;@provider&quot;:&quot;leaflet&quot;}" data-symfony--ux-leaflet-map--map-markers-value="[{&quot;position&quot;:{&quot;lat&quot;:44.85545503497679,&quot;lng&quot;:-0.5862949644014535},&quot;title&quot;:&quot;Test 1&quot;,&quot;infoWindow&quot;:{&quot;headerContent&quot;:null,&quot;content&quot;:&quot;&lt;p&gt;Test 1&lt;br \/&gt;&lt;\/p&gt;&quot;,&quot;position&quot;:null,&quot;opened&quot;:false,&quot;autoClose&quot;:true,&quot;extra&quot;:[]},&quot;icon&quot;:{&quot;type&quot;:&quot;ux-icon&quot;,&quot;width&quot;:24,&quot;height&quot;:24,&quot;name&quot;:&quot;fa:map-marker&quot;,&quot;_generated_html&quot;:&quot;&lt;svg xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 1024 1536\&quot; fill=\&quot;currentColor\&quot; width=\&quot;24\&quot; height=\&quot;24\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M768 512q0-106-75-181t-181-75t-181 75t-75 181t75 181t181 75t181-75t75-181m256 0q0 109-33 179l-364 774q-16 33-47.5 52t-67.5 19t-67.5-19t-46.5-52L33 691Q0 621 0 512q0-212 150-362T512 0t362 150t150 362\&quot;\/&gt;&lt;\/svg&gt;&quot;},&quot;extra&quot;:[],&quot;id&quot;:null,&quot;@id&quot;:&quot;0f2f7f68a506d676&quot;},{&quot;position&quot;:{&quot;lat&quot;:44.859470684412976,&quot;lng&quot;:-0.5571538478456224},&quot;title&quot;:&quot;Test 2&quot;,&quot;infoWindow&quot;:{&quot;headerContent&quot;:null,&quot;content&quot;:&quot;&lt;p&gt;Test 2&lt;br \/&gt;&lt;\/p&gt;&quot;,&quot;position&quot;:null,&quot;opened&quot;:false,&quot;autoClose&quot;:true,&quot;extra&quot;:[]},&quot;icon&quot;:{&quot;type&quot;:&quot;ux-icon&quot;,&quot;width&quot;:24,&quot;height&quot;:24,&quot;name&quot;:&quot;fa:map-marker&quot;,&quot;_generated_html&quot;:&quot;&lt;svg xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 1024 1536\&quot; fill=\&quot;currentColor\&quot; width=\&quot;24\&quot; height=\&quot;24\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M768 512q0-106-75-181t-181-75t-181 75t-75 181t75 181t181 75t181-75t75-181m256 0q0 109-33 179l-364 774q-16 33-47.5 52t-67.5 19t-67.5-19t-46.5-52L33 691Q0 621 0 512q0-212 150-362T512 0t362 150t150 362\&quot;\/&gt;&lt;\/svg&gt;&quot;},&quot;extra&quot;:[],&quot;id&quot;:null,&quot;@id&quot;:&quot;3a2dd339c57e763b&quot;},{&quot;position&quot;:{&quot;lat&quot;:44.845843926656045,&quot;lng&quot;:-0.5713499971126991},&quot;title&quot;:&quot;Test 3&quot;,&quot;infoWindow&quot;:{&quot;headerContent&quot;:null,&quot;content&quot;:&quot;&lt;p&gt;Test 3&lt;br \/&gt;&lt;\/p&gt;&quot;,&quot;position&quot;:null,&quot;opened&quot;:false,&quot;autoClose&quot;:true,&quot;extra&quot;:[]},&quot;icon&quot;:{&quot;type&quot;:&quot;ux-icon&quot;,&quot;width&quot;:24,&quot;height&quot;:24,&quot;name&quot;:&quot;fa:map-marker&quot;,&quot;_generated_html&quot;:&quot;&lt;svg xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot; viewBox=\&quot;0 0 1024 1536\&quot; fill=\&quot;currentColor\&quot; width=\&quot;24\&quot; height=\&quot;24\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;path fill=\&quot;currentColor\&quot; d=\&quot;M768 512q0-106-75-181t-181-75t-181 75t-75 181t75 181t181 75t181-75t75-181m256 0q0 109-33 179l-364 774q-16 33-47.5 52t-67.5 19t-67.5-19t-46.5-52L33 691Q0 621 0 512q0-212 150-362T512 0t362 150t150 362\&quot;\/&gt;&lt;\/svg&gt;&quot;},&quot;extra&quot;:[],&quot;id&quot;:null,&quot;@id&quot;:&quot;021ba5d6c3dccd53&quot;}]" data-symfony--ux-leaflet-map--map-polygons-value="[]" data-symfony--ux-leaflet-map--map-polylines-value="[]" data-symfony--ux-leaflet-map--map-circles-value="[]" data-symfony--ux-leaflet-map--map-rectangles-value="[]" style="height: 400px;"></div>
--
 

<!--EndFragment-->

[Kocal]

Thanks,

Are you sure about your code? Because I see that your makers use the UX Icon fa:map-marker, but I don't see any new Marker(icon: Icon::ux('fa:map-marker')) in your PHP code.

[Kocal]

Anyway, I don't see why it's failing, can you share a reproducer please?

[michelcourtade]

Yes I'm sure about the code because the example I gave is without the Icon:ux() as I don't really need it at this time. But I tried with it because of the error pointing to the icon ("createIcon). But it doesn't work neither.

I think maybe it's not a problem about the code because my code deployed on another platform (prod server) is working and I see the markers but it's on my dev machine that I encounter this problem (recently) so I'm gonna try to rebuild the project from scratch.

The weird thing is that when I remove the markers from PHP code, the other stuff is working (polygons for example, not showed in this example) so I suspect something from the libraries installed on the project or related to webpack / yarn.

If I can reproduce, I will share it here.
Thanks

[Kocal]

I also think that's the most plausible, the code looks right to me but maybe something happens during JS code compilation through Encore. Maybe you could share your package.json dependencies and webpack.config.js, or any related things.

By experience, I remember I had issues when using Terser (the default JavaScript code minifier in Webpack) at a certain minification level, with the Sentry SDK.

What happens when you run encore dev, or encore prod with:

Encore.configureTerserPlugin((options) => {
    // https://github.com/webpack-contrib/terser-webpack-plugin?tab=readme-ov-file#options
    options.terserOptions = {
         compress: false,
         // see https://github.com/terser/terser?tab=readme-ov-file#minify-options for options
     }
})