Menü JS stört OSM JS und umgekehrt.

Hardyy · February 12, 2014, 10:31am

Hallo,

auf meiner HP habe ich eine OSM-Karte und wollte ein neues Aufklapp-Menü (JS) implementieren.
Leider stören sich die beiden Scripte gegeneinander.

Auf meiner Index-Seite habe ich den Funktionsaufruf für das Menü im Kopfbereich und alles funktioniert einwandfrei, da keine Karte vorhanden ist…
Rufe ich jedoch die Seite mit der OSM-Karte, funktioniert das Menü nicht mehr - klappt nicht mehr auf bzw. zu.

Verschiebe ich den Funktionsaufruf für das Menü in den body-Bereich, funktioniert das Menü aber meine Karte wird nicht mehr aufgebaut.

Das Menü rufe ich mit window.onload auf, die Karte mit body onload - vielleicht liegt hier die Ursache für die Unverträglichkeit.
Kann mir bitte wieder jemand helfen?

Der Code.

<?php
error_reporting(E_ALL);
include("config2.php");
include("galerie/mysql.php");
?>
<!DOCTYPE html >
<html>
<head>
<title>ThemaOSM</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="" />
<meta name="viewport" content="width=device-width" />
<link rel="shortcut icon" href="images/favicon2.ico" type="image/x-icon">
<link href="styles/style.css" type="text/css" rel="stylesheet" />

<!-- 
***************** AUF-/ZU- Klapp-Menü +++++++++++++++++++++
-->

<link rel="stylesheet" type="text/css" href="sdmenu/sdmenu.css" />
<script type="text/javascript" src="sdmenu/sdmenu.js">

/***********************************************
* Slashdot Menu script- By DimX
* Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

<script type="text/javascript">
// <![CDATA[
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
// ]]>
</script>

<!-- 
+++++++++++++++++++++ Open Street Map ++++++++++++++++++++
--> 
    
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript" src="site.js"></script>

</head>

<body onload=" drawmap();" >
    
+
+
+

</body>
</html>

couchmapper · February 12, 2014, 12:20pm

Und wo ist der Rest?

Im Ernst, bitte Link zur Seite, zur Not auch irgendwo beim Freehoster hochladen.
Mit dem Schnipsel oben wird dir hier kaum jemand weiterhelfen können.

Hardyy · February 12, 2014, 12:50pm

Der Rest bzw. kpl. Code der Thema-Seite mit Karte:

<?php
error_reporting(E_ALL);
include("config2.php");
include("galerie/mysql.php");
?>
<!DOCTYPE html >
<html>
<head>
<title>ThemaOSM</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="" />
<meta name="viewport" content="width=device-width" />
<link rel="shortcut icon" href="images/favicon2.ico" type="image/x-icon">
<link href="styles/style.css" type="text/css" rel="stylesheet" />

<!-- 
***************** AUF-/ZU- Klapp-Menü +++++++++++++++++++++
-->

<link rel="stylesheet" type="text/css" href="sdmenu/sdmenu.css" />
<script type="text/javascript" src="sdmenu/sdmenu.js">

/***********************************************
* Slashdot Menu script- By DimX
* Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

<script type="text/javascript">
// <![CDATA[
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
// ]]>
</script>

<!-- 
+++++++++++++++++++++ Open Street Map ++++++++++++++++++++
--> 
    
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript" src="site.js"></script>

</head>

<body onload=" drawmap();" >
    
    <?php
    // Abfrage der Fensterabmessungen und Neuaufbau
    include ("includes/fensterabm.js");
    ?>
    
<div  id="side">

<script type="text/javascript">
/* Anpassen an die neue Fensterabmessungen */
    box=document.getElementById("side");
    box.style.height=(0.98*Hoehe-0)+"px";
