[halLEipzig] Dynamic Marker in Website einbinden

Do Dez 29 15:06:52 CET 2011

Hallo,

ich bin neu und weiß noch gar nicht so richtig wie das hier alles 
funktioniert, aber ich hoffe, dass ihr mir helfen könnt.

Ich habe mit eine Postgres/Postgis Datenbank erstellt und mit OSM Daten 
gefüttert. Danach habe ich mir einen BasicLayer mit Geoserver erstellt 
und in einer Website eingebettet. Der HTML Code sieht momentan so aus:

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

Jetzt zu meiner Frage. Wie kann ich bewerkstelligen, dass ich Marker für POI's in meiner Karte habe und das, wenn ich sie anklicke, Informationen anzeigen?
Dazu habe ich schon folgendes gefunden, aber irgendwie steige ich nicht dahinter. :( Ich habe leider noch keine große Ahnung von Webdesign.

http://wiki.openstreetmap.org/wiki/OpenLayers_Dynamic_POI

Schon mal einen großen Dank für eure Hilfe.

Liebe Grüße
Sebastian