OpenLayers - Hinttext setzen

_i · October 18, 2011, 6:30pm

Moin,

ich suche bereits seit einer Stunde eine Möglichkeit beim drüberfahren mit der Maus den gewohnten Tooltiptext zu setzen, leider scheint es da keine vorgefertigte Möglichkeit zu geben, oder?
Ich habe mir mal www.openflights.org angeschaut und der hat sehr komische Hilfsmethoden: [http://openflights.org/js/utilities.js?version=20090326\"](http://openflights.org/js/utilities.js?version=20090326\)

Hat jemand von euch vlt. sowas schon mal genutzt und könnte mir einen Tip geben?

Hobby_Navigator · October 19, 2011, 5:37am

Schau doch mal bei Netzwolf vorbei, eventuell wirst du hier http://www.netzwolf.info/kartografie/openlayers/csv_angepasst oder in seinen anderen Beispielen fündig.
Georg

ajoessen · October 19, 2011, 6:17am

Hi,

schau dir mal meine Stromleitungsbeispiele an:
http://powerland.bplaced.net/bl/4511.htm

In der ShowGPX.js gibts da was passendes, wenn man mit der Maus über die Linie fährt.
Stammt aber nicht von mir

Gruß,
ajoessen

_i · October 19, 2011, 7:30am

Danke für die Antworten

Ja das Snippet habe ich schon mal irgendwo gesehen ahoessen Ich wehre mich ja immer dagegen einfach irgendwelchen Code einfach rein zu kopieren aber es scheint wohl wirklich nicht einfacher zu gehen grml

wambacher · October 19, 2011, 7:58am

moin moin,

mach ich manchmal auch so.
Zur Not den Schnipsel einbauen, noch mal gut ansehen und dann laufen lassen.
Einige Wochen später nochmal querlesen und dann “dämmert” es langsam. (*)
Learning by doing

Gruss
walter

*) manchmal auch erst beim 3. mal

ikonor · October 19, 2011, 9:00am

Bei Polymaps gibt es ein Beispiel mit echtem Tooltip. Da wird ein “title” Tag zum SVG Element hinzugefügt (siehe auch Doku), das manche Browser dann automatisch als Tooltip anzeigen. Funktioniert im Chrome, aber leider nicht im Firefox.

Von daher bleibt als einfache Möglichkeit nur die hässlichen OpenLayers Popups. Ansonsten halt selbst programmieren oder Snippets kopieren

_i · May 20, 2012, 10:35am

In der 2.12 wird es übrigens das ganz einfach als title=* property geben http://openlayers.org/dev/examples/vector-features.html

Netzwolf · May 20, 2012, 3:55pm

Nahmd,

Das kannst Du Dir mit ein paar Erweiterungszeilen bei der Einrichtung des SelectFeature leicht einrichten:


selectControl = new OpenLayers.Control.SelectFeature([track], {

        hover:true,
        highlightOnly:true,

        setMap: function(){
               OpenLayers.Control.SelectFeature.prototype.setMap.apply(this,arguments);
               this.map.events.register('mousemove', this, function(evt) {
                       this.lastXy = evt.xy;
               });
        },

        lastXy: null,

        overFeature:function(feature){
                if (!this.lastXy) return;
                this.div.innerHTML = feature.layer.title;
                this.div.style.display = 'block';
                this.div.style.left= (this.lastXy.x + 20) + 'px';
                this.div.style.top = (this.lastXy.y +  0) + 'px';
         },

        outFeature:function(feature){
                 this.div.style.display='none';
        }
});

map.addControl(selectControl);
selectControl.activate();

Den gewünschten Text als ‘title’ in das OpenLayers.Layer.Vector-Objekt und das Aussehen des Tooltips ins Stylesheet.
Sieht dann so aus.

Ich hoffe, das geht ungefähr in die gewünschte Richtung.

Gruß Wolf

wegmann48 · February 22, 2013, 11:30pm

