Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Deutschlandkarte dynamisch in TYPO3
#1
Hallo Zusammen,

da ich hier immer super Hilfe bekommen habe, möchte ich jetzt auch mal was zurück geben, und zwar habe ich die letzten Tage eine Deutschlandkarte dynamisch in TYPO3 aufgebaut. Ich möchte euch hier kurz schildern wie ich vorgegangen bin damit vllt der ein oder andere der soetwas mal brauch sich hier die nötigen Infos holen kann.

1 Punkt

Als erstes bin ich in mein TYPO3 Backend dort habe ich eine Hauptseite angelegt die ich map genannt habe, darunter habe ich 16 Seiten angelegt für die Bundesländer in den Seiteneigenschaften habe ich bei "Alternativer-Seitentitel" den Regioncode z.B. für Bayern BY vergeben.

2 Punkt

Danach bin ich auf diese Seite:
http://jqvmap.com/
und habe die Deutschlandkarte in mein TYPO3 Template eingebaut.

3 Punkt
Im nächsten Schritt bin ich in mein TYPOSCRIPT und habe eine Script geschrieben, dass die Seiten der Bundesländer ausgibt
CODE:

PHP-Code:
headerData.998 CONTENT
  headerData.998  
{
    
table pages
    select
.pidInList 379
    
    stdWrap
.wrap = <scriptMAP_REGION_ARR = []; | </script>
    
    renderObj = COA
    renderObj {
      
      stdWrap.wrap = MAP_REGION_ARR.push({|});
      
      10 = TEXT
      10.typolink.parameter.field = uid
      10.typolink.returnLast = url
      10.wrap = url: '|',
      
      20 = TEXT
      20.data = field:nav_title
      20.wrap = regioncode: '|'
      
    }
  } 


4. Punkt

Im Schritt 4 bin ich in mein TYPO3-Template und habe eine IF Abfrage programmiert die eben prüft ob die Seite im TYPO3 Backend vom jeweiligen Bundesland existiert, und wenn ja dann soll es auf die Seite gehen.

PHP-Code:
<script type="text/javascript">
   
jQuery(document).ready(function() {
      
jQuery('#vmap').vectorMap({
          
map'germany_en',
          
onRegionClick: function(elementcoderegion)
          {
              for (var 
x=0x<MAP_REGION_ARR.lengthx++) {
              if (
MAP_REGION_ARR[x].regioncode == code.toUpperCase())
                
window.location.href MAP_REGION_ARR[x].url;        
           }
           }
         });
    });
   
</script> 


Ich hoffe das war verständlich Smile

Und hilft dem ein oder anderen Smile


Liebe Grüße Smile
Zitieren
#2
Hast du mal ein Live-Beispiel?
Zitieren
#3
Ja werde demnächst ein Live-Beispiel zeigen, werde auch noch die Funktion erweitern wenn z.B. ein Bundesland im Backend deaktiviert ist, wird dieses Bundesland auf der Karte beim Hovern in einer anderen Farbe dargestellt.
Zitieren
#4
Wie angekündigt hier noch der Code für einen Farbwechsel bzw. das nichts angezeigt wird beim Hovern wenn die Seite im Backend deaktiviert wurde.

PHP-Code:
    onRegionOver: function(eventcode)
           {      
            var 
false;
                for (var 
x=0x<MAP_REGION_ARR.lengthx++) {
              if (
MAP_REGION_ARR[x].regioncode == code.toUpperCase()){
                    
true;
                }        
                   }
                   if(
== falseevent.preventDefault();
           } 
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste