Dynamic Markers für POIs aus Postgresdatenbank

JimK · 29. Dez 2011

Hallo,

ich bin gerade dabei mich an einem WMS auszuprobieren. Dafür habe ich mir eine Postgres/Postgis Datenbank aufgebaut, mit OSM Daten gefüttert und einen Basic Layer mit Geoserver erstellt.
Jetzt würde ich mir gerne die POI's "Pub" auf der Map als Marker anzeigen lassen so wie bei googlemaps, wenn man etwas sucht.
Dazu habe ich folgendes gefunden, aber ich komme nicht mit der Anleitung klar:

http://wiki.openstreetmap.org/wiki/OpenLa ...

Könnt ihr mir weiterhelfen und mir sagen wie ich es schaffe die Marker in meiner Seite einzubetten?

Weiterhin habe ich auch keine Ahnung von Webprogrammierung. face-sad Aber folgendes habe ich schon mal geschrieben um meine Karte anzeigen zu lassen.

HTML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="de" />
<title>Beispiel OpenStreetMap mit Markern</title>
<!-- OpenLayers JavaScript-Bibliothek laden
         (hier wird die JavaScript-Datei direkt vom Server geladen, 
          man kann sie aber auch auf den eigenen Server speichern) --> 
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script> 
<!-- OpenStreetMap OpenLayers-Layers laden
         (hier wird die JavaScript-Datei direkt vom Server geladen, 
          man kann sie aber auch auf den eigenen Server speichern) --> 
<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script> 
<script type="text/javascript"> 
<!--
        var map;
 
        function init(){
            map = new OpenLayers.Map('map',
                    { maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34), // Maximale Ausdehnung der Karte
                      numZoomLevels: 19, // Zoom Level
                      maxResolution: 156543.0399, // Maximale Auflösung
                      units: 'm', // Einheit
                      projection: new OpenLayers.Projection("EPSG:900913"), // Kartenprojektion
                      displayProjection: new OpenLayers.Projection("EPSG:4326")
                    });
            // Basis-Karten definieren, hier sind "Mapnik und Osmarender die Basiskarten
			// andere Basiskarten können einfach als Auswahl dazugefügt werden
            // weitere Basiskarten: OpenLayers.Layer.OSM.Maplint oder OpenLayers.Layer.OSM.CycleMap
            var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
			
			var sa = new OpenLayers.Layer.WMS(
                "Karte",
                "http://localhost:8080/geoserver/wms?",
                {layers: "Sachsen-Anhalt"}
            ); 
 
           
 
            map.addLayer(sa);
            // Marker / POI's (Points of interest) hinzufügen
            var pois = new OpenLayers.Layer.Text( "Marker",
                    { location:"./textfile.txt",
                      projection: map.displayProjection
                    });
            map.addLayer(pois);
 
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            // Karte ausrichten
            var lonLat = new OpenLayers.LonLat(11.00,52.00).transform(map.displayProjection,  map.projection);
            map.setCenter (lonLat, 5); // Zoomstufe einstellen
        }
        // -->

</script> 
</head>
<!-- body.onload is called once the page is loaded (call the 'init' function) --> 
<body onload="init();"> 
<h1>Beispiel OpenStreetMap mit Markern</h1>
<div style="width:600px; height:400px" id="map"></div> 
<p>Powered by <a href="http://wiki.openstreetmap.org/index.php/Openlayers_POI_layer_example" title="Openlayers POI layer example">Openlayers POI layer example</a> &amp; <a href="http://www.ogee.de/openstreetmap/">ogee.de/openstreetmaps</a></p>
</body>
</html>

Evil-Devil · 31. Dez 2011

Die Seite ist falsch verlinkt 🙁

JimK · 1. Jan 2012

Hallo und ein gesundes neues Jahr.

Sorry, wegen der Verlinkung.
Das ist die Seite:
OpenLayers Dynamic POI - OpenStreetMap Wiki

Aber ich habe auch noch folgende gefunden:
PHP/MySQL mit Google Maps verwenden - GoogleÂ*MapsÂ*API-Familie - Google Code

