Dynamic Markers für POIs aus Postgresdatenbank

J

JimK

Bekanntes Mitglied
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>
 
J

JimK

Bekanntes Mitglied
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

Evil-Devil

Top Contributor
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?
 
H

HimBromBeere

Top Contributor
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...
 
J

JimK

Bekanntes Mitglied
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
 
H

HimBromBeere

Top Contributor
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
 
J

JimK

Bekanntes Mitglied
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.
 
Zuletzt bearbeitet:
H

HimBromBeere

Top Contributor
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...)
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
B Javascript Tutorial für DOM Manipulationen? Angular, React, JQuery - Fragen zu JavaScript 0
R Die Typisierung Service[] ergibt für mich keinen Sinn Angular, React, JQuery - Fragen zu JavaScript 5
Q Typsichers Binding für matSortDirection Angular, React, JQuery - Fragen zu JavaScript 10
N Cookies setzen für Verzeichnis Angular, React, JQuery - Fragen zu JavaScript 4
N Überprüfungsbutton für ein Eingabeformular erstellen Angular, React, JQuery - Fragen zu JavaScript 16
B PullDown erstellen für webseite? Angular, React, JQuery - Fragen zu JavaScript 12
X NegaMax für TicTacToe in JS gewinnt nicht... Angular, React, JQuery - Fragen zu JavaScript 11
P Bildschirmtastatur für Spiele Angular, React, JQuery - Fragen zu JavaScript 6
M Mit Ajax Daten als Eingabe für Dyngraph erzeugen Angular, React, JQuery - Fragen zu JavaScript 6
L [JavaScript] Mehrere Variablen für Live-Suche in MySql-DB Angular, React, JQuery - Fragen zu JavaScript 0
A Hilfe für guten Zweck Angular, React, JQuery - Fragen zu JavaScript 6
J Lese Webseite aus für LinkPreview Angular, React, JQuery - Fragen zu JavaScript 1
A Script für Benachrichtigung Angular, React, JQuery - Fragen zu JavaScript 9
S Suche Lösung für einen Slider mit Textverlinkung Angular, React, JQuery - Fragen zu JavaScript 2
L Suche D3 Tutorial (speziell für Sunburst-Darstellung...) Angular, React, JQuery - Fragen zu JavaScript 2
H Javascript für wordpress "open new window" Angular, React, JQuery - Fragen zu JavaScript 1
N JavaScript für Touch Devices bei DropDown Menü Angular, React, JQuery - Fragen zu JavaScript 4
F Schnellen Browser für HTML mit JS drin. Angular, React, JQuery - Fragen zu JavaScript 6
Fab1 [SUCHE] JavaScript Buch für Umsteiger Angular, React, JQuery - Fragen zu JavaScript 4
K Webapp für Iphone Safari Browser und Links Angular, React, JQuery - Fragen zu JavaScript 6
H HTML5 basierter Client für Webkartendienste auf Smartphones Angular, React, JQuery - Fragen zu JavaScript 2
F Dropdownmenü für JavaScript Angular, React, JQuery - Fragen zu JavaScript 5
S OnKlick für alle Objekte gleicher Art Angular, React, JQuery - Fragen zu JavaScript 17
H Gadgeterweitung für Kostal Piko Angular, React, JQuery - Fragen zu JavaScript 5
R Anleitung für einen Konfetti Regen Angular, React, JQuery - Fragen zu JavaScript 9
D Kontrollkästchen/Checkbox automatisch aktivieren ! (für Profis) JavaScript Angular, React, JQuery - Fragen zu JavaScript 4
S Javascript für Teamvergabe gesucht. Angular, React, JQuery - Fragen zu JavaScript 4
S Skript für Greasemonkey Angular, React, JQuery - Fragen zu JavaScript 3
C Play und Stop-Error für Musik Angular, React, JQuery - Fragen zu JavaScript 4
A Programmierer für "kleines" Javaprogramm gesucht Angular, React, JQuery - Fragen zu JavaScript 2
G finde Einstellmöglichkeiten für Menue nicht. Angular, React, JQuery - Fragen zu JavaScript 2
M Hilfe gesucht für ein Projekt Angular, React, JQuery - Fragen zu JavaScript 1
K Suche Scrollscript für Objekte Angular, React, JQuery - Fragen zu JavaScript 3
E Fragen zu java Navigation für Internetseite Angular, React, JQuery - Fragen zu JavaScript 2
T Höhe und Breite übergeben für IE! Angular, React, JQuery - Fragen zu JavaScript 2
L Dauerlaufzeile mit Fotos für html Angular, React, JQuery - Fragen zu JavaScript 2
B Einen Timer für Windows Angular, React, JQuery - Fragen zu JavaScript 4
M Script für Namen? Angular, React, JQuery - Fragen zu JavaScript 5
D Inputfeld für Preiseingabe Angular, React, JQuery - Fragen zu JavaScript 6
K Fragen für Praktikum-aber keine Ahnung! Angular, React, JQuery - Fragen zu JavaScript 4
B Zähler für Eingabefeld Angular, React, JQuery - Fragen zu JavaScript 5
D 5 € Musicload Gutschein für Antwort: Formular mit JavaScript Angular, React, JQuery - Fragen zu JavaScript 10
N Java Refresh-Script für Java-Newb Angular, React, JQuery - Fragen zu JavaScript 4
K Bild soll nach 5 Sekunden für 5 Sekunden erscheinen Angular, React, JQuery - Fragen zu JavaScript 5
S Skript für Bannerwechsel Angular, React, JQuery - Fragen zu JavaScript 3
N Java script für detailierten Text anzeigen gesucht Angular, React, JQuery - Fragen zu JavaScript 4
A Timeoutfunktion für JavaScript Angular, React, JQuery - Fragen zu JavaScript 2

Ähnliche Java Themen

Aktuelle Jobs

Neue Themen


Oben