Das Solidara-Map WordPress-Plugin

Einleitung

Das WordPress-Plugin Solidara Map ermög­licht es, inter­aktive Leaflet-Karten auf deiner Website einzu­binden. Es unter­stützt GeoJSON-Daten und verschiedene Marker-Formate wie Text-Labels, Emojis, FontA­wesome-Icons oder Bilder. Diese Anleitung erklärt, wie du das Plugin einsetzt und deine eigene Karte mit Markern erstellst.

---

1. Shortcode verwenden

Um eine Karte auf deiner Seite einzu­binden, verwende folgenden Shortcode:

[solidara_map id="123"]

Ersetze 123 durch die ID des Pods-Eintrags (Pods-Typ: map), der die Karten­daten enthält.

---

2. Voraus­set­zungen im Beitrag (ID)

Folgende Metafelder müssen im Pods-Eintrag vom Typ map mit der angege­benen ID existieren:

• lat: Breitengrad (z. B. 52.5200)
• lon: Längengrad (z. B. 13.4050)

Um diese Koordi­naten wird die Karte zentriert, wenn zoom angegeben ist.

Optional:

• zoom: Zoomstufe (z. B. 13 oder leer für fitBounds)
• geojson: GeoJSON-Daten (als Text)

Beispiel für ein einfaches GeoJSON-Array:

[
  {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [13.4050, 52.5200]
    },
    "properties": {
      "textLabel": "Berlin",
      "emoji": "🌟",
      "popupContent": "Hauptstadt von Deutschland"
    }
  }
]

Das Plugin ergänzt diesen JSON-Block automa­tisch zu einem gültigen FeatureCollection-Objekt.

---

3. Unter­stützte Marker-Typen

Je nach Inhalt der GeoJSON-Properties kann das Plugin folgende Marker rendern:

• TextLabel: "textLabel": "Dein Text" (mit optio­nalem textColor und textSize)
• Emoji: "emoji": "🌟" oder in marker.emoji
• FontA­wesome-Icon: "faIcon": "fas fa-star" oder in marker.faIcon
• Bild: "image": "bild.jpg" oder in marker.image
• Marker-Icon: "marker": { "markerUrl": "icon.png" }
• Polygon: "geometry.type": "Polygon" + Koordi­na­ten­array
• Kreis: "circle": { "radius": 200 } in den Properties

Optional: Jedes Objekt kann popupContent enthalten, um ein Popup beim Klick anzuzeigen.

---

4. Besondere Funktionen

• combi­nedIcon: Marker mit Bild + Icon kombi­nieren über:

"marker": {
  "markerUrl": "rot.png",
  "faIcon": "fas fa-heart",
  "customCombinedIcon": true
}

• Draggable Marker: Marker mit draggable: true können verschoben werden.
• Popup mit Speichern-Link: Kombi­nierte Marker zeigen bei Klick einen “Speichern”-Link (z. B. für künftige Erwei­terung zur Speicherung der Position).

---

5. Standard­pfade für Marker und Bilder

Wenn Marker-URLs oder Bildpfade nicht mit http beginnen, verwendet das Plugin Standard­pfade:

• Marker-Icons: /wp-content/plugins/solidara-map/marker/free-map-marker-icon-...
• Bilder: https://informatoo.com/images/

---

6. CSS und Design

Die Datei solidara-map.css kann angepasst werden, um Marker-Größen, Farben oder andere Stile zu verändern. Die Marker verwenden standard­mäßig 78×78 Pixel.

---

7. Tipps zur GeoJSON-Erstellung

• Nutze Online-Tools wie geojson.io zur Erstellung von Features.
• Achte auf die Struktur und geschweifte Klammern.
• Wenn du nur ein Array übergibst ([ ... ]), erkennt das Plugin dies automa­tisch als FeatureCollection.

---

8. Fehler­be­hebung

• Keine Karte sichtbar? Prüfe, ob lat, lon, zoom oder gültige GeoJSON-Daten vorhanden sind.
• Marker fehlen? Achte auf korrekte Property-Namen und gültige Koordi­naten.
• Popup wird nicht angezeigt? Überprüfe, ob popupContent korrekt gesetzt ist.

---

9. Version und Support

• Aktuelle Plugin-Version: 5.34
• Autor: Werner Noske
• Weitere Entwick­lungen sind geplant. Vorschläge und Mitent­wicklung willkommen.

---

Viel Erfolg beim Einbinden deiner inter­ak­tiven Karte mit dem Solidara Map Plugin!