Fehler beim Anzeigen der Karte auf eigener Webseite

Mitch26 · June 18, 2009, 10:42am

Hallo und einen wunderschönen guten Tag,

ich habe mal die Anleitung unter http://wiki.openstreetmap.org/wiki/Die_HTML_Dateien umgesetzt und diese an einer Datenbankabfrage angebunden (Wiki-Eintrag folgt dann noch).

Nun wird mir diese Karte angezeigt und auch die richtigen Koordinaten werden darauf dargestellt (OK noch nicht mittig aber es geht).

Nun zu meinem Problem:

wenn ich in der Karte Zoome dann funktioniert das auch nur wird dadurch die Karte von ihrem Umfang auf der Webseite ummer größer.
Das heißt ich das meine Seite immer länger wird. Ist natürlich nicht mein Ziel

Bei den Testseiten http://wiki.openstreetmap.org/wiki/Die_HTML_Dateien funktioniert es einwandfrei.

Woran kann das liegen das die Karten nicht in ihren vorgegebenen Maßen bleibt?

Die Fehlerkonsole von FireFox gibt mir viele viele Fehler aus, die ich nicht wirklich nachvollziehen kann.

Wer sich das ganze mal anschauen möchte geht auf http://das-deutschlandnetz.de/test2/test4/vierte.php?id=393 und dort mal inder Karte zoomen.

Danke schonmal im voraus

Mitch

Mitch26 · June 18, 2009, 11:11am

Dachte es läge an der falsch verlinkten CSS-Datei aber das war es nicht.

Mitch

nilix · June 18, 2009, 12:42pm

[...]
<body onload=drawmap();>
[...]

Das ist bei dir doppelt. Scheinbar muss dieses direkt in den eigentlichen body-tag. Kenn mich mit HTML aber auch nicht wirklich aus.

Mitch26 · June 18, 2009, 12:53pm

Hallo nilix,

ich habe es mal probiert aber es bringt leider keine Ã„nderung.

Obwohl du recht hast in der Testversion steht es nur einmal drin. Nur leider behebt es dieses Problem bei mir nicht.

Danke

MaikB · June 18, 2009, 1:55pm

Setz den Javascript-Teil mal vor den body-tag in den head-Bereich direkt unter

Gruß
Maik

Mitch26 · June 18, 2009, 2:08pm

Hallo MaikB

habe ich gemacht und dann wird mir die Karte garnicht mehr angezeigt.

Im IE wir mir die Fehlermeldung ausgegeben das ein Objekt erwartet wird.

Vielleicht hiflt das ja weiter.

Mitch

S-A-L · June 18, 2009, 2:15pm

Naja, deine XHTML-Datei ist ziemlich verhunzt. XHTML ist ziemlich streng was die richtige Syntax angeht.
Eine (X)HTML-Datei ist immer so aufgebaut:

XML-Version
Docttype
Kennzeichnung das ab hier HTML beginnt ()
Kopfbereich ( )
“Körpter” ( )
Kennzeichnung, dass das HTML hier endet()
Siehe: http://de.selfhtml.org/html/allgemein/grundgeruest.htm

Du verwendest 2mal body, erst im zweiten body wird die Funtion DrawMap (onload=“drawmap()” ) aufgerufen, kann gut sein, dass ihn das verwirrt. Opera z.b. zeigt hier gar nichts an weil es kein korrektes XHTML ist.

den ganzen Scriptteil ab hier:

<script type="text/javascript">
//<![CDATA[

var map;
var layer_mapnik;
var layer_tah;
var layer_markers;[/code]
setzt du am besten in den head Bereich
und das onload= in den ersten body, den zweiten löschst du.

... Auf gut Deutsch: machs einfach haar genau so wie in der Anleitung beschrieben ;)

geh deinen ganzen Code nochmal durch und überprüf die Syntax. Ich weiss nicht wie gut du dich inHTML auskennst, aber wenn du alles so machst wie es in der Anleitung steht, sollte es rein theoretisch gehn (habs selbst noch nie gemacht, aber sie sieht mir richtig aus ;) )

MaikB · June 18, 2009, 2:21pm

Bei mir wird die Karte auch jetzt nicht angezeigt (FF 3.5 RC)

Gruß

Mitch26 · June 18, 2009, 2:23pm

Hallo S-A-L

