Das HTML5 <input>-Element mit seinen praktischen neuen Typen wie z.B. number, date oder tel erleichtert Frontend-HTML-Entwicklern viel Hebearbeit. Neben einer automatischen Validierung gibt es kleinen Helferlein bei der Eingabe (z.B. einen Kalender oder eine passende Tastatur). Einen Eingabetyp vermisse ich aber immer wieder.
Viele Web-Applikationen benötigen heutzutage die Eingabe eines Ortes – oder genauer gesagt: Von Geo-Koordinaten. Die Suche nach einem Hotel, einer Tankstelle oder einer Bus-Haltestelle in der Nähe eines bestimmten Ortes erfordert meist die händische Eingabe einer Adresse. Der Prozess für die Eingabe eines Ortes ist i.d.R. wie folgt:
- Eingabe des Ortes durch den Nutzer
- Der Ortsbezeichner wird an den Server geschickt, der wiederum über ein Geo-API versucht, die Adresse zu identifizieren und Koordinaten dafür zu ermitteln.
- Im schlimmsten Fall schlägt die Suche fehl, und der Nutzer muss die Adresse nochmals eintippen.
Alternativ oder zusätzlich gibt es ein Javascript-API zur Geo-Lokalisierung, deren Einbindung man als Server-Anbieter aber zuerst programmieren muss.
So oder so hat der Prozess entweder mit einiger Kommunikation zwischen Browser, Server und einer GEO-API zu tun, oder aber mit Javascript-Programmierung. Wäre es nicht schön, wenn HTML direkt ein Eingabefeld für genau diese Aufgabe anbietet?
Wie geht es besser?
In meiner Vorstellung benötigen wir einfach nur einen neuen HTML5-<input>-Typ zur Erfassung und Übermittlung von Geo-Koordinaten. Dieser Typ könnte z.B. coordinates heißen. Beim Anklicken dieses Eingabefelds taucht beim Nutzer im Browser ein Widget für die Auswahl der Koordinaten auf. Das könnte wie folgt funktionieren:
- Das Widget bietet dem Nutzer an, seine aktuelle Position zu übergeben.
- Das Widget zeigt eine Karte an, auf der man einfach einen Marker verschieben könnte, um die Koordinaten auszuwählen.
- Das Widget erlaubt die Eingabe einer beliebigen Adresse und wandelt diese direkt in Koordinaten um. Ggf. kann man die Adresse auch aus dem Adressbuch des Clients auswählen.
Bei den letzten beiden Methoden könnte man auf Karten- und Koordinaten-Daten zugreifen, die von vorhergehenden Operationen zwischengespeichert wurden – damit entfällt die Notwendigkeit, noch eine weitere Schnittstelle zu bemühen.
Der Browser wiederum erhält dann die Koordinaten und übermittelt diese an den Server, so dass er keinerlei Umwandlung mehr durchführen muss.
HTML, bitte sehr
Im HTML könnte dieses Eingabefeld wie folgt aussehen:
<input name="coordinates" type="coordinates" />
<input name="coordinates" type="coordinates" step="0.001" value="53.246, 10.412" />
<input name="coordinates" type="coordinates" min="-90, -180" max="90, 180" />
Die Präzision der Geo-Koordinaten kann man dabei via step-Attribut einstellen (analog zu type=„number“). Mit min- und max-Attribut könnte man sogar den erlaubten Koordinatenraum eingrenzen.
Wie auch immer das kleine Helferlein zur Auswahl der Koordinaten aussieht, es gibt einfach dezimale Breiten- und Längengrad-Angaben im üblichen WGS84-System zurück, separiert mit einem Komma und einem Leerzeichen. Das sieht dann zum Beispiel so aus: 53.246, 10.412.
Das Muster für die Rückgabe könnte man auch mit dem pattern-Attribut beschreiben, so dass auch aktuelle HTML5-Browser schon das korrekte Format erzwingen würden:
<input name="coordinates" type="coordinates" pattern="-?\d{1,2}(?:\.\d+)?, -?1?\d{1,2}(?:\.\d+)?" />
Wie üblich bei neuen <input>-Typen würden alte Browser einfach ein ganz normales Eingabefeld anzeigen. Mit Javascript kann man dann ein Polyfill dafür erstellen, dass für alle unkundigen Browser ein alternatives Eingabe-Widget zur Verfügung stellt – ein Widget, dass man aktuell ohnehin bauen müsste.