zum Hauptinhalt springen.
UX/UI Design, Entwicklung & TYPO3 in Karlsruhe Karlsruhe | seit 2006

Responsive SVG Maps mit Popup

09.11.2019, geschätzte Lesedauer: Minute(n). #svg #javascript

Demonstration einer Responsive SVG Weltkarte mit anklickbaren Informationen in einer Modalbox.

Scalable Vector Graphics (SVG) sind Vektorgrafiken, die auf dem Dateiformat XML basieren und nativ vom Browsern gelesen werden können. Ein Vorteil liegt in der verlustfreien Skalierbarkeit der Grafiken. Darüber hinaus eignen sich SVG hervorragend für Animationen beispielsweise mit CSS und für Manipulationen durch JavaScript.

Um die Demo aufzubauen, habe ich mir hier eine frei zugängliche Weltkarte geladen und zunächst jedes Land seinem Kontinent zugeordnet und mit CSS eingefärbt - inklusive Hover-Effekt. Danach wurden die "Location"-Icons platziert. Durch Klickevents der jeweiligen Kontinenten-ID öffnet das JavaScript die entsprechende Modalbox und zeigt die Informationen an.

Die Demo ist in einem Kundenprojekt als Alternativ-Vorschlag zu einer Google Karte entstanden. Der Kunde hat sich für eine Google Karte entschieden - so wurde diese Demo nicht weiter ausgestaltet und optimiert.

 

Hier gehts zur Demo:
https://codepen.io/onza/pen/LYNPbqP

Skyline Karlsruhe