Zusammenarbeit mit einer sql Datenbank und PHP

Hallo,

erstmal muss ich loswerden dass das hier ein geniales Projekt ist. Habe mich selten so für etwas begeistern können.

Nun habe ich das ganze gleich mal auf einer Webseite umgesetzt und stoße dabei auf ein Problem. Wenn ich mir eine Karte mit festgelegten Koordinaten anzeigen lasse funktioniert das super.

Nur wie kann ich das ganze umsetzten wenn ich die Koordinaten aus einer Datenbankabfrage hole?

Ich kann ja nicht einfach die Werte durch die Variablen ersetzten oder?

Wie kann ich denn im folgenden Code meine Koordinaten an “var lon” und “var lat” per PHP übergeben?

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>Mike Helm<br>Schmitzweg<br>Berlin</b><p><img src=\"test.jpg\" width=\"180\"     height=\"113

\"></p></font>";

  
  
    OpenLayers.Lang.setCode('de');


    
    // Position und Zoomstufe der Karte

    var lon = 13.31817;
    
    var lat = 52.5100325;
    
    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: 18,

            maxResolution: 156543,

            units: 'meters'
        });

Danke schonmal im voraus und nur weiter so.

Mitch

    // Position und Zoomstufe der Karte

    var lon = <?php echo $lon; ?>;
    
    var lat =  <?php echo $lat; ?>;

Wie waere es damit?

Hallo E-Malte,

sowas hatte ich mir auch gedacht, funktioniert aber nicht.

Es kann vielleich daran liegen dass das Script im Header geschrieben steht?!?

Ich bekomme keine Resultate wenn ich dort mittels PHP eine sql Abfrage starte.

Mitch

Moin,

schau doch mal in den Quelltext, was dort für Werte stehen, wenn die Seite durch PHP gelaufen ist. Die Webseite weiß von PHP nichts mehr und das Javascript auch nicht. Eventuell stimmt das Zahlenformat nicht.

Zum Testen kann man die Variablen in PHP mit den statischen Werten aus deinem Test belegen. Das muss dann funktionieren.

Viele Grüße
Frank

Hallo FS0903,

Ich komme da nicht ganz mit.

Ich Poste mal meinen Code damit Du sehen kannst was ich bisher fabriziert habe.:wink:

<!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>

              


</head>  
<body>  
  <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

                       DB-Verbindung;

          ?>

<?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';


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

$i += '1';

$long = $row['long'];
$lat = $row['lat'];
echo $long;
echo $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>

<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 = 4;

    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: 12,
        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, 13.40606, 52.53794, popuptext);

}

//]]>
    </script>

           <div class="c66r">
              <div class="subcr">
              <!--Ab hier das rechte subcolum füllen-->
              <body onload=drawmap();>

  <div id="header">
  <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>

Mitch

Moin,

ich meinte zwar den Quelltext der generierten HTML-Seite, aber ok :slight_smile:

So als Schwachstelle fällt mir erstmal so auf, dass die Variablen u.U. leer sein können, wenn die DB-Abfrage nichts zurückliefert. Und ich gehe mal davon aus, dass die Abfrage nur einen Datensatz zurückliefert? Sont überschreiben sich die Werte schön immer selber.

Von einigen “Schweinen” im Code abgesehen, sollte das aber so funktionieren :wink:

Viele Grüße
Frank

Hallo FS0903,

schön das es Funktionieren sollte :smiley:

Bei mir klappt es nicht.

Also die Variablen sind aus der Abfrahe vorhanden.

Ich lasse sie mir mittels

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

auf der Webseite darstellen.

Nur die Karte zeigt mir den Ort (Berlin) nicht an. Ich bekomme eine Karte dir mir den Mittelmeerraum zeigt. Ich bin da nichtmal annähernd bei Berlin.

Also scheinen doch die Daten nicht übergeben zu werden oder?

Was sind denn übrigens die Schweine???

Mitch

PS: Einen Fehler habe ich schon, meine Zoom-Stufe war zu Hoch. Nun zeigt er mir Berlin an nur leider ein paar Kilometer daneben. Und komischweise immer den gleichen Standort.

Hallo Mitch, gib doch einfach mal die long/lat mittels Alert im Javascript aus, dann kannst Du prüfen ob Sie im Javascript zu dem Zeitpunkt vorhanden sind.

so ähnlich:
alert(“lon/lat = <?php echo $lon $lat ?>”);

Gruss Zapfen

Mh, schreibe doch mal unter: echo “”;

$long = 13.31817;
$lat = 52.5100325;

Damit die Werte aus der DB überschrieben werden. Das sollte die Seite wieder angezeigen, sie entspricht ja dann deinem statischen Beispiel. Ansonsten, wie gesagt, Quelltext im Browser aufmachen. Vieles sieht man dann schon, was nicht direkt dargestellt wird.

Edit zu spät gesehen. Die Schweine? Nunja, man trennt Code und Darstellung. In deiner Schleife wird $i hochgezählt, aber nicht benutzt. $i ist eine Zahl, da nimmt man auch Zahlen und keine Zeichenketten. Zahlen erhöht man mit $i++ (soll performanter sein…keine Ahnung, ob das schonmal einer ausgetestet hat ;))

Sowas halt.

Viele Grüße
Frank