direkt umgesetzt, aber leider funtioniert das auch nicht. Ich habe den Quelltext so geschrieben weil vorher noch bestimmte Datenbankabfragen erstellt werden usw.

Also mein Vermutung ist ja das es an der Positionierung liegt denn beim größerwerden der Karte Zentriert die Karte ja auf meinen roten Punkt, der vorher ja, fälschlicherweise, ganz oben auf der Karte angezeit wird.

Die Frage ist nur warum?

Ein genauso komischer Effekt ist es auch das wenn ich auf den Link der Straße gehen das dann die Karte verschwindet.

S-A-L · June 18, 2009, 2:30pm

Also falls du es schon hochgeladen hast seh ich zumindets noch keine wesentliche Veränderung am Quelltext. Es gibt immernoch zwei bodys und das script steht auch noch nicht im head-bereich.

Wenn ich deinen aktuellen mal sehn könnt, könnt ich dir evtl. weiterhelfen

Akrisios · June 18, 2009, 2:31pm

das Dokument hat nicht nur zwei , sondern auch zwei

s, die beide “header” als id tragen, was per Definition nicht erlaubt ist

Mitch26 · June 18, 2009, 2:33pm

Oh entschuldige ich hatte es gleich wieder Rückgängig gemacht.

Nun hat es den Stand nach deiner Empfehlung.

Und anbei hier noch mal der gesamte Quelltext:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
<head>  
<title>Your Page Title</title>  
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /> 
<meta http-equiv="Content-Style-Type" content="text/css" /> 
<!-- add your meta tags here -->  
<meta http-equiv="content-script-type" content="text/javascript" />  
<link href="css/my_layout.css" rel="stylesheet" type="text/css" />
<link href="yaml/screen/forms.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>  
<link href="css/patches/patch_my_layout.css" rel="stylesheet" type="text/css" /> 
<link rel="stylesheet" type="text/css" href="ie_map.css"> 
<![endif]--> 
 
<!--dient zur Darstellung der Karte und der Koordinaten-->
<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="tom.js"></script>

<script type="text/javascript">
//<![CDATA[

var map;
var layer_mapnik;
var layer_tah;
var layer_markers;

function drawmap() {
    // Popup und Popuptext mit evtl. Grafik
    var popuptext="<font color=\"black\"><b>Thomas Heiles<br>Straße 123<br>54290 Trier</b><p><img src=\"test.jpg\" width=\"180\" height=\"113\"></p></font>";

    OpenLayers.Lang.setCode('de');
 
    // Position und Zoomstufe der Karte
    var lon = <?php echo $long; ?>;
    var lat = <?php echo $lat; ?>;
    var zoom = 15;

    map = new OpenLayers.Map('map', {
        projection: new OpenLayers.Projection("EPSG:900913"),
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        controls: [
            new OpenLayers.Control.MouseDefaults(),
            new OpenLayers.Control.LayerSwitcher(),
            new OpenLayers.Control.PanZoomBar()],
        maxExtent:
            new OpenLayers.Bounds(-20037508.34,-20037508.34,
                                    20037508.34, 20037508.34),
        numZoomLevels: 15,
        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 });

    map.addLayers([layer_mapnik, layer_markers]);
    jumpTo(lon, lat, zoom);
 
    // Position des Markers
    addMarker(layer_markers, lon, lat, popuptext);

}

//]]>
    </script>           


</head>  
 <body onload="drawmap()";>
  <div class="page_margins">  
     <div class="page">  
      <div id="header">
        <div class="subcolumns">  
              <div class="c33l">  
                 <div class="subcl">
                 <a href="http://das-deutschlandnetz.de/test2/test4/vorlage.php"><img src="images/logo.jpg" alt="Das-Deutschlandnetz.de" /></a>
                 </div>
              </div> 
              <div class="c66r">
                 <div class="subcr">
                 <img src="images/banner.jpg" alt="Das-Deutschlandnetz.de" align="middle"/>
                 </div>
              </div>             
         </div>        
        <div id="topnav">  
          <a class="skip" title="skip link" href="#navigation">Skip to the navigation</a><span class="hideme">.</span>  
          <a class="skip" title="skip link" href="#content">Skip to the content</a><span class="hideme">.</span><a href="#">Login</a> | <a href="#">Contact</a> | <a href="#">Imprint</a>  
         </div>  
      </div>  
       
      <div id="main">  
        <div id="col1">  
          <div id="col1_content" class="clearfix">  
            <!-- add your content here -->  
            <div class="subcolumns">
               <div class="c33l">
                  <div class="subcl">
            <h2>Objekt</h2>
              
              <?php

             require_once("xxx");
                         mysql_connect("xxx","xxx","xxx");
                         mysql_select_db("xxx");
          ?>

