Interaktive Karte mit SVG

[Machacker]

Hallo Zusammen,
Ich weiss nicht, ob ich das jetzt hier im richtigen Bereich poste aber ich hoffe mir kann trotzdem jemand weiterhelfen.
Ich habe im Internet eine svg-Datei von einer Weltkarte gefunden, welche man sich herunterladen und selber weiterverwenden kann.

Die Karte hat für jedes Land ein Pfad (für Inselländer eine Pfadgruppe). Was ich nun möchte ist eine Weltkarte zu erstellen, bei welcher man auf ein Land klicken kann, um dann auf ein Beitrag zu jedem Land kommt. (Einen Farbeffekt beim Hover eines Landes wäre auch nice)
Ich habe das schon mal im Forum angesprochen, damals hatte ich es jedoch mit einer imagemap gelöst, was mir jetzt zu wenig professionell ist, da ich will, dass die Karte sich dem Bildschirm anpasst.

Glaubt ihr ist so etwas möglich? Ich habe das ganze versucht mit Hilfe von Adobe Edge Animate CC zu lösen, kam jedoch auf gar keinen Lösungsansatz (falls jemand weiss wie man das mit Edge Animate löst wäre das sehr erfreulich)

Vielen Dank schon jetzt für eure Antworten,
Till

P.S. Ich habe mal gehört, dass man in einer svg-Datei nur 1 ebene sehen darf. Bei meiner Datei sind alle Pfade zusätzlich in einer Gruppe, reicht das oder muss ich jedes Land einzeln als Datei speichern? Ich glaube das würde nämlich zu viel Speicherplatz wegnehmen

 

[Tronjer]

Bei meiner Datei sind alle Pfade zusätzlich in einer Gruppe, reicht das oder muss ich jedes Land einzeln als Datei speichern? Ich glaube das würde nämlich zu viel Speicherplatz wegnehmen

Du bist da gedanklich auf dem falschen Weg. Die Karte existiert doch bereits. Wozu noch mal zeichnen?

Stelle dir die einzelnen Länder nicht als Grafiken sondern als Objekte vor, die aus Koordinaten bestehen und auf Events wie Hover und Click reagieren sollen, in dem sie eine andere Farbe annehmen oder Text einblenden. Das ist eine JavaScript-Aufgabe und hat nichts mit der Erstellung von Bildern zu tun.

 

[Machacker]

Das meine ich auch nicht. Ich weiss einfach nicht, wie ich das umsetzen soll. Ich weiss, wie ich die svg-Datei einbinde, aber ich habe nicht herausgefunden, wie ich die einzelnen "Objekte" mit einem Link und dem Hover versehen kann.

 

[Tronjer]

Hatte ich doch bereits erwähnt: per JavaScript. Google mal nach 'svg clickable map' und du wirst entsprechende Beispiele finden.

Allerdings wirst du es kaum umsetzen können, ohne dich zuvor mit JavaScript beschäftigt zu haben.

 

[Machacker]

Ich habe DAS hier gefunden, und habe mich auch stark mit dem Thema JavaScript auseinandergesetzt. Doch das Problem: Ich finde nicht heraus, wie ich die einzelnen Länder verlinken kann. Falls du eine Antwort hast wäre ich dir sehr dankbar, wenn du sie hier posten würdest :)

 

[Tronjer]

Es gibt hier keine HTML-Links, sondern JavaScript-Funktionen, bei denen die Länderkoordinaten als Parameter übergeben werden.

Ich müsste mich da selber hinein vertiefen, aber vielleicht hilft dir ja das weiter.
http://www.jquery4u.com/plugins/10-jquery-global-map-plugins/
Zumindest würde ich hier anfangen zu suchen.

Nebenbei bemerkt: Es wäre vielleicht besser, du würdest dir für den Einstieg ein einfacheres Projekt vornehmen.

 

[Sempervivum]

Das onclick für die einzelnen Staaten findest Du hier:

st[0].onclick = function () {
    alert(state);
    };

Das alert() kannst Du durch eine Zuweisung auf window.location.href ersetzen, dann wird der Besucher auf die betr. Seite weitergeleitet. Allerdings müsstest Du die Städte entfernen, weil deren onclick das auf die Länder überlagert.

 

[Machacker]

und wie kann ich das machen, dass jedes Land einen individuellen Link kriegt? Weil das bezieht sich doch auf alle Staaten, oder irre ich mich da?

 

[Sempervivum]

Du siehst doch in dem Alert, dass dort die Länderkennung ausgegeben wird. Diese kannst Du als Name der HTML-Datei verwenden:

window.location.href = state + ".htlm";

 

[Machacker]

Ach so. Vielen Dank. Ich habe wohl einen Denkfehler gemacht. Vielen Dank das ganze funktioniert nun perfekt :)