d3d9/hst-svg-netzplan

Interactive public transport network map of Hagen

hst-svg-netzplan

Live unter https://d3d9.github.io/hst-svg-netzplan/.

Weitere Details/Planungen folgen.

Datenabruf

Aktuell wird eine Anfrage an einen lokalen Server siehe https://gist.github.com/d3d9/c2c796b44220eaf70eeaf876b2f6e100 gemacht.

Zukünftig sollte dies besser anders geschehen, bestenfalls ohne Umweg direkt mit Anfrage bei der VRR-EFA aus dem Browser heraus, hierzu ist u. a. die Situation bzgl. CORS und einem virtuellen Verzeichnis extra für diesen Anwendungsfall zu klären.

Datenformat in der svg

Attribute

• data-stopid

  • Haltestellen-ID. Inhalt: IFOPT (z. B. "de:05914:2007")

• data-lineid

  • Liniennummern. Inhalt: Semikolonseparierte Liste relevanter Liniennummern (z. B. "514" oder "514;543")

• data-only-lineid

  • Inhalt wie data-lineid.
  • Verwendung nur bei Bedarf, um zu unterscheiden, dass dieses Objekt nicht für alle im fachlich übergeordneten Objekt angegebenen Linien gilt.
    Beispielsweise eine aufgeteilte Haltestelle, die auf ihren unterschiedlichen Haltestellen-Rects jeweils die relevanten Liniennummern angegeben hat, damit nicht alle Liniennummern, die beim stoptext angegeben sind, gelten.

Objekte

• Haltestelle

  • Objektarten:
    • Rect, Circle (Haltestellenblobb)
    • Gruppe (Falls Haltestellenblobb in sich Arrows usw. hat - bei Bahnhofsicons dazu noch class=bficon auf der Unter-gruppe und class=bfback auf dem dazugehörigen Hintergrundcircle!)
    • Path (Verbindungslinie)
    • Wichtig: Path gibt es auch als Haltestellenblobb in Gruppe (Stadtmitte)
  • class=stop
  • Datenattribute:
    • data-stopid
    • data-only-lineid (nur bei Bedarf!)

• Haltestellenname

  • Objektart: Text (Haltestellentext - nur exakt 1 pro "echter" ganzer Haltestelle!)
  • class=stoptext
  • Datenattribute:
    • data-stopid
    • data-lineid

• Linienverlauf

  • Objektart: Path, Gruppe (falls unsichtbarer Path nötig ist, bei gestrichelten Linien -- dann werden beide Paths zusammengefasst zur Gruppe, die Class & Attribut bekommt - ist aber teilweise noch nicht so gemacht.)
  • class=route
  • Datenattribute:
    • data-lineid

• Linienverlaufsmarker

  • Objektart: Text, Gruppe (bei Bahnen)
  • class=linetext
  • Datenattribute:
    • data-lineid

• Linienendstellenmarker

  • Objektart: Gruppe (enthält rect und text)
  • class=lineblob
  • Datenattribute:
    • data-lineid
    • data-stopid der jeweiligen Endstelle? -- erstmal unwichtig

• Informationstexte

  • Objektart: Text, Path (Verbindungslinien), Gruppe (Pfeile 530-539/536-538), Rect (z. B. Infoboxen, temporär bis es eine "Störungsinfo"-Klasse inkl. eigenem Popup usw. gibt)
  • class=infotext
  • Datenattribute:
    • data-lineid
    • data-stopid der jeweiligen Haltestelle, falls vorhanden? -- erstmal unwichtig

• Point of Interest (innerhalb der Kartenansicht)

  • Objektart: Gruppe, ...
  • class=poi
  • Datenattribute:
    • data-lineeid
    • weitere später...

• Point of Interest (in der Tabelle) -- Todo. Soll zum POI springen

• Haltestellenreferenz (bspw. in der POI-Tabelle) -- Todo. Soll zur Haltestelle springen

Code, um die originale svg kleiner zu machen:
siehe https://gist.github.com/d3d9/c2c796b44220eaf70eeaf876b2f6e100#file-svg-reduzieren-js.

