SVG/Tutorials/interaktive Landkarten

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Bei einem Einsatz von Landkarten auf Webseiten bietet sich SVG als Format an, da Flächen und Orte aus gezeichneten Formen bestehen, die man dann mit CSS gestalten und sogar animieren kann.

Landkarten spielen eine große Rolle bei der Datenvisualisierung, da sie anschaulicher und besser als lange Tabellen sind.

Woher bekommen Sie SVG-Karten?[Bearbeiten]

Natürlich müssen Sie Ihre Karten nicht selbst zeichnen oder bei einem professionellen Kartendienst kaufen.

Es gibt auch Wege, um SVG-Karten aus openstreetmap[3] zu erzeugen, die Sie dann einbinden können.

Natural Earth ist eine Sammlung von geographischen Daten, die unter Public Domain stehen. Dieses Tutorial von smashing magazine zeigt Ihnen, wie Sie daraus mit dem Framework Kartograph.py eigene Karten erzeugen können.

Anwendungsbeispiele[Bearbeiten]

interaktive Landkarte[Bearbeiten]

Diese Karte zeigt Australien. Wenn Sie über die einzelnen Bundesstaaten mit der Maus fahren, erscheint deren Name.

Beispiel ansehen …
path {
  fill: #c32e04;
  stroke: #333;
  stroke-width: 0.4;
}

path:hover {
  fill: #dfac20;
}
	
text {
  opacity: 0;
  font-size: 8px;
  fill: black;
  pointer-events: none;  
}
	
path:hover ~ text {
  opacity: 1;
}
Ausschnitt aus dem SVG-Markup
<g id="ACT" class="ACT">
  <path id="ACT-territory" class="ACT" d="..."/>
  <text x="250" y="185">Canberra</text> 
  <text x="200" y="200">Australian Capital Territory</text>  
</g>
Bei :hover verändert das Pfad-Element seine Füllfarbe; zugleich wird der vorher mit opacity: 0 ausgeblendete Text sichtbar.

Der Selektor path:hover ~ text wirkt dank des Geschwisterselektor ~ auf alle text-Elemente, die Geschwister von path sind und mit path das gleiche Elternelement haben.

Normalerweise würde der Pfad, wenn die Maus über dem Text schwebt, seinen :hover-Status verlieren. Durch die CSS-Eigenschaft pointer-events: none können Sie dies abschalten.

Nachteilig an dieser Methode ist die Tatsache, dass Textfelder, die über den zugehörigen Pfad herausragen, durch nachfolgende andere Pfade überschrieben werden. Da es in SVG1.1 noch kein z-index gibt, kann ein Objekt nur durch eine spätere Position im Markup nach vorne gebracht werden.

frei positionierbare Tooltipps[Bearbeiten]

In diesem Beispiel wird die Textinformation in einen Tooltipp gelegt.

Beispiel
  <defs>
    <symbol id="tooltipp">
	  <path d="..." fill="#666" stroke="black" stroke-width=".25">  
	</symbol>
  </defs>

...
  <g class="info ACT" transform="translate(225,155)">
    <use xlink:href="#tooltipp" />
    <text x="5" y="12">Canberra</text> 
  </g>
Die Form des Tooltips wird in einem wiederverwendbaren symbol angelegt und dann innerhalb eines g-Elements mit use wieder aufgerufen. Der Text wird nicht wie in HTML als Kindelement, sondern einfach als nächstes Geschwisterelement notiert.


Beispiel
<a id="ACT" class="ACT">
  <path id="ACT-territory" class="land" d="..."/>
</a>

  <g class="info ACT" transform="translate(225,155)">
    <use xlink:href="#tooltipp" />
    <text x="5" y="12">Canberra</text> 
  </g>
Die Koordinaten der Landflächen werden zuerst, anschließend die einzelnen Tooltips notiert. So wird sichergestellt, dass die Tooltips über den Landflächen dargestellt werden.

Und nun das fertige Beispiel:

Beispiel ansehen …
.land {
  fill: #fffbf0;
  stroke: #e7c157;
  stroke-width: 0.4;
}

.land:hover {
  fill: #dfac20;
  stroke:#333;
}
	
.info {
  opacity: 0;
  font-size: 8px;
  fill: white;
  pointer-events: none;  
}
	