Hallo Mitch,
Die Variablen sind nur innerhalb der mzsql-fetch-assoc-Schleife belegt. Setz vor die Schleife ein $long = $lat = 0.0; , dann sollte es funktionieren
Gruss,
Malte

Sollte mich wundern. PHP hat sich da nicht so :wink:
Die Variablen sind jetzt vorbelegt, das sollte aber sein Problem nicht lösen.

Von programmiertechnischen ist das aber richtig.

Viele Grüße
Frank

Juhu im Quelltext stehen jetzt die richtigen Koordinaten.
Nicht Juhu die Position auf der Karte ist immernoch dieselbe (falsche).

Seltsam ist das es genau die Position ist die ich am Andang des Post als Testwerte mal eingegeben hatte.

Wo zieht er sich die jetzt her?

Und wieso arbeit die Karte nicht mit den Ihr zugewiesenen Daten.

Anbei der 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>

              


</head>  
<body>  
  <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>
              
              
<table border='1' class='objekte'> <tr>
  <td>
 Strasse
  </td>
 <td>

 Hausnunmmer
 </td>
 </tr>
13.36603752.584953 <tr>
  <td>
 <a href="link.php?id=">Hertzstraße</a>
  </td>
 <td>
15
 </td>

 </tr>
</table>
              </div>
           </div>

<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 = 13.366037;
    var lat = 52.584953;
    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, 13.40606, 52.53794, popuptext);

}

//]]>
    </script>

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

              <body onload=drawmap();>

  <div id="header">
  <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>

PS: Danke für die Schweinehinweise, der Code ist jetzt noch ordentlich unaufgeräumt. Wird nacher alles noch überarbeitet.

Mitch

Alles zurück!!!

Es Funktioniert jetzt richtig richtig.

Das Problem war das ich den “layer_markers” mit festen Koordinaten belegt hatte. Damit konnte die Karte immer nur einen Ort anzeigen.

Danke für die hilfreichen Hinweise.

Mitch

Hallo Mitch, wie wäre es mit einem WIKI-Eintrag als Anleitung für deine Umsetzung?
Eventuell als Ergänzung zur Seite OSM-Anwendungen.
Wenn ich mir die Hits auf deinen Thread anschaue, scheint hier doch einiges Interesse vorhanden zu sein.
Ich finde es immer schön wenn sich “Spezialisten” dazu aufraffen können andere User, die (noch) nicht so tief inder Materie stecken, an ihrem Wissen zu beteiligen.
Hierfür wäre IMHO die o.g. WIKI-Seite ideal geeignet, oder? :slight_smile:
Georg

Wichtig ist es auf jeden Fall zu wissen, dass PHP nur den Quelltext generiert, der zum Browser gesendet wird. Wenn da also bei der Darstellung etwas falsch läuft, dann musst du dir den Quelltext im Browser ansehen, und dort den Fehler suchen. Mit der Darstellung selber hat PHP nichts zu tun.

Kommt drauf an, wie man es programmiert. Aktuell bastle ich mir einen Renderer in Flash. Dann ist Flash für die Anzeige verantwortlich. Ev. programmiere ich mir den gleichen Renderer aber auch noch in PHP. PHP kann ebenfalls Grafiken erstellen. Dann bekommt der Browser nur noch ein fertiges Bildchen geliefert. Dann ist PHP für die korrekte Darstellung der OSM-Daten verantwortlich.

Hallo deedee3, halt mich (uns) doch mal auf dem Laufenden. :slight_smile: Bin sehr daran interessiert aber leider (noch) nicht fit genug in der Richtung (php).
Georg

Hallo Georg,

Das meiner Meinung nach größte Problem ist, dass PHP keine wirklich vernünftigen Grafik-Anbindungen hat.
-GDLib2 unterstützt sowohl Antialiasing als auch Linienbreite, Linienstil etc meiner Meinung nach nur unzureichend.
-Cairo (die Rendering-Library die Mapnik nutzt) ist nicht vollständig als PHP-binding implementiert.
Weitere Grafik-APIs für PHP sind mir nicht bekannt.

Dann bleibt noch das Problem der Geschwindigkeit. PHP ist extrem langsam im Vergleich zu anderen (auch Server-) Programmiersprachen.
Ich benutze Python mit Cairo für mein Rendering (allerdings bisher nicht auf einem Server), Gary68 nutzt Perl mit GDLib(2?).
Ein weiterer Vorteil von Python ist, dass es auch Mapnik-bindings für Python gibt, sodass man theoretisch nichtmal einen Renderer basteln muss. Mapnik unterstützt inzwischen auch per Plugin (noch beta?) direkt OSM-Dateien und ist in C++ geschrieben, sodass das die zeitgünstigste und wahrscheinlich auch schnellste Möglichkeit sein sollte.

EDIT: Eins habe ich noch vergessen:
-SVG kann man natürlich mit fast jeder Programmiersprache erzeugen. Allerdings kann Mapnik auch das. Ansonsten könnte auch das eine gute Lösung sein, ist halt nur wieder die Browser-Frage…

Grüße,
Malte

Ok, du hast natürlich Recht. Da hab ich mich falsch ausgedrückt… Für die funktionstüchtigkeit von OpenLayers ist PHP nicht verantwortlich. In dem Fall muss PHP nur den richtigen Quellcode generieren.