---
title: "[HowTo] Dynamische Deutschlandkarte als Menu"
url: "https://www.typo3.net/d/113508-howto-dynamische-deutschlandkarte-als-menu"
source: "typo3.net"
tags: ["TYPO3","TypoScript","JavaScript & AJAX","Tipp"]
created: "2013-01-18"
last_reply: "2013-01-18"
replies: 0
solved: false
page: 1
pages: 1
lang: "de"
---

# [HowTo] Dynamische Deutschlandkarte als Menu

TYPO3 › TypoScript · 0 Antworten · gestartet 2013-01-18

## Eröffnungsbeitrag

**karlchen** · 2013-01-18 · [Beitrag #1](https://www.typo3.net/d/113508-howto-dynamische-deutschlandkarte-als-menu/1)

Da ich eine kleine Nachfrage hatte wie man eine Deutschlandkarte auf die Webseite integrieren und dann die Bundesländer als eine Art "Navigation" nutzen könnte, habe ich diese Quick and Dirty Variante zusammengestellt.
Vielleicht kann es hier ja noch jemand brauchen oder hat auch noch ein paar Verbesserungsvorschläge parat.

Die Grundlage ist das Jquery Script von dieser Seite: <http://jqvmap.com/>, das dort zu finden Beispiel "Germany" integrieren wir nun in unsere TYPO3 Seite.

1.)
Also dort das Zip runterladen, entpacken und die Dateien "jquery.vmap.min.js", "jqvmap.css", "jquery.vmap.germany.js"  im fileadmin Ordner hochladen, ibei mir beziehen sich die Pfade daher auf den Ordner "fileadmin/templates/js/vendor/jqvmap/".

2.)
Jetzt legen wir im BE 16 neue Seiten an die die Bundesländer repräsentieren bzw zu denen nach Klick auf z.B. "Berlin" nacvigiert wird, die "Bundesländer" die wir erst mal nicht brauchen werden versteckt.

3.)
Danach gehen wir auf die Seite wo die Karte angezeigt werden soll und integrieren ein neues HTML Content Element mit folgendem Inhalt.

```html
<div id="vmap" style="width: 400px; height: 400px;"></div>
```

4.)
jetzt legen wir folgendes TYPOScript an:
(z.b. in einem Extension Template direkt auf der Seite wo die Karte angezeigt werden soll oder ordnet es in eurere bestehende Struktur ein)

```typoscript
// Standard CSS für jqvmap
page.includeCSS{
  jqvmap = fileadmin/templates/js/vendor/jqvmap/jqvmap.css
}

page.includeJSlibs{
 // falls Jquery bereits anderweitig integriert wurde, kann auf die diese Zeile verzichtet werden
  jquery = //ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
 
  // StandardScript von jqvmap
  jqvmap = fileadmin/templates/js/vendor/jqvmap/jquery.vmap.min.js
 
  // Deutschland Karte
  jqvmapGermanyMap = fileadmin/templates/js/vendor/jqvmap/jquery.vmap.germany.js
}
```

Das Javascript von der Seite <http://jqvmap.com/>, erstellt die Deutschland Karte, sorgt für MouseOver Effekt und gibt bei einem Klick auf die Bundesländer einen Wert zurück den man nutzen kann. Beispiel: Klickt man auf der Seite Bayern an, erscheint ein Fenster mit folgendem Inhalt "You clicked "Bayern" which has the code: BY". Im weiteren Vorgehen nutzen wir nun die Kürzel, wie hier "BY".

Wir verbinden nun also diese zurückgegebenen Kürzel mit den Seiten zu den navigiert werden soll, das machen wir in dem wir mit TypoScript ein JavaScript Array bauen und den Kürzeln eine URL zuweisen. Später wird dann bei einem Klick geschaut ob zu diesem Kürzel eine URL hinterlegt ist und wenn ja dort hin weitergeleitet.

5.)
Um unserer Array durch TYPO3 bauen zu lassen fügen wir folgendes in unserer TypoScript ein.
(wenn es im Extension Template ist, muss es in der Reihenfolge unterhalb der "page.includeJSlibs" aus dem oberen Schnippsel.)

```typoscript
page.jsInline.123123 = COA
page.jsInline.123123{
  wrap(
  var card = [];
  )
  10 = TEXT
  10{
    stdWrap.typolink {
      parameter = 56  // die Id der Seite zu der weitergeleitet werden soll wenn Bayern angeklickt wurde
      forceAbsoluteUrl = 1
      returnLast = url
    }
    wrap = card['BY'] = '|';
    required = 1
  }
  
  20 < .10
  20.stdWrap.typolink.parameter = 57 // wenn Berlin angeklickt wurde
  20.wrap = card['BE'] = '|';
  
  30 < .10
  30.stdWrap.typolink.parameter = 58 // wenn ...
  30.wrap = card['HI'] = '|';
   
  100 = TEXT
  100.value (
  jQuery(document).ready(function() {
    jQuery('#vmap').vectorMap({
        map: 'germany_en',
        onRegionClick: function(element, code, region)
        {
          if( card[ code.toUpperCase() ]){
            window.location.href = card[ code.toUpperCase() ];
          }
        }
    });
  });
  )
}
```

Kleine Erklärung zum TypoScript:

10 )
 hier erzeugen wir eine URL von der Seite mit der ID 56 (die kann man sehen wenn man im Seitenbaum mit der Maus über das Seitensymbol vor dem Seitennamen fährt).
"forceAbsoluteUrl = 1", sorgt dafür das vor der erzuegten URL eine Domain geschrieben wird, also "<http://domain.de/index.php?id=56>" anstatt "/index.php?id=56", ich mach das weil mir der InternetExplorer bei relativen URLs ab und an Probleme gemacht hat wenn ich mit Javascript eine solche Weiterleitung baue.
"returnLast = url" sorgt dafür das nur die URL zurückgegeben wird, typolink bau sonst ja immer einen komplette Link wie < a href = "..." >  ... < / a >.

"wrap = card['BY'] = '|';" hier wird die Zurückgegebene URL dem jeweilgen ArrayKey zugeordnet, für 16 Budnesländer bräuchten wir also 16 wraps dieser Art

"required =1" setzt voraus, dass durch TYPO3 ein Link zurückgegeben wird, wenn Seiten allerdings versteckt sind, wird kein Link zurückgegeben und somit wird auch kein Array Element angelegt. Durch das verstecken von Seiten können Redakteure somit beeinflussen ob zu dieser Seite verlinkt werden soll oder nicht.

20 und 30)
sind Kopien von 10 und ändern nur den nötigen Bereich.

100)

Das ist im großen und ganzen das Script-Beispiel von der Seite, ich habe es ein wenig für diesen Zweck angepasst.
 "code.toUpperCase()" liefert hier die Kürzel zurück, z.b. "BE", wir schauen also ob das zurückgegene Kürzel in unserem vorher angelegten Javascript Array exisitiert und wenn ja wird die URL window.location.href zugeordnet, welches dann die Weiterleitung ausführt.

So hoffe, man kann es brauchen und verbesserungsvorschläge wären auch schön, dann haben alle was davon.

Viele Grüße
Karlchen

---

Quelle: „[HowTo] Dynamische Deutschlandkarte als Menu“, typo3.net, https://www.typo3.net/d/113508-howto-dynamische-deutschlandkarte-als-menu
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.