Geo- und Karten-Unterstützung für REDAXO 5.14+
Das Addon bündelt Funktionen für den Umgang mit Geo-Koordinaten: Tile-Proxy, Tile-Cache, Rechnen mit Koordinaten auf PHP-Ebene, Karten mit Leaflet anzeigen.
Die Konfiguration ist flexibel und update- bzw. reinstallations-sicher individualisierbar. Die Kartenanzeige mit LeafletJS kann mit eigenen JS-Schnipseln rasch und on the fly erweitert werden.
Kontakt: Thomas Skerbis
-
Backend
- Karten-URLs zu Karten-Anbietern mit weiteren Parametern inkl. Sprachunterstützung und Cache-Verhalten
- Kartensätze zusammenstellen und verwalten, die auf einer oder mehreren Karten-Urls basieren
- Datenverwaltung mit YForm
- Proxy-Server für Karten-Abrufe vom Browser
- Cache für Karten-Abrufe
- Verschleierung der tatsächlichen Karten-Url ggü. dem Client / Schutz der ggf. kostenpflichtigen appId´s z.B. von Google oder HERE
- Kartendarstellung im Moduloutput mit demselben Code wie im Frontend
- Ausführliche Dokumentation online im Backend (bei installiertem Addon) bzw. auf GitHub
-
Karten
- LeafletJS als Kartensoftware integriert
- Karten-HTML als Custom-HTML-Element
<rex-map .... ></rex-map> - Erweiterbare Tools zur Datendarstellung inkl. geoJSON (Basis, erweiterbar)
- Anwendungsbeispiel für Module
- Einfache Einbindung des komprimierten JS / CSS im Frontend passend zur individuellen Konfiguration.
-
Demo
- Stand-alone-Demo zur Demonstration des Custom-HTML-Elements und des Cache
- redaxo/src/addons/geolocation/docs/example/demo.html bitte ins REDAXO-Root kopieren wg. der Pfade
-
- Je Tile-URL ein eigenes Verzeichnis, separat löschbar
- Cronjob zum Aufräumen
- Dateien löschen, die älter sind als die Time-to-live der Tile-URL
- weitere ältere Dateien löschen wenn das Verzeichnis zu viele Dateien enthält
-
- class FriendsOfRedaxo\Geolocation\Calc\Point: Koordinaten verwalten
- verschiedene Format als Input/Output; Konvertierung
- Distanzen und Richtung ermitteln
- Zielpunkt aus Richtung und Distanz
- class FriendsOfRedaxo\Geolocation\Calc\Box: Rechteckigen Bereich verwalten
- Anlegen aus zwei gegenüberliegenden Ecken
- Dynamisch erweitern
- diverse Abfragen (north, south, ....)
- Berechnete Werte (center, innerRadius, outerRadius)
- class FriendsOfRedaxo\Geolocation\Calc\Math: Rechteckigen Bereich verwalten
- diverse Methoden und Defaults basierend auf phpGeo
- Distanzen und Richtung ermitteln
- Zielpunkt aus Richtung und Distanz
- Konvertierung (DezimalDegree nach Degree/Minute und Degree/Minute/Second)
- class FriendsOfRedaxo\Geolocation\Calc\Point: Koordinaten verwalten
- Karten interaktiv gestalten (Bounding-Box auswählen, Marker setzen/verschieben, ...)
- Interaktion Karte und Eingabefeld
- Zu einer Adresse die Koordinate ermitteln
- Abfragen (z.B. Koordinate zu Adresse, Umkreissuche) cachen oder zumindest durch den Proxy leiten
- Umgang mit Links z.B. auf Marker/Icon-Bildchen in geoJSON-Datensätzen (cachen oder zumindest durch den Proxy leiten)
- .....
Ideen gibt es, Hilfe ist willkommen.
In das Verzeichnis redaxo/src/addons/geolocation entpacken und in der Addon-Verwaltung die
Installation durchführen.
Dabei werden Demo-Daten (Links zu Tile-Servern und zwei Kartensätze installiert). Die Here-Kartenlinks
sind ohne die nötige "appId", die nach Registrierung bei HERE erzeugt
werden kann. Die vorgesehene Stelle in der URL ist mit .......... markiert.
Der Cronjob für die Cache-Bereinigung hat die Einstellungen
- Einmal am Tag (04:30)
- Backend/Frontend
- Scriptanfang
- aktiviert
Details - auch zu individualisierten Installationen - stehen in der Installationsanleitung
OSM-Proxy-Nutzer müssen im Abschnitt Karten die gewünschten Tileserver hinterlegen und im Anschluss die URL für die Tiles im z.B. Leaflet JS ändern.
/index.php?geolayer=«id»&x={x}&y={y}&z={z}&r={r}(«id» steht für die Datensatz-ID der gewünschten Karte)
Darstellung der Karte im Browser über ein Custom-HTML-Element:
<rex-map mapset="..." dataset="..."></rex-map>Die Attribute sind zu Strings umgeformte Arrays/Objekte.
<rex-map
class="leaflet-map"
mapset="[{"tile":"1","label":"Karte",....}]"
dataset="{"position":[47.516669,9.433338],....}"
></rex-map>Der JS-Code dazu ist ausbaufähig. Das HTML-Beispiel zeigt aber schon, wie mit setAttribute der Datensatz und die Kartenzusammenstellung ausgetauscht werden können.
Idee: komplexe interaktive Inputs für verschiedene Datensatz-Elemente in einer Web-Komponente gebündelt
<rex-map-input class="..." name="..." value="«dataset»" tools="position,marker,bounds,..."></rex-map-input>Die Karte wird über einen Datensatz gesteuert, der die relevanten Daten zur Karte enthält.
datensatz = {
position: [47.516669,9.433338],
bounds: [[47.5,9.3],[47.7,9.7]],
marker: [[47.611593,9.296344],[47.586204,9.560653],[47.54378,9.686559]],
}Alle Angaben sind optional. Position ist der "Hauptmarker" in der Karte in rot. Alle anderen zusätzlichen Marker sind blau. "Bounds" legt das Rechteck fest, dass auf jeden Fall in der Karte sichtbar sein soll.
Grundidee: es gibt gleich strukturierte Klassen je "Tool", wobei alle Elemente im Datensatz (position,bounds,marker) jeweils eine eigene Klasse haben. Die Klasse steuert die Anzeige auf der Karte toolspezifisch. Das System ist einfach erweiterbar nur durch Bereitstellung einer neuen Toolklasse.
Im Backend werden aus Layern(Tiles/Kacheln) Kartensätze zusammengestellt, die ihrerseits einen Datensatz bilden. Leaflet unterscheidet zwischen Basiskarten (type=b) und Overlays (type=o).
kartensatz = [
{
"layer":"1",
"label":"Karte",
"type" :"b",
"attribution":"Map Tiles © 2020 <a href=\"http:\/\/developer.here.com\">HERE<\/a>",
"active": true,
},
{
"layer":"2",
"label":"Satellit",
"type" :"b",
"attribution":"Map Tiles © 2020 <a href=\"http:\/\/developer.here.com\">HERE<\/a>"
"active": false,
},
{
"layer":"3",
"label":"Hybrid",
"type" :"b",
"attribution":"Map Tiles © 2020 <a href=\"http:\/\/developer.here.com\">HERE<\/a>"
"active": false,
}
]Basiversion by Christoph Böcker.
Inspiriert von Thomas Skerbis Addon "osmproxy" und gefüttert mit Ideen und Snippets aus anderen Addons und aus den Diskussionen dazu auf GitHub und im Slack-Channel.
Kartendarstellung mit LeafletJS von Vladimir Agafonkin und weiteren Tools (siehe CREDITS).
Für Rechenoperationen mit Koordinaten und Formatumwandlungen ist die PHP-Bibliothek phpGeo von Markus Jaschen eingebaut.
Ideen-Beitrag für das Geo-Projekt von Thomas Blum
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent