Karten-Navigation

[Schnippel]

Hallo,

für eine Website suche ich eine Möglichkeit, wie man eine Karte mit verschiedenen Landkreisen so darstellen kann, das die einzelnen Landkreise gleich der Link sind, mit Hover-Effekt, also eine Karten-Navigation.

Hier ein Beispiel:
https://schulamt.thueringen.de/sued/schulamt

Unbenannt-1.jpg

Hat jemand eine Idee, wie sich sowas umsetzen lässt?

[planepix]

Stichwort Imagemap.

Danach mal suchen. Gibt Websites die so etwas generieren.

[lucina]

Imagemap ist doch ein eher älteres Konzept. Ich würde vorschlagen:

• SVG-Grafik aus Geodaten, die man gerne mal bei der Landesverwaltung bekommt
• einzelne Objekte dann im SVG verlinken
• dabei dann auch per CSS die Hovereffekte einbauen

Your mileage may vary. SVG hat den unschlagbaren Vorteil, sich nicht mit irgendwelchen responsiven Skalierungen herumschlagen zu müssen.

[mlweb]

Karte selbst zeichnen und als svg speichern ist auch kein allzu großer Aufwand.

[zoglo]

Schon mehrfach sowas gebaut, auch mit Hover, Tooltips, Verlinkung, Readerseite und co -> https://jvm-docs.vercel.app/docs/introduction

Kannst du dir in einen JS Wrapper initialisieren wenn notwendig und auch mit RSCE oder als Modul - Wie auch immer <3

[zoglo]

Hier auch eine SVG von Karten aus Deutschland (mit PLZ)
https://www.suche-postleitzahl.org/plz-karte-erstellen

Und hiermit (das ist zwar für jvectormap.. musst du dir dann die Ausgabe einmal anpassen), kannst du es für JsVectorMap konvertieren mit ID und Attributen:
https://ruibarreira.github.io/jvectormap-svg-converter/

[Schnippel]

Karte selbst zeichnen und als svg speichern ist auch kein allzu großer Aufwand.

Muß ich da jeden einzelnen Landkreis als eigne SVG-Datei speichern?
Wie bastel ich die dann zusammen, per CSS-positionierungen?

Hier nochmal der Link zu einer interaktiven Karte:
https://schulamt.thueringen.de/sued/schulamt

Bei Klick auf einen Landkreis soll auf eine entsprechende Contao-Seite zum jeweiligen Landkreis verlinkt werden.

[zoglo]

Siehe meine Tipps und Nachrichten.
Nimm die JS Bibliothek, kreiere dir EINE SVG mit paths und IDs, dann machst du den Rest <3.

Oder old school mit positioning, dann kannst du sicher auch PNG nutzen.
Wie du es lösen könntest, wurde bereits erwähnt.

Jetzt musst DU die Werkzeuge nutzen oder jemanden beauftragen, der es für dich macht.

[Schnippel]

@zoglo Danke für deine Infos


Ist meine Herangehensweise so richtig?

