README

Eigenständige TYPO3-13-Extension für Wanderrouten-Karten in Artikeln.

Funktionen

• Eigene Datensätze für Wanderrouten
• Zwischenstopps als Inline-Datensätze
• Interaktive OpenStreetMap/Leaflet-Karte im Frontend
• Routenpfad über lat,lng je Zeile oder GeoJSON LineString
• Pfadfarbe pro Wanderweg als Hex-Farbe im Format #xxxxxx
• Eigene FAL-Icons für Markierungsanfang und Markierungsende pro Wanderweg
• Card-Liste und Detailansicht als Extbase-CType-Plugin
• FAL-Bilder, Downloads (GPX/KML/GeoJSON/PDF), Kategorien
• Optionale Verknüpfung zu EXT:news über das Feld „Verknüpfter News-/Artikel-Datensatz“
• TYPO3-13-Site-Set für TypoScript-Konfiguration
• Bootstrap-Package-kompatibles Bootstrap-5-Markup
• Design-Styles als SCSS unter Resources/Public/Scss/

Bootstrap Package / SCSS

Die Extension ist für TYPO3 13.4 und Bootstrap Package ausgelegt.

Das Site Set Hiking Routes hat die Abhängigkeit:

bootstrap-package/bootstrap-5

Dadurch steht Bootstrap 5 im Frontend bereit. Die Extension nutzt bewusst Bootstrap-Klassen wie row, col, card, ratio, badge, btn, list-group, alert und bg-body-tertiary. Die eigenen Styles ergänzen nur die Karten-, Routen- und Marker-Darstellung.

Die Design-Datei wird als SCSS eingebunden:

page.includeCSS.hikingRoutes = EXT:hiking_routes/Resources/Public/Scss/hiking-routes.scss

Es gibt keine eigene Design-CSS-Datei mehr. Nur die unveränderte Leaflet-Vendor-Datei leaflet.css bleibt als Drittanbieter-CSS erhalten, weil Leaflet diese für die Kartensteuerung benötigt.

Alternative: SCSS über das Sitepackage bündeln

Wenn alle Styles zentral im Sitepackage kompiliert werden sollen, kann die Datei auch dort importiert werden, z. B. in:

EXT:sitepackage/Resources/Public/Scss/Theme/theme.scss

@import "variables";
@import "EXT:bootstrap_package/Resources/Public/Scss/bootstrap5/theme";
@import "EXT:hiking_routes/Resources/Public/Scss/hiking-routes";

Dann sollte die Zeile page.includeCSS.hikingRoutes im eigenen Sitepackage per TypoScript entfernt oder überschrieben werden, damit das SCSS nicht doppelt geladen wird.

Installation

composer config repositories.hiking-routes path packages/hiking_routes
composer require d3werk/hiking-routes:@dev
vendor/bin/typo3 extension:setup
vendor/bin/typo3 cache:flush

Alternativ den Ordner hiking_routes nach packages/ legen und das Root-composer.json des Projekts entsprechend ergänzen.

Site Set aktivieren

Im Backend:

Site Management > Sites > Website bearbeiten > Sets for this Site

Dann das Set Hiking Routes aktivieren. Das Projekt sollte zusätzlich Bootstrap Package verwenden, z. B. über bootstrap-package/full im Sitepackage oder über die Abhängigkeit bootstrap-package/bootstrap-5 des Hiking-Routes-Sets.

Redaktionelle Einrichtung

1. Einen SysFolder für Wanderrouten anlegen, z. B. Wanderrouten.
2. Darin Datensätze vom Typ Wanderroute anlegen.
3. Route pflegen:
   • Titel, Teaser, Beschreibung
   • Länge, Dauer, Schwierigkeit, Start/Ziel
   • Routen-Koordinaten als lat,lng je Zeile oder GeoJSON LineString
   • Pfadfarbe auswählen, z. B. #5c6824 oder #83368c
   • optional eigenes Start- und Ziel-Icon als SVG/PNG/WebP/JPG setzen
   • Zwischenstopps als Inline-Datensätze mit Koordinaten
4. Auf einer Seite das Inhaltselement Wanderrouten-Karten einfügen.
5. Im Plugin den SysFolder als Ausgangspunkt setzen.
6. Optional eine Detailseite anlegen und im Plugin als Detailseite auswählen.

Pfadfarbe und Start-/Ziel-Icons

Im Reiter Karte des Datensatzes Wanderroute gibt es die Palette Routendarstellung.

Dort können gepflegt werden:

• Pfadfarbe: native TYPO3-Farbauswahl, gespeichert als Hex-Wert #xxxxxx
• Icon für Markierungsanfang: eigenes FAL-Bild, z. B. SVG oder PNG
• Icon für Markierungsende: eigenes FAL-Bild, z. B. SVG oder PNG

Wenn kein eigenes Icon gewählt wird, erzeugt die Extension automatisch Bootstrap-kompatible Start-/Ziel-Marker. Wenn keine Start-/Ziel-Koordinaten gepflegt sind, nutzt die Karte automatisch den ersten und letzten Punkt der Routenkoordinaten.

Beispiel für Routen-Koordinaten

53.197700,9.975000
53.201200,9.982400
53.205900,9.989100
53.198900,9.996200

Oder als GeoJSON:

{
  "type": "LineString",
  "coordinates": [
    [9.975000, 53.197700],
    [9.982400, 53.201200],
    [9.989100, 53.205900]
  ]
}

Tile-Server / Datenschutz

Standardmäßig wird OpenStreetMap verwendet:

plugin.tx_hikingroutes.settings.defaultTileUrl = https://tile.openstreetmap.org/{z}/{x}/{y}.png
plugin.tx_hikingroutes.settings.defaultTileAttribution = © OpenStreetMap contributors

Für produktive kommunale Seiten kann ein eigener Tile-Proxy oder ein datenschutzkonformer Tile-Dienst eingetragen werden.

Anpassung im Sitepackage

Templates können im Sitepackage überschrieben werden:

plugin.tx_hikingroutes.view.templateRootPaths.20 = EXT:sitepackage/Resources/Private/Extensions/HikingRoutes/Templates/
plugin.tx_hikingroutes.view.partialRootPaths.20 = EXT:sitepackage/Resources/Private/Extensions/HikingRoutes/Partials/
plugin.tx_hikingroutes.view.layoutRootPaths.20 = EXT:sitepackage/Resources/Private/Extensions/HikingRoutes/Layouts/

Die SCSS-Variablen können beim Import im Sitepackage überschrieben werden:

$hiking-routes-accent: #83368c;
$hiking-routes-map-height-detail: min(65vh, 38rem);
@import "EXT:hiking_routes/Resources/Public/Scss/hiking-routes";

Hinweise zu EXT:news

Die Extension hängt nicht hart von EXT:news ab. Ist EXT:news installiert, erscheint im Routendatensatz ein Feld zur Auswahl eines News-/Artikel-Datensatzes. Damit können Wanderrouten redaktionell einem Artikel zugeordnet werden, ohne die News-Tabellen zu verändern.