Popup als Marker

Communities Deutschland (Germany)
1

Hallo,

ich erstelle auf folgende Weise ein Popup welches bei Klick auf den Marker erscheint:

onSelect : function(event) {
// Text erstellen
popup = new OpenLayers.Popup("feature",
	event.geometry.getBounds().getCenterLonLat(),
	null,
	text,
	event.marker,
	true,
	function(b) {
		if (event.layer == null) {
			event.layer = evt;
			evt = null;
		}
		selectControl.unselect(event);
	});
popup.setBorder("solid 1px #999999");
popup.addCloseBox(function(b) {
	if (event.layer == null) {
		event.layer = evt;
		evt = null;
	}
	selectControl.unselect(event);
});
event.popup = popup;
this.map.addPopup(popup);
popup.updateSize();
popup.panIntoView();
}

Dieses Popup wird auf verschiedenen Kartenansichten verwendet. Nun ist gewollt, dass in einer Ansicht (wo immer nur ein POI zu sehen ist) nicht der Marker sondern direkt das Popup angezeigt wird. Dieses Popup soll dann wie bei FramedCloud eine Ausbuchtung habe die auf die entsprechende Stelle zeigt. Dabei soll das Popup mittig über dem POI angezeigt werden. Das Ganze soll also ein wenig so wie bei Facebook aussehen.

Wie bekomme ich diese drei Features hin? Bin da gerade etwas ratlos und konnte auch nichts bei meiner Recherche dazu erfahren. (Blöd, wenn einem nicht die richtigen Suchbegriffe einfallen.)
Den Marker nicht anzeigen bekomme ich noch hin, aber nicht das der Popup bereits angezeigt wird.

2

Das Popup öffnen müsste indirekt gehen, indem der Marker selektiert wird (nicht getestet):


selectControl.select(marker);

Das hab ich bei OpenLayers noch nicht gesehen, nur bei Leaflet, falls Du sowas meinst. Die “Nase” ist per CSS erstellt, indem ein quadratisches div um 45 Grad gedreht wird, siehe leaflet.css.

Beim Popup.Anchored kann man ein anchor Objekt mit offset angeben. Wenn man eine fixe Größe nimmt oder die Größe des Popup divs abfrägt, müsste man den Popup damit auch mittig anzeigen können.

Gruß,
Norbert

3

Das da malt eine Karte um 11,48 und klebt in die Mitte ein Popup:

var map = new OpenLayers.Map('map');
map.addLayer(new OpenLayers.Layer.OSM("Mapnik"));
map.setCenter(new OpenLayers.LonLat(11,48).transform(new OpenLayers.Projection("EPSG:4326"),
                      new OpenLayers.Projection("EPSG:900913")),6);      
var popup = new OpenLayers.Popup("MeinErsterMarker",
                           new OpenLayers.LonLat(11,48).transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913")),      
                           null,
                           "Blabla Blupp<br>Lorem Ipsum"
                    );
map.addPopup(popup);
popup.updateSize();

allerdings viereckig, ohne Verzierung, nichtmal ein Kreuzchen zum Schließen ist da. Auch kein Marker. Vielleicht ein Anfang… :wink:

Grüße, Max

4

Danke schonmal für die Hilfe.
Werde das alles mal testen.
Habe nur gerade etwas wichtigeres rein bekommen das zuerst erledigt werden muss.

5

So, die “Nase” sieht gut aus und das Popup ist an der richtigen Stelle.
Aber das mit dem gleich Anzeigen will nicht.

console.log(clubs);
console.log(clubs.features);
if (clubs.features.length == 1) {
	selectControl.select(clubs.features[0]);
}

Die Ausgabe von “clubs” sagt mir, dass ein Fearute vorhanden ist, aber “clubs.features” liefert ein leeres Result zurück, also [].

Sieht jemand den Fehler?
Oder gibt es noch eine andere Möglichkeit an der Stelle an das Feature heran zu kommen?
Die Zeilen stehen bei mir erstmal am Ende der init(). Kann ja sein, dass ich das einfach nur an der falschen Stelle stehen habe.

6

Ohne die Ausgabe kann ich nur raten: Du schreibst oben, dass Du den Marker nicht anzeigst, könnte das Feature deshalb in unrenderedFeatures statt features stehen, falls Du das per Styling machst?

7

Ist schwer die Ausgabe vernünftig zu kopieren.
Wenn ich im FireBug in der Konsole auf den Eintrag klicke bekomme ich unter anderem dies hier:
“features
[Object { layer={…}, data={…}, id=“OpenLayers.Feature.Vector_3298”, mehr…}]”

Noch zeige ich den Marker an, damit ich überhaupt was von dem Punkt sehe, kann also auch nicht das Problem sein.

8

Das Problem ist vermutlich, dass die Vektordaten asynchron geladen werden und am Ende von init() noch nicht da sind. Dann müsste der Code durch Registrieren eines loadend Events erst nach dem Laden ausgeführt werden:


clubs.events.register("loadend", clubs,
  function() {
     if (this.visibility) {
        ...
     }
 }
);

Als Erklärung für die Ausgabe könnte ich mir vorstellen, dass Firebug die Werte erst beim Anschauen - also nach dem Laden - holt. Das könntest Du mit


console.log(JSON.stringify(clubs));

verifizieren.

Edit: lvector → clubs

9

Perfekt, das war des Rätsels Lösung.
Danke, für die schnelle Hilfe.