#ACT:hover ~ .ACT, a#ACT:focus ~ .ACT,
#NSW:hover ~ .NSW, a#NSW:focus ~ .NSW,
#NT:hover ~ .NT,   a#NT:focus ~ .NT,
#QLD:hover ~ .QLD, a#QLD:focus ~ .QLD,
#SA:hover ~ .SA,   a#SA:focus ~ .SA,
#TAS:hover ~ .TAS, a#TAS:focus ~ .TAS,
#VIC:hover ~ .VIC, a#VIC:focus ~ .VIC,
#WA:hover ~ .WA,   a#WA:focus ~ .WA {
  opacity: 1;
  transition: all 0.5s linear;
}
Bei :hover verändert die Landfläche ihre Füllfarbe; zugleich wird der vorher mit opacity: 0 ausgeblendete Tooltipp sichtbar.

Der Selektor #ACT:hover ~ .ACT wirkt dank des Geschwisterselektor ~ auf alle Tooltipps, deren g-Element ja Geschwister des Links mit der Landfläche ist.

Da das a-Element den Pfad der Landfläche umfasst, kann man die aktive Fläche des Links pixelgenau ansprechen.

Sie können die Link-Elemente auch mittels eines internen Ankers mit den Tooltipps verbinden, sodass sie fest selektierbar sind:

Beispiel
<a id="ACT" class="ACT" xlink:href="#ACT-info">
  <path id="ACT-territory" class="land" d="..."/>
</a>

  <g class="info ACT" id="href-info" transform="translate(225,155)">
    <use xlink:href="#tooltipp" />
    <text x="5" y="12">Canberra</text> 
  </g>

Choroplethenkarte[Bearbeiten]

Eine Choroplethenkarte oder auch Flächenkartogramm ist eine Karte in der die Gebiete nicht willkürlich, sondern je nach zugehörenden Daten in unterschiedlichen Schattierungen gefärbt, schattiert, gepunktet oder schraffiert sind. Passende Daten wären keine absoluten Zahlen wie die Einwohnerzahl eines Gebietes, sondern auf die Fläche bezogene wie Bevölkerungsdichte, -wachstum oder die prozentualen Werte für Arbeitslosigkeit, Mietpreise etc.[4]

Für das Farbschema gibt es mit ColorBrewer ein bequemes Tool, das Ihnen passende Farbpaletten zusammenstellt.

Screenshot

Die Karte ist ebenfalls aus der Wikipedia und mit SVG-Optimizer vereinfacht worden. Peter Collingridge setzte die :hover-Effekte in seinem Beispiel noch mit mouseover um, heute reicht dafür CSS alleine.[5]

Beispiel ansehen …
.land {
  fill: #fffbf0;
  stroke: #e7c157;
  stroke-width: 0.4;
}
.land:hover, .land:focus {
   stroke: #00000;
   stroke-width: 1.5px;
}
Bei :hover wird die Randlinie schwarz und dicker dargestellt.
Empfehlung: Statt verschiedener Farben können Sie auch eine Farbe verwenden und die Deckkraft stufenweise verändern.


Im realen Einsatz empfiehlt es sich, die interaktive Karte als SVG-Dokument (→ Einzelansicht) in einem object-Element einzubinden, da ältere Versionen des Internet-Explorer die inline SVG-Grafik in der Standardgröße von 300x150px darstellen. Leider ist ein solches Beispiel mit der Mediawiki-Software (noch) nicht möglich.

Beispiel: Einbindung mit object
<object 
    data="Deutschland-Arbeitslose.svg" 
    type="image/svg+xml">

    <param name="src" value="/local/Deutschland-Arbeitslose.svg">
    <!-- Fallback -->
    <img src="Deutschland-Arbeitslose.png" alt="Choropletenkarte der Arbeitslosenquote der Bundesländer">
</object>

Karte mit .csv-Daten füllen[Bearbeiten]

Dies ist ein sehr gutes Tutorial, wie man eine vorhandene SVG-Karte mit in einer CSV-Datei etwa aus der Wikipedia vorhandenen Daten dynamisch füllt. Die Skripten sind allerdings in Python geschrieben.

mit dem Viewport zoomen[Bearbeiten]

SVG Zoom

Quellen[Bearbeiten]

  1. http://www.amcharts.com/svg-maps/
  2. wikimedia: Category:SVG_maps_by_country
  3. http://wiki.openstreetmap.org/wiki/SVG
  4. flowingdata: How to Make a US County Thematic Map Using Free Tools
  5. Peter Collingridge: Interactive SVG map


Weblinks[Bearbeiten]

siehe auch[Bearbeiten]