WBCE CMS Forum

florian

Administrator

OfA-Preset für Leaflet-Karte mit Markern

Mit dem hier angefügten OfA-Preset kann eine Leaflet/OpenStreetMap-Karte erzeugt werden, wobei die einzelnen Einträge dann die Kartenmarker sind.

Das ist die Adaption des Presets für das Modul Itemz (R.I.P.) und ähnlich zu dem, was das Leaflet-Maps-Modul macht, aber im ggs. zum Modul Leaflet Maps kann die Popup-Beschreibung per WYSIWYG bearbeitet werden, in der auch [wblink123] und (mit Einschränkungen) Droplets funktionieren.
Die Komfortfunktionen aus dem LeafletMaps-Modul (Lat/Long-Suche, unterschiedliche Icons/Glyphen) stehen dafür in der Itemz-Umsetzung nicht zur Verfügung. Es soll ja kein Konkurrenzprodukt sein.

So funktionierts:
Installation:
1) Preset herunterladen (siehe Anhang zu diesem Post unten) und in OfA 1.1.5 über Allgemeine Einstellungen > Durchsuchen... > Import laden.
2) Die erforderlichen Leaflet-Scripte werden via CDN von unpkg.com geladen, das sowie die Verwendung von OSM muss ggf. entsprechend in der Datenschutzerklärung erwähnt werden.

Anwendung:
1) In den Seiteneinstellungen > Kopfzeile die Zeile

var mymap1 = L.map('mapid1').setView([52.5206,13.3879], 13);

anpassen. Die Werte in den eckigen Klammern geben die Koordinaten an, auf die die Karte zentriert wird, 13 ist der Standard-Zoomlevel.
2) Eintrag anlegen: Name, Beschreibung, Latitude/Longitude (mit Punkt!) eingeben. Beim Inhalt sind normale Formatierungen, Links und auch Bilder möglich, Features wie Colorbox, per Sectionpicker reingezogene (Mini-)Galerien usw. funktionieren aber nicht.

Es können beliebig viele Einträge angelegt werden.
Mehrere Karten auf einer Seite sind mMn nicht so ohne weiteres möglich, weil nicht mehrere OfA-Abschnitte auf derselben Seite angelegt werden sollten.

Auch hier gilt: Das ganze ist sicherlich ausbaufähig, ist bitte nur als "Proof of concept" zu verstehen.
Ach so, und nicht für kommerzielle Seiten verwenden, das sehen die Leute bei der OSM Foundation gar nicht gern.

Bitte auch nicht versuchen, mit Sectionpicker-Modul oder Sectionpicker-Droplet die Karte(n) indirekt zu laden.

---

Code allein macht nicht glücklich. Jetzt spenden!

cyberdyne

Mitglied

Re: OfA-Preset für Leaflet-Karte mit Markern

Auch ein blindes Huhn findet mal ein Korn .

Dem Preset habe ich im Abschnitt Übersicht (Kopfzeile)...

<style type="text/css">
.ljsm {
height:500px;
margin-bottom:1em;
}
</style>

... noch ein z-index zugefügt, da die Karte ansonsten das Menü-Dropdown der 1. Unterebene verdeckt.

<style type="text/css">
.ljsm {
z-index:1;
height:500px;
margin-bottom:1em;
}
</style>

Grüße

---

Macht's gut und danke für den Fisch!