Moodle: Karte mit Geographischen Koordinaten (Datenbankvorlage)

Mit geeigneten Kartenmaterial und ein paar Berechnungen können in der Aktivität moodle-Datenbank Karten und Kartenausschnitte dargestellt werden.

Einsatzmöglichkeiten

Die Weltkarte stellt die Übersicht aller Einträge dar. Die Einträge sind verlinkt und führen zum Detaileintrag.

Denkbare Einsatzmöglichkeiten sind:

  • interaktive Infografik, zum Beispiel Bevölkerungsentwicklung je Kontinent
  • Megastädte der Welt
  • Historische Vulkanausbrüche
  • Aktuelle Erdbeben
  • Beispiele für Naturkatastrophen
  • Höchste Gebäude, Berge…

Berechnung der Koordinaten

Für den Einsatz kommen Plattkarten in Betracht. Für die Listenansicht eignet sich neben einer Inline-SVG eine Rastergrafik, wie zum Beispiel die Blue Marple. Diese wird in eine eine SVG eingebunden. Man sollte auf eine geeignete Dateigröße der Rastergrafik achten, also logischerweise nicht die 200-MB-Version einbinden. Hier können die geographischen Koordinaten in das Koordinatensystem der SVG umgerechnet werden. Dazu muss zunächst das Verhältnis der SVG auf das Gradnetz umgerechnet werden.

Bei einer Bildgröße von 800×400 ergibt sich demnach folgende Berechnung für die Koordinaten 48,13 N und 12,1 O:

(-1*48.13+90)*400/180
(12.1+180)*800/360

Das ergibt für die SVG eine x-Koordinate von 306,96 und eine y-Koordinate von 426,88. Die Berechnung kann man mit JavaScript in eine allgemein Formel übertragen:

(-1*N*lat+90)*400/180
(O*lon+180)*800/360

N bezeichnet einen Ort auf der Nordhalkugel und wird mit 1 definiert. S ist dementsprechend als -1 definiert. Dasselbe gilt dann für die Längenkreise. Für die SVG sind die Vorzeichen bei den Breitenkreisen genau anders herum. Daher die Multiplikation mit -1. Für lat wird der Breitengrad und für lon der Längengrad eingesetzt. In der Datenbank legt man also 4 Felder an: N/S, O/W, Breitengrad und Längengrad. Vorzeichen werden damit nicht benötig. Kommastellen müssen allerdings mit einem Punkt angegeben werden. Alternativ könnte man auf die Felder für die Kardinalpunkte verzichten und Vorzeichen eingeben lassen.

Ein Javascript innerhalb der SVG erzeugt dann die Einträge:

<script>
      latnew = (-[[Breite]]*[Breitengrad]]+90)*400/180;
      lonnew = ([[Länge]]*[[Längengrad]]+180)*800/360;
       document.getElementById("demo[[Breitengrad]][[Längengrad]][[Breite]][[Länge]]").innerHTML = "<circle cx='" + lonnew + "' cy='" + latnew + "' r='5' fill='yellow'/>";
</script>

Die eckigen Klammern sind alles Datenbankeinträge. Um eindeutig Datenbankeinträge zu erhalten, wird eine Id in der Form Breitengrad-Längengrad-BreiteLänge erzeugt. Damit dürften sich nur absolut identische Einträge in die Quere kommen. Probleme machen auch nahe beieinander gelegene Punkte, da die Grafik nicht zoombar ist. Eine Lösung wäre es, eine SVG-Karte zu verwenden und diese per JS zoombar zu machen.

Man könnte die Größe der Punkte dynamisch über ein Feld in der Datenbank regeln und so beispielweise die Magnitude von Erdbeben visualisieren. Zum Beispiel mit r='[[Magnitude]]’. Auch Text könnte man zu den Punkten hinzufügen.

Kartenausschnitt

Für den Kartenausschnitt wird in JavaScript eine dynamische ViewBox erzeugt und zunächst von 800×400 auf 150×100 geändert.

shape.setAttribute("viewBox", lonnew2 + " " + latnew2 + " " + " 150 100");

Die Ausgangskoordinaten x und y werden dabei verschoben (lonnew und latnew), damit der Ort mittig angezeigt wird.

Ausprobieren

Beta-Version: https://fdagner.notion.site/Geokarte-Beta-136369e90d2646bc917e7fe9a3de6112