Mit der neuen Version 2 haben wir AT Maps einen neuen Motor verpasst. Dieser macht AT Maps nicht nur deutlich schneller, sondern auch flexibler. Um genauer zu verstehen, was sich geändert hat, hilft ein Blick unter die Karosserie bzw. hinter die Fassade.
Wie funktioniert AT Maps?
Wie viele Webanwendungen besteht AT Maps aus einem serverseitigen Backend und einem client- bzw. browserseitigem Frontend, die über Webservices miteinander kommunizieren. Das Backend kommuniziert dabei mit der Datenbank, ruft aus dieser Immobiliendaten, die zu den Filtereinstellungen des Kunden passen ab, und sendet diese dann an das Frontend. Das Frontend generiert die Kartenansicht und stellt die aus den Backend abgerufenen Karten als sogenannte Marker (bzw. Pins) dar.
Wo war der Haken?
Für die Erzeugung der Kartenansicht und die Positionierung der Pins setzte Version 1 von AT Maps noch auf das JavaScript Framework Leaflet. Dieses hat den Vorteil, dass es sehr einsteigerfreundlich ist und den Entwicklern viel Arbeit abnimmt: Funktionen für die Platzierung von Markern, Zusammenfassung von Markern zu Clustern und die Anzeige von Popups sowie Interaktionen mit diesen Elementen sind bereits im Framework enthalten und müssen nicht selbst programmiert werden.
Das Manko daran: Leaflet generiert jeden Marker als eigenes DOM-Element – also als Element mit eigenem HTML-Code innerhalb der Webseite. Bei einer großen Anzahl von Markern entstehen dadurch mehrere tausend DOM-Elemente, was dazu führt, dass das Rendern („Darstellen“) der Seite durch den Browser sehr lange dauert und der Browser in dieser Zeit auch nicht auf Benutzerinteraktionen reagiert.
Was haben wir geändert?
Serverseitig konnten wir unsere Datenbankabfragen so optimieren, dass die Ladegeschwindigkeit verdreifacht wird – vergleichsweise wenig Aufwand mit großer Wirkung. Um die Lade- bzw. Renderzeit im Frontend zu verbessern war ein größerer Umbau, nämlich ein „Motortausch“ notwendig: Für die Kartendarstellung ersetzten wir Leaflet durch das OpenLayers-Framework. OpenLayers vertauscht die Vor- und Nachteile von Leaflet. Es benötigt mehr Einarbeitungszeit und viele von Leaflet schon vorgegebene Funktionen müssen selbst programmiert werden, beispielsweise das korrekte Verhalten beim Öffnen und schließen von Popups, die zu Markern in einem Cluster gehören. Bei der Implementierung dieser Funktionalitäten konnten wir AT Maps andererseits aber auch deutlich flexibler machen: So ist es nun möglich die Icons und Farben der Marker kundenspezifisch zu definieren. Dadurch heben wir das markante Rot der Deutschen Bahn, das Dunkelblau der LEG und alle Farben zukünftiger Kunden besser hervor – sogar in partypink!
Der größte Vorteil von OpenLayers ist aber ein im Vergleich zu Leaflet anderer Ansatz bei der Platzierung der Marker auf der Karte: Anstatt für jeden Marker ein DOM-Element zu erzeugen, werden diese auf einen Canvas, eine „Zeichenfläche“, die über der eigentlichen Karte liegt, gezeichnet. Dadurch konnten wir die Rendergeschwindigkeit der Karte verfünffachen!
Wie geht es weiter?
Seit dem ersten Go-Live von AT Maps haben wir laufend weitere Funktionalitäten umgesetzt, wie z.B. die Erfassung von Aufruf-Statistiken, die manuelle Eingabe von Anzeigen über das Kundencenter oder einer Schnittstelle zu ImmoScout zum automatischen Abruf dort eingestellter Anzeigen. Für die aktuelle Version 2 haben wir uns intensiv mit der Verbesserung der User Experience beschäftigt – und auf das Ergebnis sind wir sehr stolz. Als nächstes konzentrieren wir auf die Anzeige von Informationen zum Wohnumfeld. Wie das aussehen wird? Wartet’s ab!