hst-svg-netzplan's Issues

Noch zu implementierende Validierungen

• stroke bzw. fill der Linienverläufe soll zur angegebenen Liniennummer passen
• Liniennummern in einzelnen data-lineid-Angaben nicht doppelt vorkommend
• Textinhalt von linetext soll zu data-lineid passen
• auf jedes anklickbare Element einen Klick simulieren und eventuelle Fehler finden?
• (manuell?) fehlende (Unter-)Gruppen an Haltestellen mit Linienendpunkten oder Pfeilen
• class=stoptext auf Buffer-Text statt eigentlichem Text gesetzt?
• Untergruppen und Klassen/Typen der Elemente checken -> u. a. Stop mit Gruppe (und exakt 1 Untergruppe mit allen nicht-Hauptobjekten) oder auch keine .stop in .stop usw.

Erweiterungen Linienpopups

Sammlung von Todos bzgl. Linienpopups, mehr oder weniger kurz-/mittelfristig.

Datenformat zu einigen Ideen muss ggf. noch ausgedacht werden, es kann aber auch besser sein, einige der Inhalte auf der Linieninformationsseite auf mehr-fuer-hagen.de darzustellen und nicht unbedingt auch im begrenzten Popupraum.

• Darstellung von Taktschema nach HVZ/NVZ/SVZ?
• Hinweis auf Taktfamilien, Nachtlinien
• Einsatzwagenverläufe, zumindest Haltestellen, hervorheben?
• Abschnitt für Meldungen (von EFA/manuell HST)
  • Meldungen ggf. zwischenspeichern, damit nicht bei jeder Linie eine neue Anfrage gemacht wird
• eine svg anstelle des Textes bei der Verlinkung zur Info-/pdf-Seite einbauen
• “Linienverlauf komplett darstellen"-Knopf -- zoomt auf die BBox der ganzen Linie (hängt von #2 ab)

536/538 und 530/539: Hinweise im Popup

Hinweise sollen im Popup der jeweiligen Einzellinien dargestellt werden. Bei Klick sollen dann jeweils beide Linien zusammen hervorgehoben/geöffnet werden.

Weitere Überlegung: Wenn nur eine hervorgehoben (durch Klick oder durch "alle Linien hervorheben" im Haltestellenpopup) wird, die andere einfach automatisch mit hervorheben? Oder reicht der Hinweis?

Ermittlung von Positionen von svg-Elementen

Da es vor allem in Chromium-basierten Browsern Probleme mit Koordinatenumrechnungen gab, wird aktuell, um das Problem zu umgehen, folgendes gemacht:

• Beim Klicken auf eine Haltestelle wird die Fake-Geokoordinate (anhand des Mouseclicks ermittelbar) in den Daten gespeichert, an dieser Position wird direkt normal das Popup geöffnet.
• Wenn nachher z. B. im Linienpopup der Zurück-Knopf geklickt wird, kann auf diese gespeicherte Koordinate dann zurückgegriffen werden.
• Wenn dies nicht möglich ist, z. B. weil die Haltestelle oder das Linienpopup mit #-link geöffnet wurde, dann wird das Popup ohne Tip und in der Mitte des Bildschirms dargestellt.

Die Ursache liegt eventuell im transform-Attribut am oberen svg-Element. In Firefox machen die Koordinatenumrechnungen keinerlei Probleme.

Dieser Code wurde zuvor verwendet und ist aktuell auskommentiert in js/main.js/stopClicked:

    let point = $("#svg2")[0].createSVGPoint();
    // console.log(stoptext.getBBox());
    point.x = stoptext.getBBox().x + stoptext.getBBox().width / 2;
    point.y = stoptext.getBBox().y + stoptext.getBBox().height / 2;
    // console.log(point);
    let target = point.matrixTransform(stoptext.getCTM());
    // console.log(stoptext.getScreenCTM());
    // console.log(point.matrixTransform(stoptext.getScreenCTM()));
    // console.log(stoptext.getCTM());
    // console.log(target);
    let coords = mymap.layerPointToLatLng(target);
    // console.log(coords);

