Web UI - multiple Worldmap widgets, only first one loading with page, others delayed

Hi all

I hope you can guide me in a direction for troubleshooting.
We have a running LibreNMS, where this wasn’t an issue until a few month ago.

Our most used dashboards have multiple Worldmap widgets.
Problem is that only one of the widgets are loading and showing contents when dashboard loads.
Remaining widgets/maps are blank/empty for up to 45 second, and then they load alright.
This happens in Chrome/IE/Edge/FF.

I think that this browser console error is related, but I don’t know how to troubleshoot:
[jquery.min.js line 4 > eval:5:40678](https://librenms.mhivofs.net/js/jquery.min.js line 4 > eval)
Uncaught Error: Map container is already initialized.
loadjs https://librenms.mhivofs.net/js/librenms.js?ver=20200501:242
loadjs https://librenms.mhivofs.net/js/librenms.js?ver=20200501:242

Can anyone help me what to look for to troubleshoot the issue, please.

Kind regards

Thomas Winther

Output of ./validate.php

Component Version
LibreNMS 21.1.0-23-g4f66427ce
DB Schema 2021_02_08_224355_fix_invalid_dates (199)
PHP 7.3.22-1+0~20200909.67+debian9~1.gbpdd7b72
Python 3.5.3
MySQL 10.1.45-MariaDB-0+deb9u1
RRDTool 1.6.0
SNMP NET-SNMP 5.7.3

====================================

[OK] Composer Version: 2.0.9
[OK] Dependencies up-to-date.
[OK] Database connection successful
[OK] Database schema correct

Probably a javascript variable collision across the widgets. I don’t think multiple is too common of a use case.

Adding to this one as I have a need for multiple maps and noticed this yesterday.

Current behaviour:

Console log error:

VM6247:5 Uncaught Error: Map container is already initialized.
    at e._initContainer (<anonymous>:5:40678)
    at e.initialize (<anonymous>:5:29595)
    at new e (<anonymous>:5:14732)
    at Object.t.map (<anonymous>:5:140239)
    at Array.<anonymous> (<anonymous>:10:21)
    at Object.success (librenms.js?ver=05072021:242)
    at c (jquery.min.js?ver=05072021:2)
    at Object.fireWith [as resolveWith] (jquery.min.js?ver=05072021:2)
    at l (jquery.min.js?ver=05072021:2)
    at XMLHttpRequest.<anonymous> (jquery.min.js?ver=05072021:2)

A deluge of forum posts for leaflet indicate to check for and null the _leaflet_id before initialising a map - in this case, confirmed to work prior to map initialisation:

resources/views/widgets/worldmap.blade.php

        var container = L.DomUtil.get('leaflet-map-{{ $id }}');
            if(container != null){
                container._leaflet_id = null;
        }

Doing this fixes it, but then you can’t drag any of the maps until they’ve done their first refresh. The closest reference I can find around how to fix that issue is this post which rebuilds and swaps the map div: Error: Map Container Is Already Initialized · Issue #3962 · Leaflet/Leaflet · GitHub

When I try this it complains that the map element is not the child of the widget wrapper and I can’t get it to work and it’s likely involving gridster/tiles and leaflet now.

For me, having the maps display is more important that having to wait 60 seconds to drag them around, though I can see people using a single map getting confused when the map won’t initially drag if I PR the above and were to break the interface in that way.

Would appreciate a DOM/JS/Leaflet expert to add their opinion! I’ve done some really stupid things with jQuery in my time, but beyond that it’s just embarrassing watching me try javascript :slight_smile:

This topic was automatically closed 186 days after the last reply. New replies are no longer allowed.