Interaktive Karte mit HTML/CSS

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Interaktive Karte mit HTML/CSS

      Hayho,

      heute dann vielleicht mit einem Thema, das mehr Leute anspricht als son Hierarchiebaum >_> .. Vorlage war diesmal diese Deutschlandkarte: datawrapper.dwcdn.net/hZV0z/2/ -- Zu sehen sein sollte eine Deutschlandkarte mit Unterteilung in die Bundesländer (die unterschiedlich eingefärbt wurden), wobei ein Maushovern über eines der Bundesländer dieses hervorhebt und einen Infotext einblendet.

      Im Eigenversuch wird man schnell sehen, dass das bei weitem nicht so hübsch geworden ist, sondern mehr als 'Proof of Concept' funktioniert. Ergebnis ist dann die eigene Weltkarte, bei der man mit Maushover eine Region hervorhebt und einen auf sie zugeschnittenen Text einblendet. (Seit nem Bugfix im Path zuverlässiger.)

      Im folgenden das Codebeispiel, das man zum Ausprobieren hier reinkopieren kann: w3schools.com/css/tryit.asp?filename=trycss_default (den Kram da drin löschen, dann auf "run")

      HTML-Quellcode: Interaktive Karte

      1. <!DOCTYPE html><html><head><style>h1 { color: red;}
      2. svg {background-image:url("http://files.homepagemodules.de/b58757/f13t61p260n29_NRMJtdwS.png");
      3. -webkit-background-size: cover;
      4. -moz-background-size: cover;
      5. -o-background-size: cover;
      6. background-size: cover;}
      7. path {opacity:0;
      8. fill:none;
      9. stroke:black;
      10. pointer-events:all;}
      11. path:hover, circle:hover {
      12. stroke: red !important;
      13. stroke-width:2px;
      14. stroke-linejoin: round;
      15. fill: red !important; opacity:0.3;
      16. cursor: help !important;}
      17. text {opacity:0;}
      18. #wsl:hover {cursor: crosshair !important;}
      19. #wsl:hover ~ text#txtwsl{opacity:1.0;}
      20. #gwi:hover ~ text#txtgwi{opacity:1.0;}
      21. #wsl:hover + div{background-color:red;}
      22. </style></head><body>
      23. <h1>Maus über Weststromlande, Grimwasserinsel.</h1>
      24. <svg xmlns="http://www.w3.org/2000/svg"
      25. width="100%" height="100%"
      26. viewBox="0 0 760 396">
      27. <path id="gwi"
      28. fill="none" stroke="black" stroke-width="1"
      29. d="M 262.00,318.69
      30. C 268.26,315.64 268.68,309.79 276.00,312.00
      31. 276.00,312.00 267.00,321.00 267.00,321.00
      32. 267.00,321.00 273.00,321.00 273.00,321.00
      33. 266.86,328.19 264.29,322.97 259.10,324.69
      34. 255.80,325.78 252.78,332.04 251.00,335.00
      35. 243.00,332.72 238.09,333.61 237.00,343.00
      36. 237.00,343.00 228.00,341.00 228.00,341.00
      37. 228.00,341.00 229.00,345.00 229.00,345.00
      38. 226.94,344.76 225.37,344.77 223.72,343.27
      39. 221.48,341.22 220.50,335.51 217.00,340.00
      40. 211.24,336.99 213.50,336.14 213.72,331.00
      41. 213.95,325.77 211.56,325.10 218.00,321.00
      42. 227.90,328.33 233.95,325.19 243.00,319.00
      43. 243.00,319.00 245.00,323.00 245.00,323.00
      44. 256.11,318.32 257.30,320.97 262.00,318.69 Z
      45. M 266.00,321.00
      46. C 266.00,321.00 267.00,322.00 267.00,322.00
      47. 267.00,322.00 267.00,321.00 267.00,321.00
      48. 267.00,321.00 266.00,321.00 266.00,321.00 Z" />
      49. <path id="wsl"
      50. fill="none" stroke="black" stroke-width="1"
      51. d="M 234.23,147.79
      52. C 236.02,144.96 234.32,141.81 236.60,140.03
      53. 240.69,136.83 242.94,142.27 244.82,144.59
      54. 247.99,148.50 249.20,146.26 250.00,153.00
      55. 250.00,153.00 268.00,153.94 268.00,153.94
      56. 274.35,153.24 280.40,149.14 287.98,151.51
      57. 293.10,153.11 292.10,156.33 295.31,159.04
      58. 297.76,161.10 301.18,161.65 304.48,165.21
      59. 311.71,173.01 310.08,178.58 309.17,188.00
      60. 308.90,190.80 309.22,193.34 308.07,196.00
      61. 306.54,199.55 302.84,202.76 300.69,206.00
      62. 300.69,206.00 297.01,213.00 297.01,213.00
      63. 295.81,214.93 287.37,226.40 285.95,227.44
      64. 283.14,229.49 279.33,229.75 276.00,231.19
      65. 270.78,233.46 261.20,239.66 257.23,243.51
      66. 255.68,245.01 249.87,257.92 249.58,260.00
      67. 249.15,263.11 249.90,268.73 248.43,271.57
      68. 246.40,275.49 243.35,271.55 239.00,279.00
      69. 234.26,277.10 230.39,274.42 225.00,274.61
      70. 221.18,274.75 218.28,276.86 215.00,276.31
      71. 212.07,275.82 209.59,273.39 207.00,272.36
      72. 202.30,270.51 197.87,272.38 194.00,275.00
      73. 191.89,267.57 194.81,264.72 187.00,263.00
      74. 187.00,263.00 189.00,268.00 189.00,268.00
      75. 184.03,270.09 183.18,270.74 185.00,276.00
      76. 182.29,278.90 182.32,279.07 182.00,283.00
      77. 182.00,283.00 171.00,277.13 171.00,277.13
      78. 168.36,276.11 165.04,275.96 163.95,272.86
      79. 162.66,269.22 165.83,266.11 167.24,263.00
      80. 168.97,259.19 168.96,256.05 169.00,251.99
      81. 166.12,252.03 160.26,252.79 158.00,251.99
      82. 155.86,251.21 151.90,248.07 150.00,246.58
      83. 145.94,243.37 133.17,230.28 131.72,226.00
      84. 130.73,223.64 130.96,220.33 131.72,218.00
      85. 132.85,215.33 137.49,208.82 139.31,206.00
      86. 142.19,201.53 148.36,190.64 152.18,187.81
      87. 155.63,185.26 161.22,184.24 167.00,180.07
      88. 175.97,173.60 185.14,166.10 196.00,163.00
      89. 196.00,163.00 197.00,171.00 197.00,171.00
      90. 206.31,166.52 205.97,164.28 214.00,172.00
      91. 214.00,172.00 216.00,164.00 216.00,164.00
      92. 221.91,171.68 222.56,165.38 229.00,166.91
      93. 231.98,167.61 235.68,171.01 238.00,173.00
      94. 238.00,173.00 233.49,159.39 233.49,159.39
      95. 233.49,159.39 226.00,154.00 226.00,154.00
      96. 228.21,152.55 232.92,149.88 234.23,147.79 Z" />
      97. <text id="txtgwi" x="15" y="15" fill="red">This is GWI! (Grimwasserinsel)</text>
      98. <text id="txtwsl" x="15" y="15" fill="red">WSL has been selected! (Weststromlande)</text>
      99. </svg>
      100. </body>
      101. </html>
      Alles anzeigen
      Zu sehen ist eine eigene Karte, die auf ein Maushover über den "Weststromlanden" und die Insel unter dem "Grimwasser"-Schriftzug reagiert. Einmal in eigener Rot-Färbung, und dann nochmal mit Einblenden eines Textes in der Ecke links oben.


      1. Erstellen der SVG-Datei mit Gimp

      In Gimp hab ich hierzu meine Karte geöffnet, um darauf dann die etwas grob gelungenen Markierungen zu ziehen. Benötigt wird das Werkzeug "Freie Auswahl" (das dritte mit dem Schlaufensymbol). Hat man damit eine Region oder Insel eingerahmt, klickt man in der Menüleiste auf "Auswahl" und dann den letzten Punkt "Nach Pfad".
      Standardmäßig im Ebenen-Sichtfenster findet man im dritten Reiter die Pfade. Die kann man jetzt sinnvoll benennen (ich glaub ohne Leer- und (deutsche) Sonderzeichen wär sinnvoll). Dann kann man mit Rechtsklick auf einen der Pfade im vorletzten Menüpunkt "Pfad exportieren" die "Pfade nach SVG exportieren". Bevor man speichert, wählt man hier über den Speichern/Abbrechen-Optionen "Alle Pfade dieses Bildes exportieren" aus, damit auch alle mitkommen und nicht nur der ausgewählte.

      2. Einfügen der SVG-Datei in HTML

      Die SVG-Bilddatei kann man sich jetzt zum Angucken in einen Firefoxtab ziehen.

      Jeedenfalls lässt sich diese erstellte Pfad-Datei, egal ob mit .svg benannt oder nicht, in einem Texteditor (NotePad++, Windows Text Editor, Sublime, crispr) öffnen. Die ersten zwei Zeilen zur XML-Version und dem Dokumenttyp sind für uns irrelevant. Los gehts mit <svg und endet ganz am Ende mit </svg>, wie mans auch von HTML- oder XML-Code gewohnt ist.

      Die einzige Änderung darin war die Width/Height-Werte auf 100% zu stellen, wodurch das Gebilde sich nun die Bildschirmgröße anpasst.

      3. Erklärungen

      Im CSS-Anteil hat die SVG die Originalkarte als Hintergrundbild bekommen und füllt es mit "cover" vollständig aus.

      Die Paths sind die einzelnen Pfade/Regionen, die hab ich erstmal auf unsichtbar gestellt mit Opacity 0. Wenn man Grenzlinien haben mag, kann man das wieder auf 1.0 stellen (oder löschen).

      path:hover setzt stroke/Rahmen auf rot und füllt die Region mit einer Transparenz (bzw. Opazität 0.3) aus.

      Und die Texte mit den id's #txtwsl und #txtgwi werden, wenn die Region #wsl respektive #gwi angehovert wird, wieder über den Opazitäts-Wert auf sichtbar gestellt und erscheinen oben links.

      4. Anpassungen

      Die Rahmendicke und Rahmenfarbe der Regionen lassen sich einmal für die Nicht-Hover-Version, und einmal fürs Maushovern einfach im Path bzw. path:hover anpassen (stroke/stroke-width). Der Mauszeiger weiterhin mit Cursor:Crosshair; und Cursor:Help; (und weiteren).
      Dann noch Textgröße/Farbe und sicher auch Schriftart. Und auf jeden Fall die Positionierung des Textes. Man könnte den zum Beispiel entweder in einen vorgesehenen Bereich, oder aber direkt über die Region schreiben.
      Ansonsten hab ich mit SVG jetzt zum ersten Mal gewerkelt, aber einen Legende-Kasten hinter die Texteinblendungen zu klatschen sollt auch möglich sein.

      Grüße, viel Spaß, Erfolg und gerne fragen. :)

      5. Städtemarkierung
      Der Circle kommt noch aus folgendem Tutorial, in dem er die Hauptstadt markierte, und kann ggf. auch eingebunden/benutzt werden für Eigenmarkierungen dann: websitebeaver.com/how-to-make-…map-of-us-states-capitals

      6. Nachbarmarkierungen

      Man könnte auch einen Path definieren, der andere Regionen markiert. Z.B. einen Schriftzug "Nordvolk", der beim hovern dann einige der Regionen hervorhebt.
      > Möchte in Fantasy-Ausrichtung an den Erfolg von Scientology anknüpfen.

      Dieser Beitrag wurde bereits 5 mal editiert, zuletzt von Eru () aus folgendem Grund: Code-Bugfix im Path.

    • Mit CSS ist das eine schicke Lösung. Mal gucken, inwieweit sich so etwas in die Seliaris-Karte einbasteln liesse - ich fürchte bloss, die gegenwärtige Struktur des zugehörigen SVG müsste massivst umgestellt werden :( . Trotzdem: CSS dürfte vermutlich schon effizienter sein als JS, was ich ja jetzt hab. (Alle Aspekte kann CSS aber halt nicht, um auf Klicks zu reagieren bräuchte ich auf jeden Fall JS.)
      Don't diagnose and drive.

      Dieser Bastler hat sich freiwillig dazu verpflichtet, ab sofort je Woche einen wertvollen Bastelpost mehr zu verfassen als bisher. Er möchte damit das Forum zu mehr Aktivität anregen. Hilf ihm und mach einfach mit!
    • @aeyol
      Leider auch da nicht ohne JS. CSS hat halt zwar einen Selektor für Hover, aber keinen für "Wurde mal angeklickt" (ausser, man lässt a:visited gelten, aber das ist für so einen Zweck ja auch nicht tauglich). Was die Zusammenarbeit von JS und SVG angeht, steht nach Weihnachten aber eh ein kleines Tutorial auf meiner Liste.
      Don't diagnose and drive.

      Dieser Bastler hat sich freiwillig dazu verpflichtet, ab sofort je Woche einen wertvollen Bastelpost mehr zu verfassen als bisher. Er möchte damit das Forum zu mehr Aktivität anregen. Hilf ihm und mach einfach mit!
    • Beim Klicken denk ich zuerst an die :active-Funktion mit dem lokalen Anker (oder so), vielleicht ist auch damit was machbar, wenn die Seite sowieso vollständig sichtbar ist und nirgendwo hin scrollt.


      Ich hab mir jetzt die eigene Karte damit fürs erste fertig zusammengebastelt: hexenlande.de/blog-e806-Neue-Weltkarte.html

      Schön ist: Man kann nachher einzelne Pfade ersetzen, also z.B. eine Region entfernen, weiter unterteilen und dann die Teilregionen drauftun. Oder die Hintergrundkarte einfach ersetzen, ohne an den Regionen was machen zu müssen.
      Und die Karte passt sich (wenn man möchte) an die Fenstergröße an, kann also gescheit runter/raufskalieren wobei die Regionen weiterhin korrekt sind.

      Probleme bei mir waren: Aufpassen, dass die Einbaueditor-Oberfläche nicht die SVG-Zeilenumbrüche mit einem html-br(eak line) versieht, kurzum hab ich innerhalb der SVG alle Umbrüche rausgelöscht (zum Glück nicht manuell sondern mit STRG+F/Alle ersetzen).
      Und ich hab gelernt, dass in Gimp die Anzeigen-Funktion wie für Ebenen auch für Pfade ganz sinnvoll ist, damit man richtig anknüpft. Zudem dass man mit dem Werkzeug auch ziehen/zeichen kann und nicht nur Punkte miteinander verbinden.

      Ich bin damit jetzt aber auch schon bei 42k Zeichen angekommen, in meinem Forengebastel stoß ich so schnell auf die 65k Beitragsgrenze und kann sonst nicht so viel dazuschreiben, wenn ich das Koordinatengewirr nicht irgendwie anders unterbekomme... <_<
      > Möchte in Fantasy-Ausrichtung an den Erfolg von Scientology anknüpfen.