Responsive SVG Maps mit Popup
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
