[Gelöst]Horizontaler Kompass + Kurswinkel Berechnung aus zwei GPS Koordinaten

  • Guten Tag zusammen,


    bin hier noch Nagelneu, buchstäblich mein erster Post.

    Da ich gerade nichts zu tun habe (ruhiger Tag auf der Arbeit) mache ich ein wenig Brainstorming zu meinem kleinen Projekt und komm hier gedanklich nicht vorran.

    Es geht um eine kleine Webapp, mit der man mittels der Google Maps API Wegpunkte setzen kann und diese werden in einer Datebank abgespeichert, um sie nachher auf einem Kompass darzustellen.

    Ich habe gestern mittels dieser Vorlage einen groben Prototypen erstellt, der Koordinaten miteinender vergleicht, wobei einer der Ausgangspunkt ist und dazu in Relation die Richtung zum anderen auf dem Kompass anzeigt. Klar soweit?

    Das funktioniert prinzipiell ganz gut und ich bin von der technischen Seite zufrieden, nur die Darstellung ist nicht so das wahre. Mir wäre dafür ein Horizontaler Kompass lieber, da man auch Namen der Wegpunkte besser darstellen könnte.

    Meine Idee war zunächst einen Container zu schaffen mit all meinen Infos und ein hübsches Kompassbild im Hintergrund. Mit style.transform und der Option Translate, hätte ich das dann verschoben.

    Ich müsste dann eine 1:1 Kopie neben den Container setzen, damit man, wenn man am Rand, ist kein leeres Bild hat. Jedoch vermute ich das der Sprung von 359° auf 0° etwas jumpy wirkt.

    Viel einfacher aber nicht so hübsch animiert war meine Idee 90 Textfelder fest darzustellen und diese anhand der Orientierung zu beschriften.

    Nicht sehr hübsch aber simpel. Damit wäre auch der Sprung von 359° auf 0° nicht bemerkbar.


    Ich habe dann noch lange im Internet gegrast aber nichts gefunden. Da hier aber sicher einige Profis unterwegs sind, könnt ihr mir Amateur bestimmt ein paar Ideen oder Anregungen geben.

    Ich brauche nicht explizit Code, das kriege ich hin. Ich suche da eher Ansätze wie man die Darstellung noch angehen könnte.


    Ich kann das Ganze erst zuhause testen. Hab vergessen meine Entwicklungsumgebung laufen zu lassen. Vieleicht passt meine Containeridee sogar schon gut, wer weiss?

    Ich freue mich jedenfalls über jeden Tipp.


    P.S. Ich benutze Node.js als Webserver.

  • Wenn ich dich richtig verstehe willst du um den Kompass herum 40 Punkte haben die du dann irgendwie beschriftest? Wenn ich das alles richtig verstehe würde ich das wie eine Uhr machen die um den Kompass drum herum legen die sich dann mit den Kompass dreht Bzw auch nicht dreht jenachdem wie das alles funktioniert.

    Mit so einer Uhr mit 40 Punkten https://codepen.io/basti1012/pen/oMxNPw?editors=1000 ( Keine fertige Lösung )

    zusammen mit den Kompass könnte man ja auch was machen. Mein Uhr ist etwas blöd geworden weil verstehe das noch nicht ganz mit den Kreiß berechnen,aber es soll ja nur zeigen wie ich das ungefähr meine.

    Wie ich das so lese bei dir wirst du das schon besser hinbekommen

  • Einen klassischen runden Kompass habe ich schon. Das Zeichnen der Punkte ist etwas holprig, aber funktioniert.

    Ich möchte einen horizontalen Kompass also wie der Quest-Kompass in Videospielen haben auf dem ich meine Wegpunkte darstelle.

  • pasted-from-clipboard.png


    Sieht doch sexy aus (also rein technisch...)

    Jetzt muss ich mir noch überlegen wie ich Gradstriche unterbekomme und dann kommt der fiese Teil.

    Ich habe mich etwas in Berechnung von Kurswinkeln eingelesen....komplizierter als Gedacht....um genau zu sein will ich grade weglaufen :D


    Weiss jemand obs ne fertige API gibt wo ich zwei Koordinaten reinhaue und Dinge wie Heading usw raus bekomme?

    Bevor ich mir nu aufwendig eine eigene baue :D