Leaflet für Contao – Marker verlinken

**JoT** · 20.02.2019, 10:01

Hallo,

ich bin auf der Suche nach einem Lösungsansatz: ich möchte gerne einen Marker auf eine interne Seite bzw. eine URL verlinken. Komme ich evtl. über das Feld ‚featureData‘ in der Marker-Maske weiter? Wenn ja: wie? Denn sobald ich hier etwas eingebe, bekomme ich gleich einen Warnhinweis mit Meldungen wie z.B. ‚expected a instead of u‘. Welche Funktion hat das Feld ‚featureData‘? Der Doku hilft leider nicht weiter.
Kann mir mal jemand einen Tipp geben, ob das überhaupt allein mit der Extension möglich ist und falls ja: wie gehe ich's am besten an?

Schönen Gruß,
Joachim

**webstar** · 20.02.2019, 10:42

Du bist mit "featureData" auf der richtigen Spur. Die Erweiterung macht folgendes:

Marker werden als GeoJSON Objekt übermittelt
Mittels "featureData" können die GeoJSON Properties angereichert werden. Das Eingabeformat ist hier JSON
Im Marker-Layer kann ein angepasster Callback angegeben werden, der die Standardfunktion, wie aus dem GeoJSON Feature ein Marker wird, erweitert wird

Dies auf deinen Anwendungsfall übertragen, musst du folgendes machen:

1. Im Marker-Layer als pointToLayer expression folgendes eingeben:

Code:

function (geoJsonPoint, latlng) {
    // Erstelle einen Marker anhand der Standard-Routine der Contao-Leaflet Erweiterung
    var marker = L.contao.pointToLayer(geoJsonPoint, latlng);
    
    // Falls in den GeoJSON Properties ein Link gesetzt ist, füge ein Click-Event hinzu
    if (geoJsonPoint.properties.data !== undefined && geoJsonPoint.properties.data.href !== undefined) {
    	marker.on('click', function () {
    		window.location.href = geoJsonPoint.properties.data.href;
    	})
    }
    
    return marker;
}

2. Im Marker unter "featureData" den Link definieren

Code:

{
  "href": "https://contao.rocks"
}

**JoT** · 20.02.2019, 11:14

Super - funktioniert! Danke für die Infos, mit denen als Grundlage kann ich mich jetzt auch mal weiter in Contao Leaflets reinarbeiten.

**webstar** · 21.02.2019, 09:49

Habe das Beispiel nun auch in die Dokumentation aufgenommen.

https://leaflet-maps-for-contao.read...ture-data.html

**kischd** · 14.06.2019, 09:15

Hallo Webstar,
ich habe gerade versucht eine Karte anzulegen.
Irgendwas scheine ich falsch zu machen, es kommt nur ein grauer Kasten.
Auf meinem Testsystem hab ich auch noch Googlemaps auf der Seite. Kann das sich beißen?

Ich bin deiner Doku gefolgt, aber evtl hab ich etwas vergessen?

**Fehrmann** · 14.06.2019, 09:35

Hi,

mein ersten Gedanke war, das du vielleicht die Zuweisung der Layer in der Karte vergessen hast. Nach der Erstellung der Layer müssen diese bei der Karte noch ausgewählt werden.

Viele Grüße
René

**kischd** · 14.06.2019, 09:59

Du meinst unter Leaflet-Karten -> werkzeug -> Standardlayer?
Da hab ich die Reference der Karte eingetragen.

Ansonsten hab ich dort nichts eingetagen. Evtl ist das der Fehler?
Braucht es da noch etwas?

**kischd** · 14.06.2019, 10:08

Im Artikelement kann ich ja nichts falsch machen oder?

**webstar** · 14.06.2019, 10:35

Zitat von kischd

Du meinst unter Leaflet-Karten -> werkzeug -> Standardlayer?
Da hab ich die Reference der Karte eingetragen.

Ansonsten hab ich dort nichts eingetagen. Evtl ist das der Fehler?
Braucht es da noch etwas?

Unter Standardlayer musst die die jeweiligen Layer auswählen, die auf der Karte angezeigt werden sollen. Das meinte Fehrmann. Hast du dies vorgenommen?

Standardlayer bedeutet hier, dass die Layer standardmäßig angezeigt werden. Mithilfe den Layer-Kontrollelemente könnte man auch noch zusätzliche Layer einblenden lassen.

**kischd** · 14.06.2019, 11:50

Ok ich glaub ich hab es verstanden, aber meine Karte ist noch grau.

Unter Karten-Layer hab ich angelegt:
- vorkonfigurierte Karte (Openstreetmap)
- Marker-Layer
- Marker

