tl_members + Leaflet: Uncaught Error - Bounds are not valid

[worxer]

Ich möchte Mitglieder, die in der Datenbank-Tabelle "tl_members" gespeichert sind, mit einem Pin auf einer Karte darstellen.
Dazu bin ich der Anleitung aus dem Handbuch gefolgt.
Die Anleitung arbeitet mit Leaflet 1.7.1. Diese Version verwende ich vorerst auch und die Dateien liegen im Unterordner /files
Folgende Dateien/Verzeichnise habe ich eingebunden:

contao/dca/tl_member.php
files/js/myMemberLeafletMap.js
templates/list_default_member.html5

darin referenziert:

<?php
    $GLOBALS['TL_CSS'][] = '/files/Leaflet/dist/leaflet.css|static';
    $GLOBALS['TL_JAVASCRIPT'][] = '/files/Leaflet/dist/leaflet.js|static';
    $GLOBALS['TL_JAVASCRIPT'][] = '/files/js/myMemberLeafletMap.js|static';
?>

Contao Version: 4.13.34

Beim einbinden des Frontend-Modul vom »Typ« Auflistung wird die Karte im Frontend leider nur als grauer Kasten angezeigt und in der Konsole wird folgendes ausgegeben:

Uncaught Error: Bounds are not valid.
    jQuery
        fitBounds
        createMemberMap
    <anonymous> https://domain.ddev.site/:422
    jQuery
        e
        t
    jQuery
        fitBounds
        createMemberMap
    <anonym> https://domain.ddev.site/:422
    jQuery
        e
        t

und

Source-Map-Fehler: Error: request failed with status 404
Ressourcen-Adresse: https://domain.ddev.site/assets/js/jquery.min.js,leaflet.js,myMemberLeafletMap.js-ad3e280e.js
Source-Map-Adresse: leaflet.js.map

[worxer]

Herzlichen Dank an den Benutzer "Tastaturberuf". Er hat mir das Template so angepasst, dass es funktioniert:

// list_default_member.html5

<?php
    $GLOBALS['TL_CSS'][] = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
    $GLOBALS['TL_JAVASCRIPT'][] = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
    $GLOBALS['TL_JAVASCRIPT'][] = 'files/js/myMembersLeafLetMap.js|static';

    $tmpMemberMapData = '';
?>

<style>
    .mod_listing div.memberitem {
        border: 1px solid #dadada;
        margin: 4px 4px;
        display: block;
    }
    .mod_listing div p {
        padding: 10px 10px;
        margin: 0;
    }
</style>

<div class="<?= $this->class ?> ce_table listing block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>

<?php if ($this->headline): ?>
<<?= $this->hl ?>><?= $this->headline ?></<?= $this->hl ?>>
<?php endif; ?>

<?php if ($this->searchable && $this->for && empty($this->tbody)): ?>
<?= $this->no_results ?>
<?php else: ?>
<div id="MYMEMBERMAP" class="block" style="height:40vh"></div>

<?php foreach ($this->tbody as $class => $row): dump($this->tbody) ?>
<div class="block memberitem <?= $class ?>"><p>
    <a href="mailto:<?= $row['email']['raw'] ?>">
        <?= $row['firstname']['content'] ?> <?= $row['lastname']['content'] ?></a>
    <span><?= $row['street']['content'] ?? ''?> -
        <?= $row['postal']['content'] ?? ''?> <?= $row['city']['content'] ?? ''?></span>
</p></div>

<?php $tmpMemberMapData .= sprintf("{'markerPopupContent': '%s',  'LatLong': [%s]},",
                $row['firstname']['content'].' '.$row['lastname']['content'],
                $row['myGeoData']['content']);
    ?>
<?php endforeach; ?>
<?php endif; ?>

<script>
    var arrMemberMapData = [<?= $tmpMemberMapData ?>];

    (function($){
        $(document).ready(function(){ createMemberMap(arrMemberMapData); });
    })(jQuery);
</script>

<?= $this->pagination ?>
</div>

[Tastaturberuf]

Die Doku wurde entsprechend angepasst. Oben im Code ist noch ein `dump($this->tbody)` der dort nicht reingehört.