Ich habe jetzt bist jetzt schonmal soweit geschafft, dass ich mir eine xnl aus der Datenbank mit den benötigten Informationen ziehe, aber ich bekomme die Marker noch nicht angezeigt. 🙁

Code für XML:

PHP:

<?php

// create doctype
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node); 
header("Content-Type: text/plain");


 // attempt a connection
 $dbh = pg_connect("host=+++++ port=+++++ dbname=+++++ user=+++++ password=+++++");
 if (!$dbh) {
     die("Error in connection: " . pg_last_error());
 }       

 // execute query
 $sql = "SELECT * , astext(geom) FROM poi where type='pub'";
 $result = pg_query($dbh, $sql);
 if (!$result) {
     die("Error in SQL query: " . pg_last_error());
 } 


 // iterate over result set
 // print each row
    for ($i=0; $i<pg_numrows($result); $i++) {
    $my_label=pg_result($result, $i, 'name');
    $my_location = pg_result($result, $i, 'type');
	$my_info = pg_result($result, $i, 'id');

    // extract the geometry
    $geometry = str_replace("POINT(","", pg_result($result, $g, 'astext'));
    $geometry = str_replace(")","",$geometry);
    $coordinate = explode(" ",$geometry);
    $lon=$coordinate[0];
    $lat=$coordinate[1];
	
		
	$node = $dom->createElement("marker");  
  $newnode = $parnode->appendChild($node);   
  $newnode->setAttribute("name",$my_label);
  $newnode->setAttribute("address", $my_info);  
  $newnode->setAttribute("lat", $coordinate[1]);  
  $newnode->setAttribute("lng", $coordinate[0]);  
  $newnode->setAttribute("type", $my_location);
	
	
}	
echo $dom->saveXML();
 // free memory
 pg_free_result($result);       

 // close connection
 pg_close($dbh);
 ?>

Weiß auch nicht wie ich die in meine Karte bekomme. 🙁

Evil-Devil · 2. Jan 2012

Hast du das PHP TUtorial zu Ende gelesen? Da wird an sich alles erklärt und gezeigt. Am Ende steht eine Karte mit Markern.

Wo jetzt das eigentliche Problem besteht ist weiterhin unklar. Ist deine XML korrekt, wird die XML geladen, wird Maps angezeigt, etc?

HimBromBeere · 10. Jan 2012

Wenn du sowieso schon einen GeoServer benutzt, warum haust du dann deine POIs nicht dar drauf, sondern in eine eigene Datenbank. Lad die doch gleich wie sie sind auf´n GeoServer, dann brauchste kein PHP-Skript dazwischen...

JimK · 16. Jan 2012

Hallo,

ich habe jetzt mein php script mit dem ich eine xml erstelle:

PHP:

 <?php

 // attempt a connection
 $dbh = pg_connect("host=**** port=**** dbname=**** user=**** password=****");
 if (!$dbh) {
     die("Error in connection: " . pg_last_error());
 }       

 // execute query
 $sql = "SELECT * , astext(geom) FROM poi where type='pub'";
 $result = pg_query($dbh, $sql);
 if (!$result) {
     die("Error in SQL query: " . pg_last_error());
 } 
 
$output = "<shapes>";


 // iterate over result set
 // print each row
 while ($row = pg_fetch_array($result)){
$output .="<pt  name=\"".$row['name']."\"";
$output .=" type= \"".$row['type']."\"";

$geometry=$row['astext'];


$search =array("POINT(", ")") ;
$replace =array("", "");

$test= str_replace($search,$replace, $geometry. "\n");

  $coords = explode(" ", $test );
$lat=$coords[0];
$lon=$coords[1];
$output .=" x= \"".$lat."\""." y= \"".$lon."\""."/>";



/**


    $output . = $row['type'];
	$output .= $row['id'];

    // extract the geometry
    $geometry = str_replace("POINT(","", pg_result($result, $g, 'astext'));
    $output .= str_replace(")","",$geometry);
    $coordinate = explode(" ",$geometry);
    $lon=$coordinate[0];
    $lat=$coordinate[1];
	$output .=$lat;
	$output .=$lon;
	
}	
echo $output;**/
}

$output .= "</shapes>";

   $fh = fopen('test1.xml', 'w');
   fwrite($fh, $output);

