Anzeige 3 Karten über Tab-, bzw Accordionmenü

[alex-jj]

Hallo,
drei Standorte sollen in einem Beitrag über eine Tabnavigation angezeigt werden. Leider wird nur die erste Karte geladen. Bei den anderen beide nur je ein, zwei Leaflet.
Aktuell werden die Karten im Beitrag als Custom-Module geladen:
{loadmoduleid 142}
{loadmoduleid 143}
{loadmoduleid 144}

Vorher hatte ich die PhocaMaps direkt im Beitrag eingebunden:
{phocamaps view=map|id=1}
{phocamaps view=map|id=2}
{phocamaps view=map|id=3}

Wenn ich statt TabNav ein Accordion wähle besteht das selbe Problem.
Wenn die drei Karten in dem Beitrag untereinander ohne Tab-Nav veröffentlicht werden, wird alles geladen.


Joomla 4
Bootstrap 5

Screen: https://imgur.com/a/TVH8Caf

Vielen Dank

[Jan]

Hallo, welche Version von Phoca Maps verwendest du? Da sieht so aus, das bei den zwei letzten Karten kein JS von OSM geladen ist. Es war einmal in Histore so ein Problem, dass OSM Karten nicht in dynamisch geladenen Items geladet waren, aber das war schon lange her behebt.

Jan

[alex-jj]

Hallo Jan,
vielen Dank für deine Rückmeldung.
Ich habe jetzt alles auf Joomla 5.1.1 angepasst. Leider keine Verbesserung.
- Phoca Maps 5.0.0
- Phoca Maps Plugin 5.0.1
Kann es sein das sich Bootstrap 5 und Phoca Maps nicht verstehen?

[alex-jj]

Zum obigen Problem. Ich habe jetzt ein reines Joomla 5.1.1 mit dem Cassiopeia Template installiert. Einzige Erweiterungen sind:
- JCE
- PhocaMaps 5.0.0
- PhocaMaps Plugin 5.0.1.
- Bootstrap ist seit Joomla 4 dabei

Im Beitrag ist ein Tab-Menü (Karteireiter) mit drei Standorten eingebunden.
Es werden beim wechsel der Karteireiter die Karten nicht geladen.
{phocamaps view=map|id=1}
{phocamaps view=map|id=2}
{phocamaps view=map|id=3}

Hier der Demo-Link: https://joomla5.friebel.it/index.php/tab

[Jan]

Hi, this is similar issue to this:
https://www.phoca.cz/forum/viewtopic.php?t=62308

Jan

[alex-jj]

Hallo Jan,

vielen Dank für den Link zum "Only first tile of OSM loaded" OSM Javascript code (https://www.phoca.cz/forum/viewtopic.php?t=62308). In welchem JS muss ich den Code hinzufügen und in welchem Pfad es liegt? Unter media/com_phocamaps/js gibt es sehr viele JS, zu OSM finde ich aber nichts. Wie bekomme ich es updatesicher in mein Template?

Vielen Dank

[Jan]

Hallo, z.B. hier:

administrator/components/com_phocamaps/helpers/phocamapsmaposm.php

function createMap

Jan

[alex-jj]

Hallo Jan,
ich habe jetzt das Codeschnipsel in der phocamapsmaposm.php am Ende der Funktion function createMap eingebunden.
function createMap($lat, $lng, $zoom) {
$o[]= 'jQuery(\'.phTabs ul li a\').click(function(){ setTimeout(function() { map'.$this->name.$this->id.'.invalidateSize(); }, 0);});';
}
Es wird eine Karte nach wie vor nur auf dem ersten Reiter geladen. Auf zwei und drei jeweils eine Kachel.

[Jan]

Hallo,

ich glaube, du sollst dieses "phTabs ul li a" modifizieren, so die Items sollten die sein, die bei dir aktiv sind. Ich glaube nicht, dein Accordion hat gleiche tab Klassen wie Phoca Gallery.

Jan

[alex-jj]

Hallo Jan,
vielen Dank für dein Geduld, wir haben es jetzt hinbekomme.

Lösung:
administrator/components/com_phocamaps/helpers/phocamapsmaposm.php

function renderMap

public function renderMap() {
$o = array();
$o[] = 'jQuery(document).ready(function() {';
$o[] = implode("\n", $this->output);
$o[]= 'jQuery(\'.nav-tabs li a\').click(function(){ setTimeout(function() { map'.$this->name.$this->id.'.invalidateSize(); }, 0);});';
$o[] = '})';
Factory::getDocument()->addScriptDeclaration(implode("\n", $o));
}