Leaflet - Tabs in Popups

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

  • Leaflet - Tabs in Popups

    Hallo zusammen,

    ich habe folgendes Tutorial gefunden mit dem ich gerade versuche in meine Leaflet-Popups "Tabs" zu realisieren:
    dynamicdrive.com/dynamici...tabcontent.htm

    Hier in Link zu meiner Leaflet-Karte:
    test.rettertest.square7.de/

    Mein Code sieht folgendermaßen aus:

    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    5. <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    6. <title>TEST</title>
    9. <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
    10. <!--[if lte IE 8]>
    11. <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.ie.css" />
    12. <![endif]-->
    14. <style type="text/css">
    16. div#map div.gmnoprint div{overflow-x: hidden !important;}
    18. .author {font-family:Arial;font-size:x-small;}
    20. div#content {margin:0px;max-width:300px;overflow:hidden;}
    21. .content {margin:0px;max-width:300px;height:400px;overflow:hidden;}
    23. div#bild {margin:0px;width:300px;max-width:300px;height:200px;}
    24. .LINE1 {font-family:Arial;font-size:large;font-weight:bold;display:block;max-width: 300px;margin-bottom:inherit;line-height: 1.5;}
    25. .LINE2 {font-family:Arial;font-size:x-small;display:block;max-width: 300px;line-height: 1.5;}
    26. .LINE3 {font-family:Arial;font-size:small;font-weight:bold;display:block;max-width: 300px;line-height: 1.5;}
    27. .LINE4 {font-family:Arial;font-size:small;display:block;max-width: 300px;line-height: 1.5;}
    29. #map { height: 600px; }
    32. </style>
    34. <link rel="stylesheet" type="text/css" href="tabcontent.css" />
    36. <script type="text/javascript" src="tabcontent.js">
    38. /***********************************************
    39. * Tab Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    40. * This notice MUST stay intact for legal use
    41. * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    42. ***********************************************/
    44. </script>
    47. <script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
    49. <script type="text/javascript"
    50. src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
    51. </script>
    54. <script type="text/javascript">
    57. function load() {
    59. var dahwIcon = L.icon({
    60. iconUrl: '/img/logo.png',
    61. shadowUrl: '/img/mm_20_shadow.png',
    63. iconSize: [23, 23], // size of the icon
    64. shadowSize: [30, 30], // size of the shadow
    65. shadowAnchor: [10, 20], // the same for the shadow
    66. });
    70. var map = L.map('map').setView([51.165691, 10], 7);
    71. // L.tileLayer('http://{s}.tile.cloudmade.com/a2f724a704d34552bf6c6ce5fc654b4b/22677/256/{z}/{x}/{y}.png', {
    72. // attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    73. // maxZoom: 25
    75. L.tileLayer('http://{s}.tile.cloudmade.com/a2f724a704d34552bf6c6ce5fc654b4b/997/256/{z}/{x}/{y}.png', {
    76. maxZoom: 18,
    77. attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
    80. }).addTo(map);
    82. var firstLoad = true;
    84. $.getJSON("get_info.php", function (data) {
    85. for (var i = 0; i < data.length; i++) {
    86. var location = new L.LatLng(data[i].breitengrad, data[i].laengengrad);
    87. var name = data[i].name;
    88. var address = data[i].address;
    89. var type = data[i].type;
    90. var ts = data[i].ts;
    91. var orts_id = data[i].orts_id;
    92. var Anrede = data[i].Anrede;
    93. var Vorname = data[i].Vorname;
    94. var Nachname = data[i].Nachname;
    95. var Tel = data[i].Tel;
    96. var EMAIL = data[i].EMAIL;
    97. var Internet = data[i].Internet;
    100. if (type != "1") { var orts_id = "undefined" }
    101. if (EMAIL != "") { var EMAIL = "<a href='mailto:"+ EMAIL +"'>" + EMAIL + "</a>" } else {var EMAIL = "<a href='mailto:test@test.de'>test@test.de</a>" }
    102. if (Tel != "") { var Tel = Tel } else {var Tel = "1234/56789" }
    103. if (Internet != "") { var Internet = "<a href='"+ Internet +"' 'target=_blank'>" + Internet + "</a>" } else {var Internet = "<a href='http://www.TEST.de' target='_blank'>www.TEST.de</a>" }
    105. var marker = new L.Marker(location, {icon: dahwIcon, title: name});
    106. marker.bindPopup('<div style="border:1px solid gray; width:300px; height: 350px; background-color: #EAEAEA; padding: 5px">'+
    107. '<div id="tcontent1" class="tabcontent">'+
    108. 'Tab content 1 here<br />Tab content 1 here<br />'+
    109. '</div>'+
    110. '<div id="tcontent2" class="tabcontent">'+
    111. 'Tab content 2 here<br />Tab content 2 here<br />'+
    112. '<div class="LINE1">'+name+'</div>'+
    113. '<span class="LINE2">von <a href="http://www.TEST.de" target="_blank">TEST</a> am ' + ts + ' aktualisiert </span>'+
    114. '<div class="bild"><img src="/karte/images/'+orts_id+'.jpg" border="1" alt='+name+'/></div>'+
    115. '<span class="LINE3">Kontakt:</span>'+
    116. '<span class="LINE4">' + Anrede + ' ' + Vorname + ' ' + Nachname + '</span>'+
    117. '<span class="LINE4">Telefon: ' + Tel + '</span>'+
    118. '<span class="LINE4">E-Mail: ' + EMAIL + '</span>'+
    119. '<span class="LINE4">Internet: ' + Internet + '</span>'+
    120. '</div>'+
    121. '</div>'+
    122. '<div id="flowertabs" class="modernbricksmenu2">'+
    123. '<ul>'+
    124. '<li><a href="#" rel="tcontent1" class="selected">Übersicht</a></li>'+
    125. '<li><a href="#" rel="tcontent2">Beschreibung</a></li>'+
    126. '<li><a href="http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm">Tab Content</a></li>'+
    127. '</ul>'+
    128. '</div>'+
    129. '<br style="clear: left" />'+
    130. '<scr'+'ipt type="text/javascript">' +
    131. 'var myflowers=new ddtabcontent("flowertabs")'+
    132. 'myflowers.setpersist(true)'+
    133. 'myflowers.setselectedClassTarget("link")'+
    134. 'myflowers.init()</scr'+'ipt>', {maxWidth:'300'});
    135. map.addLayer(marker);
    136. }
    137. }).complete(function() {
    138. if (firstLoad == true) {
    139. map.fitBounds(map.getBounds());
    140. firstLoad = false;
    141. };
    142. });
    143. }
    150. </script>
    153. </head>
    155. <body onload="load()">
    157. <div id="map" style="width: 500px; height: 600px"></div>
    158. </body>
    160. </html>
    Alles anzeigen



    Leider kann ich die Tabs, nachdem ich auf einen Marker klicke, nicht auswählen, als ob das benötigte Script einfach nicht ausgeführt werden würde.
    Woran liegt das?

    Ich hoffe jemand von euch kann jemand helfen

    Ich freue mich über jede Antwort.

    Viele Grüße und Vielen Dank
    Adrjan