Unter leaflet-Karten lege ich meine Karte an und füge dort
OPenstreetmap und Marker ein.

richtig?

Im Artikel hab ich die Leaflet karte ausgewählt und lediglich breite und höhe angegeben

**webstar** · 14.06.2019, 13:55

Zitat von kischd

Ok ich glaub ich hab es verstanden, aber meine Karte ist noch grau.

Unter Karten-Layer hab ich angelegt:
- vorkonfigurierte Karte (Openstreetmap)
- Marker-Layer
- Marker

Unter leaflet-Karten lege ich meine Karte an und füge dort
OPenstreetmap und Marker ein.

richtig?

Im Artikel hab ich die Leaflet karte ausgewählt und lediglich breite und höhe angegeben

Dir fehlt noch die Angabe des Kartenzentrums und die initiale Zoomstufe. Sonst weiß Leaflet nicht, was es rendern soll.

Alternativ kannst du die Erweiterung auch so konfigurieren, dass der Kartenausschnitt automatisch ermittelt wird. Hierfür musst du im Marker-Layer bei Bounds relation "extend" auswählen. Du sagst damit, dass die Marker die Kartengrenzen erweitern sollen. Bei der Karte selber muss dann unter "Grenzen festlegen" die Option "Nach dem Laden des verzögerten Features" ausgewählt werden. In der Karte bestimmst du nun, dass nach dem Laden der Features (in deinem Fall der Marker) die Kartengrenze ermittelt wird.

**kischd** · 14.06.2019, 14:48

Und sofort geht es ;-)

{
"href": "https://contao.rocks"
}

Einen Inserttag benutzen geht leider nicht oder?
Habs mit {{link_url::685}} probiert...

**Schnippel** · 21.06.2019, 13:36

Hallo Leute,

ich befasse mich auch gerade mit dieser ER ..

Ich möchte folgendes dargestellt haben im FE, so wie es in google-maps auch möglich ist.

Unbenannt-1.jpg

Wie muß ich das anstellen?
Ich möchte für die Adresse einen PIN (nennt man das hier Maker?), sowie ein kleines Kästchen mit Infotext.
Ideal wäre auch, daß das Firmen-Logo auf der Karte zu sehen ist.

Mit der Dokumentation komme ich nicht so recht weiter, bin aber auch kein Techniker vom Wissen her..

Ich habe bisher angelegt:

Unter Karten-Layer:
- Karten-Layer (OpenStreetMap)
- Marker

Unter Leaflet-Karten:
- Karte*

* Bei der Karte habe ich im Feld Standard-Layer den Karten-Layer aktiviert. Wenn ich zusätzlich den Marker aktiviere / einbinde,
bekomme ich im FE eine Fehlermeldung Unable to generate a URL for the named route "leaflet_layer" as such route does not exist.

**webstar** · 21.06.2019, 14:11

Zitat von Schnippel

Bei der Karte habe ich im Feld Standard-Layer den Karten-Layer aktiviert. Wenn ich zusätzlich den Marker aktiviere / einbinde,
bekomme ich im FE eine Fehlermeldung Unable to generate a URL for the named route "leaflet_layer" as such route does not exist.

Nutzt du Contao 4.7? Dann lösche mal den Ordner var/cache. Hatte es schon mehrfach gehabt, dass Routen der Erweiterungen nicht geladen wurden, da irgendwo gecacht und nicht neu aufgebaut wurden.

Alternativ kannst du die Funktion "Verzögertes Laden" deaktivieren. Dann werden die Marker nicht per Ajax nachgeladen.

**Schnippel** · 02.07.2019, 13:18

Nutzt du Contao 4.7? Dann lösche mal den Ordner var/cache.

Habe jetzt Contao 4.7.6 aktuell und den Ordner var/cache gelöscht.
Die Kartenansicht im FE schaut immer noch so hier aus, also ohne Marker / PIN:
Unbenannt-1.jpg

Was muß ich da noch wo einstellen?

**kischd** · 15.07.2019, 16:47

{
"href": "https://contao.rocks"
}
Einen Inserttag benutzen geht leider nicht oder?
Habs mit {{link_url::685}} probiert...

Ich benutze die Contao-Version 4.4
oder kann ich hier nicht mit der Seiten-ID arbeiten?

**webstar** · 15.07.2019, 21:08

Zitat von kischd

Und sofort geht es ;-)

Einen Inserttag benutzen geht leider nicht oder?
Habs mit {{link_url::685}} probiert...

Nein, Insert-Tags werden in dem Feld nicht unterstützt, da hier valider Quellcode stehen muss und bei InsertTags es unvorhersehbar ist, was dort als Rückgabe kommt.

Gern kannst du aber ein Ticket für einen Feature Request aufmachen oder ein entsprechendes Feature beauftragen, dass man bei einem Marker auch eine Verlinkung setzen kann.

**raberos** · 25.07.2019, 11:07

Zitat von kischd

Ich benutze die Contao-Version 4.4
oder kann ich hier nicht mit der Seiten-ID arbeiten?

Das Problem hatte ich auch mal und Irgenwo dann die Lösung gefunden:

In der Rendereinstellung des entsprechenden MetaModels -> Attribute URL -> das Template mm_attr_url* anpassen:

<?php $arrValues = deserialize($this->raw); ?>
<span class="url<?php echo $this->additional_class; ?>"><a href="<?php echo $this->replaceInsertTags($arrValues[1]); ?>"><?php echo (!empty($arrValues[0])) ? $arrValues[0] : $this->replaceInsertTags($arrValues[1]); ?></a></span>

Vielleicht sprechen wir aber nicht von selben Fall.

**kischd** · 25.07.2019, 11:43

Ich kann es ja mal probieren. Mehr als nicht funktionieren kann es ja nicht ;-)

**Schnippel** · 01.08.2019, 12:18

Hallo Leute,

ich stehe immer noch vor dem Problem:
Ich möchte folgendes dargestellt in der Karten-Ansicht haben, so wie es in google-maps auch möglich ist.

Siehe Abbildung, links ist Leaflat und rechts google-maps
https://community.contao.org/de/atta...chmentid=22430

Wie zu erkenne ist, fehlen in der Leaflet-Karte der PIN / Marker für die Adresse, sowie die Darstellung mit Firmen-Logo

Das Problem was ich habe ist, daß ich auf der Karte bei der Adresse keinen PIN / Marker dargestellt bekomme. Geschweige dann von den anderen Informationen.

Ich habe folgndes gemacht:

#1 Karten-Layer angelegt:
Unbenannt-1.jpg

#2 ein Layer vom Typ Marker angelegt:
Unbenannt-2.jpg

#3 Dann auf gelben Bleistift von den in #2 erstellten Layer geklickt und eine Marker erstellt
Unbenannt-3.jpg

#4 eine Karte erstellt mit diesen Einstellungen:
Unbenannt-5.jpg

Ergebnis:

Unbenannt-6.jpg

Nix zu sehen von PIN / Marker bzw. Infos :-/

Was muß ich wo noch einstellen, damit das Ganze funktioniert?

**stefan-at-work** · 01.08.2019, 12:55

Tausche mal bei #4 die Reihenfolge der Layer

Gesendet von iPhone mit Tapatalk

**Schnippel** · 01.08.2019, 14:10

Habe ich gemacht,

Unbenannt-7.jpg

es gibt keine Änderung.
Den var/cache habe ich auch gelöscht.

**stefan-at-work** · 01.08.2019, 14:24

Du hast wahrscheinlich noch keinen Marker angelegt, sondern nur den Layer vom Typ Marker. Den eigentlichen Marker musst Du im Markerlay noch separat anlegen.

**Schnippel** · 01.08.2019, 14:37

Layer vom Typ Marker..
Unbenannt-8.jpg

... darin eine Marker "Adresse" erstellt ..
Unbenannt-9.jpg

... und dann diese Einstellungen hier..
Unbenannt-10.jpg

**Schnippel** · 01.08.2019, 14:48

In der Bearbeitungs-Ansicht istein PIN / Marker zu sehen..

Unbenannt-11.jpg

aber eben in der FE-Darstellung nicht..

**webstar** · 01.08.2019, 21:22

- Gibt es eine Fehlermeldung in der Browserkonsole?
- Wird der Marker angezeigt, wenn du die Option individuelles Icon deaktivierst?
- Ist das individuelle Icon richtig konfiguriert?
- Funktioniert es, wenn du beim Marker Layer due option "Verzögertes Laden" deaktivierst?

Das wären jetzt meine Anfahrtspunkte. Am ehesten vermute ich ein Problem mit dem individuellen Icon.

**Schnippel** · 02.08.2019, 08:11

Gibt es eine Fehlermeldung in der Browserkonsole?

Ich arbeite im DEV-Modus, und das Ganze schaut so hier aus:
Unbenannt-1.jpg

Wird der Marker angezeigt, wenn du die Option individuelles Icon deaktivierst?

Nein, der Marker wird nicht angezeigt, wenn das individuelle ICON deaktiviert wird.

Funktioniert es, wenn du beim Marker Layer due option "Verzögertes Laden" deaktivierst?

