Giter VIP home page Giter VIP logo

hst-svg-netzplan's Introduction

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 People

Contributors

d3d9 avatar metrophil avatar marksauerland avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.