knuspermagier.de
Der privateste Blog von Philipp.

Eine süße animierte Karte in drei einfachen Schritten

Dem ein oder anderen, der einen Blick in die Island-Galerien geworfen hat, wird vielleicht die Karte aufgefallen sein, die dort eingebaut ist.

Bereits während des Urlaubs dachte ich, dass ich in die kommenden Galerien eine neue Spielerei einbauen will. Nach reichlicher Überlegung (fünf Minuten) fiel die Wahl auf eine animierte Karte, die zeigt, wo wir uns an den verschiedenen Tagen aufgehalten haben.

Dank meiner Daten aus Moves und der Karte, die Hannah bereits vor dem Urlaub angefertigt hatte, war das ja kein Problem.

VagVBc7uk0oTlTtqW.png

Also, Schritt 1: Die Karte als SVG erstellen, die Route eintragen, die Pins reinwerfen und sich ein bisschen über Adobe Illustrator aufregen.

Danach recherchiert man dann ein bisschen, wie man das eigentlich macht. Ich für meinen Teil fragte einfach Daniel, denn ich erinnerte mich, dass er sowas schonmal machte.

Eigentlich ist es ganz einfach. SVG-Pfade haben die Methoden getTotalLength() und getPositionAtLength(), mit denen man einerseits die gesamte Länge (ha! Wer hätte das gedacht) und andererseits die Koordinaten an jeder Stelle des Pfades bekommen kann.

Damit ist es dann schonmal kein Problem mehr ein Auto an dem Pfad “entlangfahren” zu lassen. Den Pfad nur teilweise zu zeichnen geht auch, mit etwas CSS-Gefrickel, welches ich natürlich bei css-tricks.com fand.

Schritt 2: Daniel fragen, wie man sowas macht, etwas googeln und einen Prototyp bauen.

Sehr zufrieden schaute ich mir ein paar Stunden später das Produkt meiner Arbeit an. Das Auto fuhr schön auf der Karte herum, die PINs ploppten auf und zeigten beim Hovern einen Tooltip an.

Nun wollte ich die Karte in meine Live-Galerie integrieren und schaute es nochmal zur Sicherheit in verschiedenen Browsern an. So als Profi-Webentwickler macht man das ja.

Safari - fast keine Probleme.

Internet Explorer - Egal.

Firefox. Arghl. Nichts funktioniert.

Nach etwas Recherche konnte ich dann feststellen, dass der Firefox wohl bei .getTotalLength() ein Problem hat (zumindest bei meiner SVG) — auch die tolle SnapSVG-Library funktionierte dafür nicht. Einbinden musste ich sie trotzdem, denn auch der Rest war im Firefox nicht so richtig funktional. Die Länge kodierte ich dann einfach hart.

Außerdem unterstützt der Firefox anscheinend keine CSS-Transforms für SVG-Elemente. Nachdem sich die Aufregung gelegt hatte, band ich dann noch GSAP ein, eine schöne JS-Animation-Library. Weitere 100kb.

Wegen dem Firefox musste ich also Libraries im Wert von 150kb einbinden. Tolle Sache. Zum Glück ist das Gesamtkonstrukt (Libraries + Karte + Kleinkram) immer noch wesentlich kleiner als jedes einzelne Bild in der Galerie, von daher ist das wohl egal.

Schritt 3: Den Firefox hassen, alles neu machen und releasen.

In drei einfachen Schritten zum animierten Glück! So einfach ist das. Webentwicklung macht Spaß, bis man seinen Chrome verlassen muss.

(Danke an Hannah für die Karte und das Auto, Daniel für den Stups in die richtige Richtung und an den Chrome, weil er einfach funktioniert)

(Den vollständigen Source-Code findet ihr, wenn ihr auf die Island-Galerie geht, View source in eurem Browser klickt und nach der karte.js sucht. Er ist zu hässlich, als das ich ihn hier präsentieren wollen würde)

Kommentare, Feedback und andere Anmerkungen?
Schreib mir eine E-Mail 🤓