Ja, dann ist bei deaktiviertem Icon ein blauer PIN / Marker zu sehen.
Auch bei aktiviertem "Individuellem ICON" ist dieser jetzt zu sehen.

Soll ich das "Verzögertes Laden" deaktiviert lassen?

Lässt sich bei dem individuellem ICON auch ein Logo vom Kunden Platzieren?

**Schnippel** · 02.08.2019, 08:54

Habe die Einstellung gefunden, mit der man ein LOGO / Bild auf die Karte einbinden kann.
Habe aber ein paar Fragen bezüglich der ICON-Anker und POPUP-Anker.
Unbenannt-2.jpg

#1 Was muß man bei Koordinaten genau eingeben?

#2 Was ist unter Popup-Anker genau gemeint? Ist das Popup ein Fenster in dem man individuellen Text eingeben kann, der dann mit auf der Karte angezeigt wird?

#3 Können das LOGO als PIN / Marker und ein Fenster mit Text (Popup ?) in einem Layer erstellt werden, oder braucht man dazu jeweils einen eigenen Layer?

**webstar** · 02.08.2019, 13:32

Zitat von Schnippel

Ich arbeite im DEV-Modus, und das Ganze schaut so hier aus:
Unbenannt-1.jpg

Nein, der Marker wird nicht angezeigt, wenn das individuelle ICON deaktiviert wird.

Ja, dann ist bei deaktiviertem Icon ein blauer PIN / Marker zu sehen.
Auch bei aktiviertem "Individuellem ICON" ist dieser jetzt zu sehen.

Soll ich das "Verzögertes Laden" deaktiviert lassen?

Beim verzögerten Laden wird per Ajax ein Request erstellt. Dieser wird gemäß deinem Screenshot mit einem 500er Fehler beendet. Kannst du die Url des Requests im Browser aufrufen (nachdem du das "Verzögertes Laden" wieder aktiviert hast)? Anhand der Fehlermeldung kommen wir dann vielleicht weiter, wo es hakt.

Solange der Fehler exisitiert, würde ich das "Verzögertes Laden" deaktiviert lassen.

Zitat von Schnippel

Lässt sich bei dem individuellem ICON auch ein Logo vom Kunden Platzieren?

Ja, über den Icon-Typ Image/Bild.

**webstar** · 02.08.2019, 13:34

Zitat von Schnippel

Habe die Einstellung gefunden, mit der man ein LOGO / Bild auf die Karte einbinden kann.
Habe aber ein paar Fragen bezüglich der ICON-Anker und POPUP-Anker.
Unbenannt-2.jpg

#1 Was muß man bei Koordinaten genau eingeben?

#2 Was ist unter Popup-Anker genau gemeint? Ist das Popup ein Fenster in dem man individuellen Text eingeben kann, der dann mit auf der Karte angezeigt wird?

#3 Können das LOGO als PIN / Marker und ein Fenster mit Text (Popup ?) in einem Layer erstellt werden, oder braucht man dazu jeweils einen eigenen Layer?

#1 und #2 Die Erweiterung ist 99% Leaflet. Da hilft dir die Leaflet-Dokumentation weiter: https://leafletjs.com/reference-1.5....divicon-option

#3 Wenn ich dein Anliegen richtig verstehe, ja. Du kannst ja bei jedem Marker ein individuelles Icon auswählen und ein Popup aktivieren.

**Schnippel** · 02.08.2019, 17:26

Beim verzögerten Laden wird per Ajax ein Request erstellt. Dieser wird gemäß deinem Screenshot mit einem 500er Fehler beendet. Kannst du die Url des Requests im Browser aufrufen (nachdem du das "Verzögertes Laden" wieder aktiviert hast)? Anhand der Fehlermeldung kommen wir dann vielleicht weiter, wo es hakt.

Ist diese damit gemeint?
Unbenannt-3.jpg

da kommt dann das hier:
Unbenannt-4.jpg

**webstar** · 11.08.2019, 17:14

Zitat von Schnippel

Ist diese damit gemeint?
Unbenannt-3.jpg

da kommt dann das hier:
Unbenannt-4.jpg

Ja, genau. Die Fehlermeldung zeigt, dass es ein Kompatibilitätsproblem mit dem Parallaxbundle gibt. Dies wird durch eine Abhängigkeit der Leaflet-Erweiterung hervorgerufen. Ich schaue mir dies an. Siehe: https://github.com/netzmacht/contao-...ntext/issues/1

Thema: Leaflet für Contao – Marker verlinken

Themen-Optionen

Thema durchsuchen

Leaflet für Contao – Marker verlinken

Aktive Benutzer

Aktive Benutzer

Berechtigungen

Contao

Empfohlene Webdesign-Bücher