Hallo,
ich bin Neuling und hab mich bis hier durchgegoogelt. Meine Karte (karte.ernst-may.de) zeigt inzwischen genau das, was ich will. (Eine Aktualisierung auf OL 2.12 ist lokal schon bereit.)
Insbesondere gibt es einen Layer.Text, der 26 Marker mit Popups enthält. Ich möchte hierzu noch Tooltips, die nur den “title” aus der txt anzeigen.
Kann mir da jemand weiterhelfen?
Gruß wegmann48

Netzwolf · February 23, 2013, 8:27pm

Nahmd,

Du benutzt keinen “Layer.Text”, sondern einen “Layer.Vector” mit einem “Format.Text”.
An dem “Layer.Text” liegt möglicherweise, dass sich noch keiner der Vector-Experten gemeldet hat.

Deine Fragestellung hatten wir schon einmal im Forum, vielleicht helfen der Thread oder der Fragesteller von damals Dir weiter.

Gruß Wolf

wambacher · February 23, 2013, 10:31pm

Stimmt, bei “so nem alten Kram” mach ich gleich die Schotten dicht

Aber der Autor könnte doch mal so nebenbei bei seiner wirklich ausführlichen Attributierung (Generated by MapTiler/GDAL2Tiles, Copyright © 2008 Klokan Petr Pridal, GDAL & OSGeo GSoC) was zu OSM schreiben, gell? Bei den Google-Backgrounds klappt es ja schliesslich auch.
In etwa so - wobei der Text noch nicht ausgefeilt ist.


var osm = new OpenLayers.Layer.OSM("OpenStreetMap",
                null,
               { attribution: 'Tiles &copy; <a href="http://www.openstreetmap.org/">OpenStreetMap</a> and contributors <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
               });

Diese Methode hat den Vorteil, dass die Attributierung nur dann angezeigt wird, wenn das OSM-Layer per Layer-Switcher aktiviert ist.

Gruss
Walter

wegmann48 · February 24, 2013, 12:38am

Ihr seid ja so nett zu den Anfängern! Die Attributierung hab ich geerbt von MapTiler. Möcht ich gern noch relativieren. Danke für den Hinweis.
Den Rest muss ich erst noch verdauen.
Gruss
Reinhard

wambacher · February 24, 2013, 12:57am

Wie lautet doch der Spruch: “Einzeln sind wir stark - gemeinsam sind wir unausstehlich”

Guten Verdauungsschlaf und Gruss
Walter

Netzwolf · February 24, 2013, 2:23am

Moins,

gleich als Erstes: meine Kommentare von heute Nachmittag waren ernst und nicht böse gemeint:

(1) “Layer.Text” vs. “Format.Text” ist keine Wortklauberei: denn einige Forianer brechen beim Lesen von “Layer.Text” gleich ab und blättern weiter, während sie bei Layer.Vector eher genauer hingucken würden. Deshalb hatte ich auf den Unterschied hingewiesen. Mich hatte nämlich gewundert, warum es noch keine Antworten gab, deshalb hatte ich in Deine Seite geschaut und da das Layer.Layout gefunden.

(2) Wir können nicht immer jede Frage von jetzt auf gleich beantworten. Deshalb hatte ich auf eine Diskussion verwiesen, in der das Thema bereits einmal behandelt wurde. Und auch der Verweis auf den damaligen Fragesteller war ernst gemeint, denn der nutzt die damals erarbeitete Lösung und würde sicher per Mail Dir weiterhelfen. Außerdem schuldet er mir noch eine Tüte Gummibären – die könnte er so abarbeiten.

Das ist leider unmöglich. Ein Fehler in der OpenLayer.js-Bibliothek führt dazu, dass man nur entweder Popups oder Mouseover haben kann, aber nicht beide. Schade.

Kurzfassung: Ja.

Langfassung: der oben beschriebenen Fehler wird mit einem Patch für OpenLayers.js behoben. Der Tooltip beim Mouseover wird über die (sehr leistungsfähige) StyleMap erzeugt, das Popup über das SelectFeature. Wichtig beim Erzeugen des SelectFeature sind die Optionen: “hover” wird nicht auf true gesetzt, sondern auf einen einen Wert, der zu true evaluiert wird, also ein String mit Länge ab 1 oder eine Zahl ungleich 0; “highlightOnly=true” verhindert, dass bereits beim Mouseover das Popup erscheint.