echo $output;
 ?>

wenn ich jetzt meine html karte öffne, dann werde mit die poi's angezeigt.

HTML:

<!DOCTYPE html>
<html>
<head>
<title>XML example w/ sidebar</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="downloadxml.js"></script>
<script type="text/javascript">
  var infoWindow = new google.maps.InfoWindow();
  var markers = [];

  function myclick(num) {
    google.maps.event.trigger(markers[num], "click");
  }

  function createMarker(point,info,map) {
    var iconURL = 'mm_20_blue.png';				var iconSize = new google.maps.Size(20,34);
    var iconOrigin = new google.maps.Point(0,0);	var iconAnchor = new google.maps.Point(10,34);

    var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor);

    var shadowURL = 'mm_20_shadow.png';			var shadowSize = new google.maps.Size(35, 34);
    var shadowOrigin = new google.maps.Point(0, 0);	var shadowAnchor = new google.maps.Point(10, 33);

    var myShadow = new google.maps.MarkerImage(shadowURL, shadowSize, shadowOrigin, shadowAnchor);

    var iconShape = [8,33, 4,15, 1,15, 0,12, 0,5, 6,0, 12,0, 19,14, 15,15, 10,33];
    var myMarkerShape = {
      coord: iconShape,
      type: 'poly'
    };

    var myMarkerOpts = {
      position: point,
      map: map,
      icon: myIcon,
      shadow: myShadow,
      shape: myMarkerShape
    };

    var marker = new google.maps.Marker(myMarkerOpts);

    markers.push(marker);

    google.maps.event.addListener(marker, 'click', function() {
      infoWindow.close();
      infoWindow.setContent(info);
      infoWindow.open(map,marker); 
    });
  }
  

  function initialize() {
    var latlng = new google.maps.LatLng(51.2024729,11.9509495);

    var mapOpts = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOpts);

    downloadUrl("reb2php.php", function(data) {
      var xmlDoc = xmlParse(data);
      var records = xmlDoc.getElementsByTagName("pt");
      var side_html = "";

      for (var i = 0; i < records.length; i++) {
        var rec = records[i];

        var name = rec.getAttribute("name");
        var pop = rec.getAttribute("type");
        var lat = parseFloat(rec.getAttribute("y"));
        var lng = parseFloat(rec.getAttribute("x"));

        var pt = new google.maps.LatLng(lat, lng);

        var html = "<strong>" + name + "</strong><br />" + pop;
        side_html += '<a href="javascript:myclick(' + i + ')">' + 
                     name + '</a><br />';
        createMarker(pt,html,map);
      }

      document.getElementById("side_bar").innerHTML = side_html;
    });
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width: 800px; height: 600px; 
	position: absolute; left: 10px"></div>

  <div id="side_bar" style="width: 200px; 
	position: absolute; left: 830px"></div>
</body>

</html>

jetzt habe ich nur noch ein problem. wie schreibe ich die html zur kartenanzeige für openlayers statt für googlemaps?
das ganze hat folgenden grund. ich habe meinen eigenen server und würde gerne auch meine eigenen layer aus dem geoserver verwenden.
kann mir jemand weiterhelfen?

lg
JimK

HimBromBeere · 16. Jan 2012

dafür musst du natürlich die OpenLayers-Bibliothek erstmal einbinden:

Code:

<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>

Dann mjusst du dir einen neuen layer bauen vom Typ WFS oder WMS (genau Syntax weiß ich grad nicht, irgendwas der Form OpenLayers.layer.WMS bzw. OpenLayers.Vector), wobei WFS etwas umständlich ist (Stichwort Same origin policy).

Soviel erstmal in aller Kürze

JimK · 17. Jan 2012

Hallo,

vielen danke für eure Geduld.
Ich habe mich jetzt an das Beispiel von OpenLayer gehalten und die Karte wird mir auch angezeigt, aber eben mit der Markern aus einer txt Datei.

HTML:

                <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="de" />
