POI mit Popup

Hi,

ich möchte auf einer OSM-Karte POIs mit einem Icon markieren. Per Popup sollen außerdem weitere Attribute aus der Datenbank eingeblendet werden. Ungefähr so habe ich mir das vorgestellt [1].

Bisher habe ich einen Layer erstellt und in der Mapfile wird nach den Tags selektiert. Die Icons werden afu diese Weise auch auf der Karte dargestellt (PointSymbolizer). Lässt sich auch dieses Popup mit meinem bisherigen Ansatz umsetzen?

Ich habe mir schon OpenLayers (Marker, Vector) näher angeschaut. Aber wie werden denn die Daten aus der Datenbank in das Popup übergeben?

Gruß
Chris

[1] http://www.tappenbeck.net/osm/maps/deu/index.php?id=1016

Im einfachsten Fall geht das über Text/CSV Files, etwas aufwändiger ist es die Daten aus einer DB zu ziehen.
Ein Stichwort wäre noch die “Clustering Strategie”. Einfach mal die bestehenden OpenLayers Beispiele
studieren, bei Netzwolf gibt’s ein paar Nette Sachen.
http://www.netzwolf.info/kartografie/openlayers/

PBF → CSV Filter … wer kennt da gut die auch mit europa.pbf funktionieren ?

Dirk

Ich habe mir jetzt einige Beispiele angeschaut. Was aber nicht beschrieben ist, wie wird eine txt / csv / kml Datei generiert?

Dirk, warum fragst Du nicht direkt die Overpass-API ab, statt sich durch ganz Europa durch zu quälen?

