SVG als interaktive Karte

[kosovafan]

Hallo,

ich habe ein SVG File als Weltkarte, bestimmte Bereiche sind eingefärbt und jetzt stelle ich mir die Frage ob es eine einfache Möglichkeit gibt bei ein
hover einfach die Stadt einzublenden und bei einen klick auf die Detailseite zu gelingen.




Bei einen hover soll zum Beispiel Limburg, Deutschland erscheinen und bei einen Klick nach /network/germany weitergeleitet werden.

Hat hier jemand eine Idee wie man das einfach realisieren könnte?

Mfg & Danke
Silvio

 

[Sempervivum]

Im Prinzip kein Problem, ich habe vor einiger Zeit mal etwas ähnliches gemacht:
https://webentwicklung.ulrichbangert.de/weltkarte-hunde.htmlSpäter haben wir die Icons dann zu solchen Tropfen weiter entwickelt, wie man sie von Google Maps kennt. Kein Problem, auch ein Mouseover über diese Icons zu legen.
Bei deiner Karte sehe ich aber ein praktisches Problem: Deutschland ist auf deiner Karte sehr klein. Kaum möglich, dort mehrere Städte unterzubringen?

 

[basti1012]

Hier noch Link dazu falls du ihn selber noch nicht gefunden hast.
https://wiki.selfhtml.org/wiki/SVG/Tutorials/interaktive_Landkarten

 

[Technipion]

Bei deiner Karte sehe ich aber ein praktisches Problem: Deutschland ist auf deiner Karte sehr klein. Kaum möglich, dort mehrere Städte unterzubringen?

Jopp, daher würde es sich anbieten das ganze mehrstufig zu machen: Ein Klick auf ein Land bringt einen zunächst zu einer vergrößerten Ansicht von genau diesem Land. Dort kann man dann auf die Städte klicken

 

[kosovafan]

Mahlzeit,

Im Prinzip kein Problem, ich habe vor einiger Zeit mal etwas ähnliches gemacht:
https://webentwicklung.ulrichbangert.de/weltkarte-hunde.htmlSpäter haben wir die Icons dann zu solchen Tropfen weiter entwickelt, wie man sie von Google Maps kennt. Kein Problem, auch ein Mouseover über diese Icons zu legen.
Bei deiner Karte sehe ich aber ein praktisches Problem: Deutschland ist auf deiner Karte sehr klein. Kaum möglich, dort mehrere Städte unterzubringen?

ich habe das als SVG eingebunden, ich habe das auch entsprechend mit CSS eingefärbt, Hover klappt auch, jetzt braucht es nur noch den Text und das Click Event.

Muss ja keine Stadt sein, reicht ein Deutschland Hover, dann nur die Infobox Limburg und beim Klick auf die entsprechende Seite.

Mfg & Danke

 

[kosovafan]

Mahlzeit,

Hier noch Link dazu falls du ihn selber noch nicht gefunden hast.
https://wiki.selfhtml.org/wiki/SVG/Tutorials/interaktive_Landkarten

Die Seite war der erste Anlauf. Ich hatte davon auch Fill und Hover, mit den Text und Link zu Unterseiten verstehe ich noch nicht ganz.

Was dort steht also <defs> und <g> muss das mit in den svg tags geschrieben werden?

Mfg & Danke