1. ich mache mir in Photoshop ein PNG vom jeweiligen Landkreis (bei 10 Landkreisen wären das 10 png`s)
2. wandle dieses PNG in ein SVG um ( über https://convertio.co/de/ )
3. nehme den SVG-Code und kopiere diesen in https://ruibarreira.github.io/jvectormap-svg-converter/ rein

SVG-Code:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="143.000000pt" height="110.000000pt" viewBox="0 0 143.000000 110.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,110.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M528 1031 c-8 -11 -26 -23 -40 -26 -14 -4 -51 -29 -82 -57 -56 -50
-57 -51 -50 -94 3 -24 4 -54 1 -66 -8 -31 -61 -62 -116 -68 -43 -5 -44 -6 -61
-58 -10 -29 -20 -77 -24 -108 -6 -57 -24 -100 -57 -143 -12 -15 -19 -40 -19
-68 0 -31 -7 -55 -22 -76 -50 -69 -58 -101 -38 -151 6 -16 17 -26 30 -26 11 0
20 -4 20 -10 0 -28 34 -2 85 66 46 61 61 75 77 70 22 -5 78 44 78 69 0 20 33
23 47 5 10 -13 14 -12 34 9 19 21 28 23 73 17 56 -6 79 -26 70 -62 -5 -18 5
-34 44 -73 45 -46 55 -51 94 -51 27 1 51 8 66 19 20 18 22 27 22 128 0 102 2
111 23 131 20 19 35 22 103 22 67 0 82 -3 97 -20 15 -17 29 -20 112 -20 69 0
102 4 119 15 32 21 70 6 84 -34 13 -36 22 -38 46 -12 17 18 16 20 -23 51 -21
18 -42 42 -45 54 -6 26 9 87 24 96 5 3 13 20 16 37 6 28 1 37 -42 77 -43 41
-53 46 -94 46 -40 0 -51 5 -84 39 -44 45 -43 66 8 111 l31 29 -29 30 c-30 31
-56 40 -56 20 0 -6 -14 -29 -31 -50 -28 -35 -35 -39 -77 -39 -36 0 -50 -5 -59
-19 -7 -11 -27 -22 -44 -26 -26 -6 -36 -3 -49 13 -10 11 -32 25 -51 29 -30 8
-35 14 -40 51 -6 49 -34 74 -89 82 -26 4 -36 11 -40 29 -7 32 -25 37 -42 12z"/>
</g>
</svg>

4. Wandel dann das SVG in https://ruibarreira.github.io/jvectormap-svg-converter/ entsprechen um und erhalten dann das hier:

jQuery.fn.vectorMap('addMap', 'landkreis', {"width":143,"height":110,"paths":{"id1":{"name":"landkreis","path":"M52.80 6.90c-0.80 1.10 -2.60 2.30 -4.00 2.60 -1.40 0.40 -5.10 2.90 -8.20 5.70 -5.60 5.00 -5.70 5.10 -5.00 9.40 0.30 2.40 0.40 5.40 0.10 6.60 -0.80 3.10 -6.10 6.20 -11.60 6.80 -4.30 0.50 -4.40 0.60 -6.10 5.80 -1.00 2.90 -2.00 7.70 -2.40 10.80 -0.60 5.70 -2.40 10.00 -5.70 14.30 -1.20 1.50 -1.90 4.00 -1.90 6.80 0.00 3.10 -0.70 5.50 -2.20 7.60 -5.00 6.90 -5.80 10.10 -3.80 15.10 0.60 1.60 1.70 2.60 3.00 2.60 1.10 0.00 2.00 0.40 2.00 1.00 0.00 2.80 3.40 0.20 8.50 -6.60 4.60 -6.10 6.10 -7.50 7.70 -7.00 2.20 0.50 7.80 -4.40 7.80 -6.90 0.00 -2.00 3.30 -2.30 4.70 -0.50 1.00 1.30 1.40 1.20 3.40 -0.90 1.90 -2.10 2.80 -2.30 7.30 -1.70 5.60 0.60 7.90 2.60 7.00 6.20 -0.50 1.80 0.50 3.40 4.40 7.30 4.50 4.60 5.50 5.10 9.40 5.10 2.70 -0.10 5.10 -0.80 6.60 -1.90 2.00 -1.80 2.20 -2.70 2.20 -12.80 0.00 -10.20 0.20 -11.10 2.30 -13.10 2.00 -1.90 3.50 -2.20 10.30 -2.20 6.70 0.00 8.20 0.30 9.70 2.00 1.50 1.70 2.90 2.00 11.20 2.00 6.90 0.00 10.20 -0.40 11.90 -1.50 3.20 -2.10 7.00 -0.60 8.40 3.40 1.30 3.60 2.20 3.80 4.60 1.20 1.70 -1.80 1.60 -2.00 -2.30 -5.10 -2.10 -1.80 -4.20 -4.20 -4.50 -5.40 -0.60 -2.60 0.90 -8.70 2.40 -9.60 0.50 -0.30 1.30 -2.00 1.60 -3.70 0.60 -2.80 0.10 -3.70 -4.20 -7.70 -4.30 -4.10 -5.30 -4.60 -9.40 -4.60 -4.00 0.00 -5.10 -0.50 -8.40 -3.90 -4.40 -4.50 -4.30 -6.60 0.80 -11.10l3.10 -2.90 -2.90 -3.00c-3.00 -3.10 -5.60 -4.00 -5.60 -2.00 0.00 0.60 -1.40 2.90 -3.10 5.00 -2.80 3.50 -3.50 3.90 -7.70 3.90 -3.60 0.00 -5.00 0.50 -5.90 1.90 -0.70 1.10 -2.70 2.20 -4.40 2.60 -2.60 0.60 -3.60 0.30 -4.90 -1.30 -1.00 -1.10 -3.20 -2.50 -5.10 -2.90 -3.00 -0.80 -3.50 -1.40 -4.00 -5.10 -0.60 -4.90 -3.40 -7.40 -8.90 -8.20 -2.60 -0.40 -3.60 -1.10 -4.00 -2.90 -0.70 -3.20 -2.50 -3.70 -4.20 -1.20z"}}});

Ist diese Herangehensweise so richtig?

Wenn ja, wie binde ich das Ganze dann in Contao ein, und wie füge ich die einzelnen Landkreise so zusammen, daß sie eine Karte ergeben und als Link funktionieren?

[zoglo]

Wie du es einbindest? Du erstellst dir ein Element mit den Bildern und bindest das JS im Layout ein?

Du nutzt nur "EINE" Svg - mit IDs und passt es dir entsprechend an. Hast du die Links in meinem Beitrag geöffnet? (Oben gibt es etwas mit "ID").

Du kannst nicht einfach eine PNG konvertieren und hoffen, dass Convertico es richtig macht (Ich weiß nicht ob das überhaupt funktioniert, vielleicht schon)

Zum Thema vectorMap gibt es genug Tutorials im Internet.

[zoglo]

Siehe Doku:
https://jvm-docs.vercel.app/docs/regions

(Der Converter ist sehr alt, der spuckt noch jquery aus, du musst hier wohl Hand anlegen und es anpassen)

[mlweb]

Muß ich da jeden einzelnen Landkreis als eigne SVG-Datei speichern?
Wie bastel ich die dann zusammen, per CSS-positionierungen?

Hier nochmal der Link zu einer interaktiven Karte:
https://schulamt.thueringen.de/sued/schulamt

Bei Klick auf einen Landkreis soll auf eine entsprechende Contao-Seite zum jeweiligen Landkreis verlinkt werden.

Du zeichnest die Datei im Vektor-Programm Deiner Wahl selbst (eine Datei) und verlinkst einzelne Bereiche im SVG und wie schon @lucina schrieb Hovereffekte dann über CSS gestalten.
Mehr kann ich dazu eigentlich nicht sagen.

[Schnippel]

Hallo, ich nochmal. Vielen Dank für eure vielen Infos und Hinweise..

Ich würde wie folgt vorgehen:

Datei über diese Seite https://de.m.wikipedia.org/wiki/Date...Thueringen.svg herunterladen.


Wie kann ich einen Landkreis als Hyperlink aktivieren?

Unbenannt-1.jpg

Muß da das <g> Tag angesprochen werden?

Wenn ja, mach ich das ganz normal so hier <a href...><g>....</g><a/> ?

[lucina]

Im Prinzip: Ein <a href="foo"> um das zu verlinkende Objekt herum packen.

https://wiki.selfhtml.org/wiki/SVG/E...nzieren_in_SVG

[zoglo]

Und wenn du die Doku gelesen hättest, hättest du gesehen, dass du mit jsVectorMap auch ein onRegionClick Event hast, mit welchem du eine Methode aufrufen kannst, sei es das Öffnen eines Browserfensters.
https://jvm-docs.vercel.app/docs/events

new jsVectorMap({
    selector: '.deinSelektor',
    map: 'deineKarte,
    ....
    onRegionClick(e, code) {
        e.preventDefault()
        deineCallBackZurAusführungDerLogikBeiKlickEinerKarte()
    }
    ...
},

Wenn dir JavaScript zu viel ist, dann suche dir ein Tutorial raus oder beauftrage gegen Gebühr eine Person / eine Agentur / ein Unternehmen deines Vertrauens, dies für dich umzusetzen.

[Schnippel]

Hi,
habt vielen Dank für all eure Hinweise und Lösungs-Varianten.

Ich glaube, daß ich jetzt einen Weg gefunden habe, wie ich so eine Karten-Navigation umsetzen kann.

Auf dieser Seite hier https://de.m.wikipedia.org/wiki/Date...Thueringen.svg
habe ich mir die SVG-Datei runtergeladen und den darin enthaltenen Code und in ein Contao-Inhaltselement "ungefiltertes HTML" eingefügt.

Für den Landkreis Nordhausen habe ich einen Hyperlink mal zu Google gesetzt,

<a xlink:href="https://www.google.de">.......</a>

und zwar so hier:

<g   id="Kreise">
	<a xlink:href="https://www.google.de"><g   id="g8">
				<polygon
   points="258.8999,83.87842 258.88428,82.33545 255.81592,81.95361 256.19678,78.11377 257.35107,73.88818 255.04834,71.58545 256.9624,63.52588 251.97217,57.76416 248.8999,56.61279 250.0542,54.69385 247.3667,49.70068 248.13428,43.94092 250.82178,43.55811 246.2124,40.10107 238.91943,36.64526 235.4585,27.04663 244.6792,13.22241 243.14014,13.22241 238.53076,15.14111 238.1499,15.52222 229.31982,7.45752 223.94092,8.23022 219.3335,4.77393 207.43115,1.31323 205.50732,4.00659 193.22021,4.77393 187.46045,5.54053 186.30811,8.99683 180.16553,11.68628 179.78271,15.91064 177.09521,19.36499 179.78271,25.89307 185.15967,28.19702 182.85498,35.49487 172.48779,28.19702 168.26123,29.73389 159.81396,36.64111 150.98193,37.79663 147.90771,33.9585 144.45068,30.11865 142.91943,37.41479 139.84717,38.56592 149.82959,43.17432 149.06006,47.78271 153.28662,51.23389 150.21436,59.68115 151.3667,60.45068 151.3667,61.22217 147.90771,66.98193 148.6792,71.97412 146.37256,74.66553 150.97998,81.56982 142.53467,90.02197 145.98975,91.17432 145.22217,98.08447 147.90771,99.62256 149.06006,103.45752 152.13232,106.1499 155.20654,107.68604 159.43115,95.78271 163.65381,97.31299 168.26318,98.08154 170.1792,101.15674 176.70654,101.92334 177.86084,98.46826 184.00732,97.31299 195.90771,95.01221 208.19678,98.08447 210.12061,96.55029 220.48779,87.71338 223.17529,86.17725 233.15967,90.78564 236.23193,91.55811 247.3667,93.47803 258.8999,83.87842 "
   style="fill:#d5e6f4"
   id="polygon10" />
				<polygon
   points="258.8999,83.87842 258.88428,82.33545 255.81592,81.95361 256.19678,78.11377 257.35107,73.88818 255.04834,71.58545 256.9624,63.52588 251.97217,57.76416 248.8999,56.61279 250.0542,54.69385 247.3667,49.70068 248.13428,43.94092 250.82178,43.55811 246.2124,40.10107 238.91943,36.64526 235.4585,27.04663 244.6792,13.22241 243.14014,13.22241 238.53076,15.14111 238.1499,15.52222 229.31982,7.45752 223.94092,8.23022 219.3335,4.77393 207.43115,1.31323 205.50732,4.00659 193.22021,4.77393 187.46045,5.54053 186.30811,8.99683 180.16553,11.68628 179.78271,15.91064 177.09521,19.36499 179.78271,25.89307 185.15967,28.19702 182.85498,35.49487 172.48779,28.19702 168.26123,29.73389 159.81396,36.64111 150.98193,37.79663 147.90771,33.9585 144.45068,30.11865 142.91943,37.41479 139.84717,38.56592 149.82959,43.17432 149.06006,47.78271 153.28662,51.23389 150.21436,59.68115 151.3667,60.45068 151.3667,61.22217 147.90771,66.98193 148.6792,71.97412 146.37256,74.66553 150.97998,81.56982 142.53467,90.02197 145.98975,91.17432 145.22217,98.08447 147.90771,99.62256 149.06006,103.45752 152.13232,106.1499 155.20654,107.68604 159.43115,95.78271 163.65381,97.31299 168.26318,98.08154 170.1792,101.15674 176.70654,101.92334 177.86084,98.46826 184.00732,97.31299 195.90771,95.01221 208.19678,98.08447 210.12061,96.55029 220.48779,87.71338 223.17529,86.17725 233.15967,90.78564 236.23193,91.55811 247.3667,93.47803 258.8999,83.87842 "
   style="fill:none;stroke:#000000;stroke-width:0.42519999;stroke-miterlimit:3.85000992"
   id="polygon12" />
			</g></a>

Damit auch der Name "Nordhausen" als Link funktioniert habe ich unten in der Datei ebenfalls den xlink eingebunden, siehe hier:

	<a xlink:href="https://www.google.de">	<text
   x="203.40991"
   y="58.219799"
   style="font-size:18px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:100%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Sans"
   id="text2322"
   xml:space="preserve"><tspan
     x="203.40991"
     y="58.219799"
     id="tspan2324">Nord-</tspan><tspan
     x="203.40991"
     y="76.219795"
     id="tspan2326">hausen</tspan></text></a>

Hier zu meiner Testumgebung: https://internet-projekt-service.de/karte

Hover-Effekte etc. werde ich mit CSS dann noch machen.

Für weitere Hinweise von euch und Tipps bin ich gerne offen.

VG
Thomas

[zonky]

Ich würde von einem Inline-Style zu CSS-Klassen wechseln - das ist übersichtlicher und leichter zu pflegen
https://wiki.selfhtml.org/wiki/SVG/T...mit_CSS_stylen