Hoofprints
Find, share and rate horse riding routes. Available in English and German (language follows the browser; switch with the EN/DE button).
Reitrouten finden, teilen und bewerten, auf Englisch und Deutsch. Auf echten OpenStreetMap-Karten, mit einer zuschaltbaren Ebene für markierte Reitwege. Routen kommen als GPX, KML oder GeoJSON aus Komoot, Strava, Garmin, Equilab oder Outdooractive. Es braucht kein Benutzerkonto.
Was drin ist
- Karte: OpenStreetMap oder OpenTopoMap (mit Höhenlinien), dazu die Ebene „Markierte Reitwege“ von Waymarked Trails, außerdem eine Ortssuche.
- Startseite: Regionssuche („In meiner Nähe“ per Standort), beliebte Schnellfilter, Top-Routen, kurze Anleitung.
- Menü: Startseite, Routen entdecken, Gemerkt, Meine Routen, Route hinzufügen, Sprache, Über.
- Ritt aufzeichnen: live per GPS im Browser. Die Seite muss dabei offen und das Display an bleiben; für Aufzeichnung mit gesperrtem Handy braucht es später eine App.
- Entdecken: Karte und Liste mit Suche; alle Filter in einem eigenen Fenster: Schwierigkeit, Länge, Hängerparkplatz, Galoppstrecke, Wasserstelle, Einkehr und Strand.
- Routendetails: Länge, Dauer, Höhenprofil, Wegbeschaffenheit, Fotos, Bewertungen und GPX-Download.
- Bearbeiten: eigene Routen und Bewertungen lassen sich auf demselben Gerät ändern oder löschen.
- Beitragen ohne Konto: Routen importieren oder zeichnen, Fotos hochladen, bewerten.
- Schutz: Jeder Beitrag trägt eine zufällige Geräte-Kennung, die öffentlich nicht lesbar ist. Damit lassen sich eigene Beiträge auf demselben Gerät löschen und später einem Konto zuordnen.
- Moderation: Es gibt eine Melden-Funktion. Nach 3 Meldungen wird ein Beitrag automatisch ausgeblendet. Pro Gerät sind höchstens 10 Beiträge in 10 Minuten erlaubt.
- Merkliste: Gemerkte Routen bleiben auf dem jeweiligen Gerät.
Zwei Betriebsarten
config.js | Modus | Beiträge |
|---|
| leer (Standard) | Lokal | bleiben im Browser der jeweiligen Person |
| Supabase-Werte eingetragen | Gemeinsam | für alle sichtbar |
Die Seite funktioniert also sofort und wird gemeinsam, sobald die Datenbank angeschlossen ist.
Einrichten
1. Website veröffentlichen
Vercel: Add New → Project → hoofprint importieren → Framework Preset „Other“, kein Build Command → Deploy. Jeder Push geht automatisch online.
Oder GitHub Pages (kostenlos):
- Lade die Dateien ins Repo
hoofprint hoch.
- Öffne im Repo Settings → Pages.
- Wähle bei Source „Deploy from a branch“, als Branch
main und den Ordner / (root), dann Save.
- Nach ungefähr einer Minute läuft die Seite unter
https://<dein-github-name>.github.io/hoofprint/.
2. Gemeinsame Datenbank (Supabase, kostenlos)
-
Lege auf supabase.com ein neues Projekt an. Die Region Frankfurt (eu-central-1) ist wegen der DSGVO sinnvoll.
-
Öffne SQL Editor → New query, füge den Inhalt von supabase/schema.sql ein und klicke auf Run.
-
Unter Project Settings → API findest du die Project URL und den anon public key. Trag beide in config.js ein:
window.HUFSPUR_CONFIG = {
supabaseUrl: "https://xxxx.supabase.co",
supabaseAnonKey: "eyJ..."
};
Der anon key darf öffentlich sein. Die Regeln in schema.sql schützen die Daten.
-
Speichern, committen, fertig. Oben in der Seite steht dann Gemeinsam statt Lokal.
Die Beispielrouten blendest du mit showExamples: false in config.js aus.
Updates der Datenbank
Wenn schon eine Datenbank läuft, führe neue Dateien supabase/update-*.sql einmal im SQL Editor aus (aktuell: update-2026-10-02-edit.sql für „Beiträge bearbeiten“). schema.sql enthält immer alles für eine neue Einrichtung.
Gemeldete Beiträge prüfen
Im Supabase-Dashboard unter Table Editor:
reports zeigt alle Meldungen.- Wenn ein ausgeblendeter Beitrag in Ordnung ist, setzt du in
routes, reviews oder photos die Spalte hidden wieder auf false.
- Löschen geht dort direkt.
Später: optionale Konten
schema.sql enthält schon die Spalte user_id und die Funktion claim_device. Mit einem Login per E-Mail-Link (Supabase Auth) ruft eine angemeldete Person claim_device(<Geräte-Kennung>) auf. Damit gehören ihr alle Beiträge, die sie vorher anonym gepostet hat.
Rechtliches vor dem Start
- Impressum und Datenschutzerklärung sind in Deutschland Pflicht. In die Datenschutzerklärung gehören Supabase, die OSM-Kacheln und die Ortssuche über Nominatim.
- Kartendienste: OpenStreetMap-, OpenTopoMap- und Waymarked-Trails-Kacheln sind für kleine Seiten in Ordnung. Wird die Seite groß, braucht es einen eigenen oder bezahlten Kachel-Anbieter, zum Beispiel MapTiler oder Stadia.
- Fotos und Beschreibungen stammen von Nutzern. Nimm Meldungen ernst und reagiere zügig.
Dateien
index.html: Seite und Gestaltungapp.js: die gesamte Logik (Karte, Liste, Details, Import, Zeichnen, Datenzugriff)config.js: Supabase-Zugangi18n.js: alle Texte auf Deutsch und Englisch (neue Sprache = neuer Block mit denselben Schlüsseln)supabase/schema.sql: Tabellen, Zugriffsregeln, Spam-Bremse, Moderation, Foto-Speicher
