Ich arbeite gerade an einem Informationssystem welches Popup Features darstellen soll.
Zu einem sollen per select-hover die Popups ersscheinend und zum anderen soll durch das Klicken des Feature ein weiteres Informationfenster aufgehen.
Nun gibt es ja das SelectFeature Control welches select bzw hover event verwaltet.
Eigentlich funktioniert es… das Problem ist nur, dass das Klick-Event sehr schlecht reagiert!
Solange das Popup durch das Hover geöffnet ist lässt sich das Feature nicht anklicken. Man muss mit der Maus so lange am Feature rumfuchteln bis das Popup verschwindet und dann erst reagiert das select/klick.
Ich weiß, dass wenn man das Select vor dem Hover aktiviert reagiert das Select überhaupt nicht. In der richtigen Reihenfolge angewendet ist es nicht Benutzerfreundlich bzw. nicht akzeptabel.
var mouseoverfeature = new OpenLayers.Control.SelectFeature(kml, {
hover:true,
onSelect: onFeatureOver,
onUnselect: onFeatureOut
});
map.addControl(mouseoverfeature);
mouseoverfeature.activate();
var mouseselectfeature = new OpenLayers.Control.SelectFeature(kml, {
onSelect: onFeatureSelect
});
map.addControl(mouseselectfeature);
mouseselectfeature.activate();
function onFeatureOver(feature) {
var selectedFeature = feature;
var popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(100,100),
"<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description,
null, true, onPopupClose
);
feature.popup = popup;
map.addPopup(popup);
}
function onFeatureOut(feature) {
if(feature.popup) {
map.removePopup(feature.popup);
feature.popup.destroy();
delete feature.popup;
}
}
function onFeatureSelect(feature) {
//zeige weitere informationen
}
Ich hoffe ihr kennt einen Trick damit das Select flüssig abläuft. Würde mir sehr viel helfen!!
schau dir mal diese Diskussion an. Ich habs nicht ausprobiert, aber meines Wissens ist der Code von dort in die Nahverkehrskarte gewandert und ist dort zu besichtigen.
Ich habe lange versucht diesen Lösungsansatz für meine Zwecke zu nutzen hat jedoch nicht so geklappt. Ein Problem wäre, dass ich aller Marker und Popups inkl. Inhalt per KML lade.
Konnte mir einfach nicht vorstellen, dass es nicht möglich ist von Hover und Select sauber zu unterscheiden. Ich habe mir dieses Beispiel nochmal angeschaut http://openlayers.org/dev/examples/highlight-feature.html und bin meiner Lösung schon ein stück weiter!
function onFeatureOver(evt) {
var feature = evt.feature;
if(!feature.popup){
var popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(100,100),
"<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description,
null, true
);
feature.popup = popup;
map.addPopup(popup);
}
}
function onFeatureOut(evt) {
var feature = evt.feature;
if(feature.popup) {
map.removePopup(feature.popup);
feature.popup.destroy();
delete feature.popup;
}
}
function onFeatureSelect(feature) {
if(feature.popup) {
map.removePopup(feature.popup);
feature.popup.destroy();
delete feature.popup;
}
//hier wird ein sliding window erstellt welches detailierte infos anzeigt
}
var mouseoverfeature = new OpenLayers.Control.SelectFeature(kml, {
hover:true,
highlightOnly: true, //wichtig!
eventListeners:{
featurehighlighted:onFeatureOver,
featureunhighlighted: onFeatureOut
}
});
map.addControl(mouseoverfeature);
mouseoverfeature.activate();
var mouseselectfeature = new OpenLayers.Control.SelectFeature(kml, {
clickout:true,
onSelect: onFeatureSelect
});
map.addControl(mouseselectfeature);
mouseselectfeature.activate();
Somit unterscheidet er zumindest schonmal zwischen hover und select. Jedoch erscheint mir etwas Rätselhaft… Wenn ich den Marker anklicke führt er onFeatureSelect aus. Wenn ich dann nochmal über den selben Marker ein Hover erzeuge, scheint er den onFeatureOut nicht mehr auszuführen und das Popup bleibt angezeigt. Erst wenn man einen anderen Marker anklickt, reagiert das Hover vom 1. Marker wieder normal. Als würde das Event sich reseten.
Noch eine Kleinigkeit. Wie setzt man sauber einen Offset für das FramedCloud? Was das Popup nämlich vom Marker bedeckt reagiert nicht auf das Select, löst man aber sicherlich mit einem offset.
Das basiert auf dem gleichen Prinzip wie die Nahverkehrskarte. Kann ich bei mir leider nicht verwenden.
Der Trick bei diesem Patch ist, dass er beim Hover das Klick automatisch mit auslöst. Das ist jedoch auf keinem Fall wünschenswert weil mit dem Klick ein großes Fenster aufgeht.
Das externe FeaturePopups Control scheint eine Alternative zu sein ja. Werde ich jedoch erst versuchen sollte ich keine Lösung zum Problem finden, dass das Popup nach dem Klicken des Markers sich nicht mehr schließt.
Zusammen mit dem Anchor, einer fixen Popup Position (zb oben Rechts) lässt sich der Marker nun endlich vernünftig klicken ohne, dass ein Popup im weg ist.
popup.calculateRelativePosition = function () {
return 'tr';
}
Man könnte sich natürlich die Mühe machen eine relative Position zu setzen wenn die FramedCloud entweder nach oben oder unten zeigt.
Das letzte Problem bleibt jedoch… Wenn man den Marker klickt, öffnet sich das große Informationsfenster. Wenn man danach wieder über den selber Marker fährt, erstellt das Hover den Popup, schließt dieses jedoch nicht mehr beim verlassen des Zeigers.
Erst wenn man einen 2. Marker anklickt reagiert das Hover des 1. Marker wieder sauber.
Dazu kann ich leider nichts sagen. Ich habs aufgegeben, da selbst was zu basteln, nachdem ich festgestellt habe, dass es bei toggle=true und Features übereinander (Polygon + LineString) auch wieder Probleme gibt.