Du kannst also den Patch einbinden, das SelectFeature mit den speziellen Parametern aufrufen, und dann eine StyleMap erstellen, die in der gewünschten Weise auf das Mouseover reagiert.

Und schon wieder schuldet mir jemand eine Tüte Gummibärchen.

Gruß Wolf

mmd · February 24, 2013, 9:05am

Hallo,

beim SelectFeature kann man die beiden Callbacks over and out implementieren, die immer dann aufgerufen werden, wenn man mit der Maus über ein Objekt wandert.
Hier mal ein Beispiel mit Text im Tooltip und detailliertem Popup beim Mausklick: http://osm.misterboo.de/education/?zoom=15&lat=49.24&lon=6.99&layers=00BTFT

Gruß,
mmd

wegmann48 · February 24, 2013, 11:06pm

Hallo Walter, Wolf, mmd,
habt vielen Dank. So macht es Spaß und motiviert. Die Reaktion auf “so nem alten Kram” hab ich sicherlich verdient und die Gummibärchen (Großpackung) spendiere ich gerne.

Mein Fehler: ich probier immer erst mal IE 6-9 und da läuft garnichts. Eure tollen Beispiele funktionieren ganz toll in FireFox, Safari, Opera u.a. Für die Kunden meiner ehrenamtlichen Seite müsste ich wahrscheinlich mal eine entsprechende Meldung einbauen.
Weitere Erfolgsmeldungen werden noch Zeit brauchen, da ich mit dem wirklichen Leben schwer beansprucht bin. Ich hab aber das Gefühl, dass ich die Methodik verstehe und mit copy und paste weiterkomme.
Wo mach ich mich schlau zum Thema Einbinden eines Patches? Sorry, mal wieder 'ne Anfängerfrage!

Gruß
Reinhard

Netzwolf · February 24, 2013, 11:44pm

Nahmd,

Nene, das soll alles auch mit IE (außer uralt) laufen. Wenn nicht, dann bitte in die Fehlerkosole schauen und den Fehler mitteilen.

Per laden genau wie das OpenLayers.js und OpenStreetMap.js.

Ein Patch ist aber immer gefährlich, weil bei einem Update von OpenLayers.js er möglicherweise nicht mehr funktioniert und dann Deine Seite ausfällt.

Deshalb ist, wenn Du nur einen Tooltip und kein sonstiges “Highlighting” (wie bei mir der Unfug mit dem Austausch des Icons) brauchst, die von mmd vorgestellte Lösung besser. Ich habe die auf den Kern eingedampft und als Beispielseite bereitgestellt.

Gruß Wolf

Edit: Beispielseite

wegmann48 · February 25, 2013, 12:35am

Hallo,
schlagmichtot! Auf zwei verschiedenen PC mit IE 8 bzw. IE 9 läuft es nicht. Keine Fehlermeldung. Kein Hoover. Das Beispiel von mmd führt lediglich zum Ruckeln des Bildes insgesamt.

Gruß Reinhard

Netzwolf · February 25, 2013, 6:05am

Moins,

Das ist grob ungehörig.

Ich lassen meinen HTML/JS-Kompatibilitäts-Guru mal drüberschauen. Das kann aber ein paar Tage dauern.

Gruß Wolf

geri-oc · February 25, 2013, 8:05am

Details zum Fehler auf der Webseite

Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; chromeframe/25.0.1364.97; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.30729; .NET CLR 3.5.21022; .NET CLR 3.5.30729)
Zeitstempel: Mon, 25 Feb 2013 08:03:57 UTC

Meldung: ‘this.padding.left’ ist Null oder kein Objekt
Zeile: 563
Zeichen: 93
Code: 0
URI: http://osm.misterboo.de/education/js/OpenLayers.js

Für den IE kann ich das besteätigen. Chrome und FF einwandfrei.