</script>

    <?php
    // Linke Spalte mit Wetter-Vorschau und Menü 
    include ("includes/columnleft.html");
    ?>
    
    <!-- Mittlerer Bereich 50% -->
    <div class="zentriert" id="content50" >

     <script type="text/javascript">
     /* Anpassen an die neue Fensterabmessungen */
        box=document.getElementById("content50");
        box.style.height=(1.0*Hoehe-0)+"px"; 
     </script>

    <!--  Seiten-Logo -->
        <div align="center" id="content-top"> 
	
	    <script type="text/javascript">
           box=document.getElementById("content-top");
           box.style.height=(0.16*Hoehe+40)+"px";
           </script> 
                   
        <a  href="index.php"><img class="scale" src="images/PanoramaBurg1atransp.png"  width=70% height=14.75% alt="PRAHA"></a>
        
        <!--  Horizontal-Menü -->
        <?php
        include ("includes/menu-top.html");
        ?> 
        </div> <!-- content-top -->
        
    <?php    
    // Aufbau der Karte
    include ("includes/mapthema.html");
    
      // Kartenkoordinaten und Zoom aus der Datenbank
      $sql = "
        SELECT        
         thema.c_lon AS zlon,
         thema.c_lat AS zlat,
         thema.zoom AS Ausschnitt         
        FROM
                thema
        WHERE
                thema.ID = '".$_GET['id']."'
         ";
        $result = mysql_query($sql) OR die("<pre>".$sql."</pre>".mysql_error());
        while($row = mysql_fetch_assoc($result)){
        $zone=$row;                
        }

      $sql = "
        SELECT
            alben.ID AS AID,        
            alben.Name AS Bild,
            alben.lon AS mlon,
            alben.lat AS mlat,
            alben.Beschreibung AS Objekt            
        FROM
            alben
        JOIN
            thema_alben
        ON
            alben.ID =  thema_alben.alben_ID
        JOIN
            thema
        ON
            thema.ID = thema_alben.thema_ID
         AND
            thema.ID = '".$_GET['id']."'
         ORDER BY
            Objekt ASC
        ";
       
      $result = mysql_query($sql) OR die("<pre>".$sql."</pre>".mysql_error());
      if(!mysql_num_rows($result)){
          echo "<p>\n".
               "Es befinden sich keine Alben in der Datenbank\n".
               "</p>\n";
      }
      
      while($row = mysql_fetch_assoc($result)){
        $marker_lon[]=$row['mlon'];
        $marker_lat[]=$row['mlat'];           
        $Name[]=$row['Bild'];
        $ID[]=$row['AID'];
}        
?>
               
<script type="text/javascript">

//<![CDATA[var layer_tah;

var layer_markers;

// Position des Markers - Variablen aus PHP einfügen

var map;
var layer_mapnik;
var album = new Array();
var album = <?php echo json_encode($ID); ?>;
var bem = new Array();
var bem = <?php echo json_encode($Name); ?>;
var m_lon = new Array();               
var m_lon = <?php echo json_encode($marker_lon); ?>;
var m_lat = new Array();
var m_lat = <?php echo json_encode($marker_lat); ?>;

//Position und Zoomstufe der Karte

var lon = "<?php echo $zone['zlon']; ?>";
var lat = "<?php echo $zone['zlat']; ?>";   
var zoom = "<?php echo $zone['Ausschnitt']; ?>";