<title>Beispiel OpenStreetMap mit Markern</title>
<!-- OpenLayers JavaScript-Bibliothek laden
         (hier wird die JavaScript-Datei direkt vom Server geladen, 
          man kann sie aber auch auf den eigenen Server speichern) --> 
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script> 
<!-- OpenStreetMap OpenLayers-Layers laden
         (hier wird die JavaScript-Datei direkt vom Server geladen, 
          man kann sie aber auch auf den eigenen Server speichern) --> 
<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script> 
<script type="text/javascript"> 
<!--
        var map;
 
        function init(){
            map = new OpenLayers.Map('map',
                    { maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34), // Maximale Ausdehnung der Karte
                      numZoomLevels: 19, // Zoom Level
                      maxResolution: 156543.0399, // Maximale Auflösung
                      units: 'm', // Einheit
                      projection: new OpenLayers.Projection("EPSG:900913"), // Kartenprojektion
                      displayProjection: new OpenLayers.Projection("EPSG:4326")
                    });
            // Basis-Karten definieren, hier sind "Mapnik und Osmarender die Basiskarten
			// andere Basiskarten können einfach als Auswahl dazugefügt werden
            // weitere Basiskarten: OpenLayers.Layer.OSM.Maplint oder OpenLayers.Layer.OSM.CycleMap
            var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
 
            var sa = new OpenLayers.Layer.WMS(
                "Karte",
                "http://****:****/geoserver/wms?",
                {layers: "Sachsen-Anhalt"}
            ); 
 
            map.addLayer(sa);
            // Marker / POI's (Points of interest) hinzufügen
            var pois = new OpenLayers.Layer.Text( "Marker",
                    { location:"textfile.txt",
                      projection: map.displayProjection
                    });
            map.addLayer(pois);
 
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            // Karte ausrichten
            var lonLat = new OpenLayers.LonLat(11.00,52.00).transform(map.displayProjection,  map.projection);
            map.setCenter (lonLat, 8); // Zoomstufe einstellen
        }
        // -->

</script> 
</head>
<!-- body.onload is called once the page is loaded (call the 'init' function) --> 

<body onload="init();"> 
<h1>Beispiel OpenStreetMap mit Markern</h1>
<div style="width:600px; height:400px" id="map"></div> 
<p>Powered by <a href="http://wiki.openstreetmap.org/index.php/Openlayers_POI_layer_example" title="Openlayers POI layer example">Openlayers POI layer example</a> &amp; <a href="http://www.ogee.de/openstreetmap/">ogee.de/openstreetmaps</a></p>
</body>
</html>

Ich glaube auch das Prinzip dieser Marker zu verstehen. Soweit ich verstanden habe, muss ich eine Schleife bauen, die die Marker erstellt und in ein Marker Array speichert. So wie hier aus meinem Googlequellcode. Leider weiß ich nicht, wie ich jetzt diesen Googlequellcode für Openlayers schreibe, so das ich auch endlich solche tollen Marker mit Popups habe. 🙁 Ich habe noch keine passenden Beispiele von OpenLayers für mein Problem gefunden.
Ich muss nur noch irgendwie die Marker mit Popups in meine OpenLayers Karte bringen und damit tu ich mich irgendwie schwer. 🙁
Ich weiß einfach nicht wie ich die xml mit OpenLayers auslese und dann die Marker erstelle.

HimBromBeere · 17. Jan 2012

Hatte ich auch das Problem, das macht man nicht mal so nebenher...

Also ich wüde dir empfehlen, wenn du bisher die marker als txt da hattest bzw. die sowieso nie verändert werden, die Punkte auch auf´n Geoserver als eigenen Layer hichzuladen. Dann kannst du sie auch selbst signaturieren (mit mehr Gestaltungsmöglichkeiten als diese "tollen" Marker, die dir Google vorgibt...)

Dynamic Markers für POIs aus Postgresdatenbank

JimK

Bekanntes Mitglied

Evil-Devil

Top Contributor

JimK

Bekanntes Mitglied

Evil-Devil

Top Contributor

HimBromBeere

Top Contributor

JimK

Bekanntes Mitglied

HimBromBeere

Top Contributor

JimK

Bekanntes Mitglied

HimBromBeere

Top Contributor

Aktuelle Jobs

Neue Themen

Ähnliche Themen