Wenn das hier beschriebene Problem gelöst werden kann, erschließen sich weitere wichtige Möglichkeiten für Funktionalitäten:

• die oben beschriebene Vorgehensweise muss nicht mehr so angewendet werden
• (#4) Suchfunktion mit anschließendem Pan/Zoom zum gewünschten Element
• (siehe #10) “auf Haltestelle zoomen”-Knopf im Haltestellenpopup
• (siehe #11) “Linienverlauf komplett darstellen” im Linienpopup (zoomt auf die BBox der ganzen Linie)

Erweiterungen Haltestellenpopups

Sammlung von Todos bzgl. Haltestellenpopups, mehr oder weniger kurz-/mittelfristig.

• Tooltips mit absoluter Uhrzeit + Verspätung
• EarlyTermination mit Hinweis (Ausrufezeichen o. ä.) darstellen, unbedingt mit Tooltip
  • neuen realtimeStatus entdeckt: NO_CALL_AT_STOP
• Bahnabfahrten explizit zuschaltbar machen
• Datenabruf als Funktion, die allgemein aufgerufen werden kann (z. b. auch wiederholt nach x sekunden), ggf. mit nichtblockierendem Ladesymbol
  • +Darstellung "Daten geladen vor ... Sekunden"
  • +trotzdem Anpassung der Minutenangaben zur neuen Minute, falls noch keine neuen Daten da sind?
• Darstellung von Icons für [nicht/teilweise] barrierefrei, Verkaufsstellen?
  • P&R-Standorte sind noch einzutragen
  • manche Icons auch zuschaltbar im Plan haben und nicht nur im Popup?
• Die kleinen Linienblobs unten in der Auflistung sollen die Abfahrtsliste filtern und nicht wie jetzt die Linienansicht öffnen?
• Knopf "mehr Abfahrten anschauen" ähnlich wie einen Knopf "Als Start/Ziel in der Fahrplanauskunft verwenden" (+Fahrplanaushangerstellung aus der EFA) und das alles schickt einen erstmal nur zur EFA (Verlinken zum Standard layout 3 statt zur klassischen EFA; mit vorgefüllten Werten, wie genau geht das?)
• Optional auch Anküfte anzeigen (erfordert wahrscheinlich zweite EFA-Abfrage.. ist aber potenziell sinnvoll für Anschlussverbindungen)
• Lookbehind/-ahead einstellbar machen?
• coursesummary aus EFA als Tooltip auch anzeigen
• Abschnitt für Meldungen (von EFA/manuell HST) -> zunächst u. a. mitgesendete EFA-Meldungen verwenden
• geographische Karte der Haltestellenumgebung im Popup
  • Wechsel zwischen Abfahrten und Minimap mit Button
  • ggf. als Overlay dort direkt den geographischen Netzplan einbinden, oder über OSM die Steige besonders hervorgehoben darstellen, oder ÖPNV-Ansicht vom RVR Stadtplanwerk einbinden; auf jeden Fall mehr als eine einfache OSM-Hintergrundkarte haben
  • und/oder aktuell (zunächst?) nur Verlinkung zu Umgebungsplan-PDFs.
• "auf Haltestelle zoomen”-Knopf (hängt von #2 ab)
• (Allgemein) Liniennummer-Sortierfunktion, die die Linien so wie man es will (zuerst SB usw.) sortiert, damit nicht manuell darauf geachtet werden muss (in den Daten) und damit bei automatischen Zusammenstellungen die Reihenfolge beachtet werden kann.

404 bei Link auf Readme

Hey!
Ich habe die in der Readme aufgelisteten Links angesehen. Der zweite Link (https://d3d9.github.io/hst-svg-netzplan/) funktioniert zwar, jedoch tut dies der erste (https://d3d9.xyz/osm/hstsvg/) nicht. Ich würde vorschlagen, diesen Link endweder zu reparieren, oder ihn aus der Readme zu entfernen! :)

Internationalisierung

Internationalisierung vom User Interface und der Karteninhalte?

Ausblendung von Verbindungslinien an Haltestellen

• Lösung finden für die Verbindungslinien bei Haspe/Rummenohl (markieren, dass die entweder immer oder nur im Falle von min. 2 bestimmten hervorgehobenen Haltestellen ebenfalls hervorgehoben werden sollen und sonst nicht (+ auch die Situation vom folgenden Punkt beachten))
• Verbindungslinien beim Ausblenden doch nicht ausblenden wenn alle Haltestellenteile angefahren werden, also soll z. B. wenn sowohl 524 als auch 515 gehighlightet sind, bei Loxbaum die Verbindungslinie nicht ausgeblendet sein.

Verschiedene Kartenansichten

• Wechsel zwischen schematischer und geographischer Karte?
• Wechsel zwischen Tag- und Nacht-Karte?
  • alternative Idee: NE-Netz unsichtbar in den Daten haben (sich an den normalen Linienverläufen orientierend eingezeichnete Linien), damit die NE-Linien nachher bei Bedarf hervorgehoben/angezeigt werden können und keine ganz andere Kartenansicht als die bekannte angezeigt werden muss.

Linientransparenz/-hervorhebung: Farben statt opacity

Aufgrund der opacity entstehen unschöne Darstellungen bei sonst unsichtbaren Überlappungen.

Aktuelle Idee als Alternative: Farbwerte mit 20% opacity vorberechnen und anstelle von Ausblendung mit opacity die fill-Farbe der Linien ändern, in Verbindung mit mix-blend-mode: darken.
Nachher wieder auf die originale Farbe zurücksetzen.
Performance und Verhalten in besonderen Situationen sind zu beachten..

Zusätzliche Überlegung: ist ggf. eine (leichte) Animation der "hervorgehobenen" Linien hilfreich?

Selten auftretender Fehler beim Laden der Seite, anschließend mangelhafte Bedienbarkeit

Ab und zu wird die Seite wie im Screenshot zu sehen geöffnet -- die Mitte des Plans ist am oberen Rand, weit herausgezoomt, und es erscheint eine Fehlermeldung (aber ich glaube nicht immer diese gleiche).
Meistens ist danach der Plan nur mit langsamem oder merkwürdigem Verhalten bedienbar.
Reload löst das Problem fast immer (da es scheinbar zufällig auftritt), es ist ziemlich unklar, wodurch es entsteht.
Zusammenhang zu #-links oder einem einzelnen Browser ist aktuell nicht erkennbar.

Popups minimierbar machen

Suchfunktion

• Haltestellen und Linien suchen, Texteingabe mit Vorschlägen usw.
• bei Klick jeweiliges Popup an sinnvoller Position öffnen und Pan/Zoom auf wichtigen Kartenbereich einleiten (hängt von #2 ab)
• ...

Grundsätzliches zu Popups, Pan/Zoom-Verhalten und Positionierung

Popups sind mittlerweile schon draggable und Funktionalität wie autoPan beim Öffnen ist vorhanden.

Eventuell ist es besser, zuküftig dies anders umzusetzen.
Pan-/Zoomverhalten ist zu diskutieren, aktuell wird es ja mit der Karte mitgeschoben, dies kann anders besser sein.
Weitere Idee: Mit "Ausweichberechnungen" für Anchor-Position und "Richtung" undso eine möglichst wenig verdeckende Platzierung je nach Umgebung/Kontext erreichen.

---

Aktuell wird immer overflow-y: scroll und eine (max-)height benutzt (beim Haltestellenpopup height statt max-height, da es sonst unter Safari crasht..), ggf. kann man das zukünftig dynamisch berechnen/entfernen, ob/wie genau scroll&height notwendig sind.
Ggf. noch bei Mittenberechnung mit getLowerCenter das "padding" dynamisch setzen, anhand der geschätzten/echten Höhe der Popupinhalte

---

Zurück/Linien/Aktualisieren-Buttons im Footer als svg mit Icon statt eines Texts machen?

Neues Popupformat: Störungen

• sowohl von gesetztem Symbol als auch von Meldungen in Haltestellen- bzw. Linien-Popup aus.
• ...