Je nachdem wie Du die Daten vorliegen hast, wenn es wenige sind, kannst einfach eine Datei analog des Beispiels unter (http://wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example) oder wenn es ein bisschen komplexer wird dann generierst Du die Javascript Befehle aus der Datenbank (ich habe ein Adventsfenster-Karte auf meiner HP, ab dem 1. Dezember brennt die Kerzen bei dem Haus, das an diesem Tag das Adventsfenster veranstaltet, bei den Häuser, die schon einen Termin veranstaltet haben, sind die Kerzen abgebrannt (also ab dem 2.12. mal bei http://www.familieverweyen.de/advent.php vorbei schauen), den Code könnte ich Dir zur Verfügung stellen). Wenn die Daten aus der OSM-Datenbank kommen (z.B. alle Stolpersteine) kann man diese wie oben erwähnt auch mit der Overpass-API (http://wiki.openstreetmap.org/wiki/Overpass_API) abfragen und darstellen.

Georg V.

Hi Georg,

ich möchte zwei verschiedene Tags auf einer Karte anzeigen und beziehe meine Daten aus einer lokalen OSM-Datenbank. Aktuell sind es ca. 300 Datensätze. Alles in zwei CSV/Txt-Dateien umzuwandeln scheint ja nicht zu gehen bzw. wäre zu aufwendig, wenn ich diese von Hand erstellen müsste. Also bliebe nur die Möglichkeit, mittels Overpass-API auf die Daten zugreifen?

Christian

Warum machst du es dir so komplziert? Du kannst doch via Php aus der Datenbank ein CSV File erstellen. Das ist ja nichts anderes als ein mit Trennzeichen versehenes Textdokument. Der Vorteil bei der Datenbank wäre dann noch, dass du der Abfrage eine Boundingbox mitgeben kannst du dem Browser dann nicht 300 POIs zumutest sondern nur die aktuell sichtbaren. Noch cleverer wäre es wenn du mit Mapnik beim rendern gleich die Json Dateien miterstellst. Das Zauberwort hier heißt MarkersSymbolysizer.
Allerdings stellt Mapnik gerade alles auf 2.0 um und so ist die Dokumenttaion wenig brauchbar. Die alten Seiten wurden im übrigen aus alle gelöscht. Einfach abwarten.

Muss die CSV-Datei einen speziellen Aufbau haben, wie das bei der Textdatei der Fall ist? Finde dazu keine Informationen. Wenn ich noch Bilder im Popup ausgeben will, dann sind doch TXT / CSV eher ungeeignet?

schaust du hier: http://wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example#textfile.txt steht übrigens alles weiter oben schon.

Ich denke mit CSV ist die Textdatei gemeint, da diese Tab-separiert ist. Die description Spalte kann HTML enthalten, also auch img Tags, um Bilder anzuzeigen. Die müssen dann halt unter der entsprechenden URL hinterlegt sein. Das HTML für das Popup musst du in diesem Fall eben schon im serverseitigen Script beim Erstellen der Textdatei zusammenbauen.

Gruß,
ikonor

Hier ein Beispiel: http://karte.berlin-platz.de/?amenity=hostel
Dazu die CSV-Datei: http://karte.berlin-platz.de/files/hostel.txt

Danke, habe es jetzt verstanden. Das Beispiel mit den Hostels in Berlin gefällt mir gut.

Ich habe mir die POIs mittels der Overpass API besorgt und liegen nun im XML-Format vor. Gibt es eventuell bereits fertige Skripte, um die Daten in csv zu konvertieren?

Wenn Du nicht aus der Datenbank liest, sondern die Daten schon im OSM XML-Format vorliegen hast, dann kannst Du die Datei direkt mit OpenLayers einlesen, eine Konvertierung ist nicht nötig. Statt einem Text Layer verwendest Du dafür einen Vector Layer, das Popup Handling muss dann halt selbst gemacht werden.

Als Ausgangsbeispiel gibt es das OpenLayers osm file example im Wiki.

Für den Popup fügst Du dann noch diesen Code vor der Zeile “function init(){” hinzu (entnommen aus OpenLayers Beispiel Open Popup on Layer.Vector):

var selectControl;
var selectedFeature;
function onPopupClose(evt) {
    selectControl.unselect(selectedFeature);
}
function onFeatureSelect(feature) {
    selectedFeature = feature;
    var tags = feature.attributes;
    var infoHtml = "<table>";
    for (var key in tags) {
       infoHtml += "<tr><td>" + key + "</td><td>" + tags[key] + "</td></tr>";
    }
    infoHtml += "</table>";
    popup = new OpenLayers.Popup.FramedCloud("chicken", 
                             feature.geometry.getBounds().getCenterLonLat(),
                             null,
                             infoHtml,
                             null, true, onPopupClose);
    feature.popup = popup;
    map.addPopup(popup);
}
function onFeatureUnselect(feature) {
    map.removePopup(feature.popup);
    feature.popup.destroy();
    feature.popup = null;
}

und bindest das nach der Zeile “map.addLayers([layer]);” noch mit ein:

var options = { hover: false, onSelect: onFeatureSelect, onUnselect: onFeatureUnselect };
selectControl = new OpenLayers.Control.SelectFeature(layer, options);
map.addControl(selectControl);
selectControl.activate();

Danke, funktioniert sehr gut. Ein winziges Problem habe ich mit den Umlauten. In FF / Chrome werden diese im Popup nicht dargestellt und im IE (egal welche Version) erscheinen erst gar nicht die Marker. Meine HTML-Datei sieht wie folgt aus:

Anfang der osm-xml-Datei:

Habe ich noch etwas vergessen?

Die XML Datei müsste auch ohne extra Angaben in utf-8 eingelesen werden. Dazu muss die Datei aber auch in utf-8 kodiert sein. Das lässt sich mit einem Editor wie z.B. Notepad++ prüfen.

Zum IE Problem: rufst Du die html im lokalen Filesystem, also z.B. per Doppelklick mit file:/// URL auf? Da erlauben es einige Browser wegen der Same-Origin Policy nicht, Dateien per Javascript nachzuladen (eigentlich auch der Chrome?). Im IE kann man das glaube ich konfigurieren, sonst eben über lokalen Webserver gehen.

Funktioniert jetzt alles, nochmals danke für den Support und die Geduld!