function drawmap() {

// Popup und Popuptext mit evtl. Grafik

var popuptext = new Array();
for (var i=0; i<bem.length; i++){  
popuptext[i] ='<font color=green size=2em><b>'+bem[i]+'</b><br /><a href="albenosm.php?id='+album[i]+'">Album ansehen<a></font>';
}

    OpenLayers.Lang.setCode('de');
   
    map = new OpenLayers.Map('map', {
        projection: new OpenLayers.Projection("EPSG:900913"),
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        controls: [
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.PanZoomBar()],
        maxExtent:
            new OpenLayers.Bounds(-20037508.34,-20037508.34,
                                   20037508.34, 20037508.34),
        numZoomLevels: 18,
        maxResolution: 156543,
        units: 'meters'
    });

    layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
    layer_markers = new OpenLayers.Layer.Markers("Address", { projection: new OpenLayers.Projection("EPSG:4326"), 
    	                                          visibility: true, displayInLayerSwitcher: false });
    // Karte Zentrieren und Zomm-Stufe

    map.addLayers([layer_mapnik, layer_markers]);
    jumpTo(lon, +lat, zoom);
    
    // Position des Markers 
   
    for (var i=0; i<m_lon.length; i++ ){      
    addMarker(layer_markers, m_lon[i], +m_lat[i], popuptext[i]);    
    }     
}
//]]>
    </script>        
    </div><!-- content50 --> 
    
    <!-- Rechte Spalte 35% -->
    <div id="columnright35">    
    
    <script type="text/javascript">
    /* Anpassen an die neue Fensterabmessungen */
        box=document.getElementById("columnright35");
        box.style.height=(1.0*Hoehe -0)+"px";    
    </script>
   
    <!-- Thema-Tittelbild aus der Datenbank -->
        <div id="headerright">
        <script type="text/javascript">
        box=document.getElementById("headerright");
        box.style.height=(0.20*Hoehe)+"px";
        </script> 

    <?php
    $sql = "
        SELECT
                Thema_ID,
                Name
        FROM
                fotos
        WHERE
                Thema_ID = '".$_GET['id']."'
         ";
        $result = mysql_query($sql) OR die("<pre>".$sql."</pre>".mysql_error());
        
        while($row = mysql_fetch_assoc($result)){               
        $titelbild=$row['Name'];
        }
       
    echo "<img class='scale' src='fotos/$titelbild' width=100% height=21% alt='Titelbild'>"; 
    ?>         
        </div><!-- haederright-->
        
     <!-- Thema-Beschreibung und Albenübersicht aus der Datenbank -->   
     	<div id="sidebar">
     	<script type="text/javascript">
        box=document.getElementById("sidebar");
        box.style.height=(0.79*Hoehe-30)+"px";
        </script>

            <?php
            include("includes/themagaleriesidebar.php");
            ?>
        </div><!-- sidebar -->            
    </div><!-- columnright--> 
</div><!--side-->

<div style="clear: both;"></div>
           
</body>
</html>

Zu sehen unter:

Index-Seite ohne Karte http://cz-prag.de/ - hier funktioniert das Menü!
Thema-Seite mit Karte http://cz-prag.de/themaosm.php?id=3 - hier nicht
Albenseite mit Karte http://cz-prag.de/albenosm.php?id=21 - hier auch nicht

Im Augenblick sind im Menü nur diese Auswahen wirksam → Ansicht - Burgviertel, Plätze und Brücken

wambacher · February 12, 2014, 12:54pm

Stimmt!

@Hardyy: Übrigens würde ich mich mal näher mit jQuery beschäftigen. Ist eine klasse Javascript-Lib für alles mögliche - auch Menus. Macht einem das Leben leichter und verträgt sich prima mit OpenLayers.

Gruss
walter

maxbe · February 12, 2014, 4:16pm

Ich finde gerade keinen Beleg dafür, bin mir aber recht sicher, dass window.onload und “<body onload=…” der gleiche Event ist, kann auch vom Browser abhängen. Da kann es nur einen davon geben. Ich würde myMenu = new SDMenu(“my_menu”); myMenu.init(); entweder an den Anfang oder an das Ende von drawmap(); schreiben. Oder drawmap() in die window.onload-Funktion.

Übrigens wirst Du in die gleiche Falle wie hier fallen: Du hast eine globale Variable “map” und ein div mit der id “map”. Das steht zwar genau so in ganz vielen Seiten, die gerne abgeschrieben werden, ist aber seit einiger Zeit mit Chrome, IE und einigen Operas nicht verträglich. Einfach das div umbenennen.

Grüße, Max

Hardyy · February 12, 2014, 6:13pm

Danke für alle Zuschriften!

Vielen Dank, das war’s. Habe drowmap() in die Window.onload-Funktion hineingeschrieben und es funktioniert alles. Hätte ich eigentlich auch draufkommen können - aber manchmal die lange Leitung!
Mit der globalen Variablen ‘map’ gibt es im Augenblick in Chrom. Opera und IE keine Probleme aber vorsichtshalber werde ich das ‘div’ umbenennen.

Gruß Hardy