<?php

    echo "<table border='1' class='objekte'>";

    echo " <tr>\n";

    echo "  <td>\n";

    echo " Strasse\n";

    echo "  </td>\n";

    echo " <td>\n";

    echo " Hausnunmmer\n";

    echo " </td>\n";   

    echo " </tr>\n";

    
         $sql = "SELECT

                         * 
                 FROM 

                     tbl_objekt 

                 WHERE 

                     obj_nr = '".mysql_real_escape_string($_GET['id'])."'


                ";

    $result = mysql_query($sql) OR die("<pre>\n".$sql."</pre>\n".mysql_error());

$i=0;

$long = 0.0;
$lat = 0.0;

    while ($row = mysql_fetch_assoc($result)) {

$long = $row['long'];
$lat = $row['lat'];

      
        echo " <tr>\n";

        echo "  <td>\n";

        echo " <a href=\"link.php?id=".$row['id']."\">".$row['strasse']."</a>\n";

        echo "  </td>\n";

        echo " <td>\n";

        echo $row['hnr']."\n";
 
        echo " </td>\n";

        echo " </tr>\n";

    }
 
        echo "</table>";

?>

              </div>
           </div>


           <div class="c66r">
              <div class="subcr">
              <!--Ab hier das rechte subcolum füllen-->


  <div id="header2">
  <div id="content">Karte (Testversion)</div>
  <div id="osm">Mit freundlicher Unterstützung von <a href="http://www.openstreetmap.org" 
title="www.openstreetmap.org">openstreetmap.org</a></div>
  </div>
  
  <div id="map">
  </div>
              </div>
           </div>
        </div>       
 
          </div>  
        </div>  
        <div id="col3">  
          <div id="col3_content" class="clearfix">  
            <!-- add your content here -->
            <a href="http://das-deutschlandnetz.de/test2/test4/vorlage.php"><img src="images/werbung/werbung.bmp" alt="werbung" /></a>    
          </div>  
          <div id="ie_clearing">    </div>  
        </div>  
      </div>  
      <div id="footer">Layout based on <a href="http://www.yaml.de/">YAML</a>  
      </div>  
    </div>  
  </div>  
</body>  
</html>

Akrisios · June 18, 2009, 2:37pm

bei muss dass Semikolon hinter drawmap noch weg.

Mitch26 · June 18, 2009, 2:38pm

Hallo Akrisios,

das Semikolon ist aber im Originalquelltext vorhanden.

Habe es aber trotzdem mal rausgenommen → Keine Karte

Akrisios · June 18, 2009, 2:42pm

du hast aber jetzt auch die Anführungszeichen geklaut

schreib mal genau das:

<body onload="drawmap()">

//Edit: ich hab mir grad die Originalquelle angeschaut:

da ist das Semikolon da, aber die Anführungszeichen nicht - wenn dann musst du dich schon genau an das halten, was da steht (wobei ich nicht weiß, ob das dann funktioniert)

Mitch26 · June 18, 2009, 2:44pm

Ok Webseite ist Valide (Juhu)

Aber immernoch keine Karte. (nicht Juhu)

Akrisios · June 18, 2009, 2:47pm

soo, jetzt haben wir nur noch das Problem, dass dir YAML ja schon einen div mit id=header erzeugt hat, jetzt hast du das div mit der header-id, das du für die karte brauchst, in header 2 umbenannt.
dann musst du das im CSS auch machen

//Edit: ich hab die CSS grade angeschaut…das tut nichts zur Sache…hm.

Doch mal alle Quellen ansehn.

Mitch26 · June 18, 2009, 2:48pm

ok auch getan. (logische Konsequenz)

Aber immernoch keine Karte (Je öfter man das sagt umso seltsamer klingt es )

S-A-L · June 18, 2009, 2:50pm

Also bei mir steht da noch

<body onload="drawmap(">

Da fehlt eine Klammer

Mitch26 · June 18, 2009, 2:52pm

Mist, stimmt.

Ich seh den Wald vor lauter Bäumen nicht mehr.

AikK.