OpenLayers - Hinttext setzen

!i! · 2011-10-18 19:30:29

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"

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

Hobby Navigator · 2011-10-19 06:37:25

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

ajoessen · 2011-10-19 07:17:28

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

Last edited by ajoessen (2011-10-19 07:17:38)

!i! · 2011-10-19 08:30:29

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 · 2011-10-19 08:58:16

!i! wrote:

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*

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 · 2011-10-19 10:00:27

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

Last edited by ikonor (2011-10-19 10:01:50)

!i! · 2012-05-20 11:35:52

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

Netzwolf · 2012-05-20 16:55:54

Nahmd,

!i! wrote:

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?
Hat jemand von euch vlt. sowas schon mal genutzt und könnte mir einen Tip geben?

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 · 2013-02-23 00:30:08

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 · 2013-02-23 21:27:37

Nahmd,

wegmann48 wrote:

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.

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 · 2013-02-23 23:31:32

Netzwolf wrote:

An dem “Layer.Text” liegt möglicherweise, dass sich noch keiner der Vector-Experten gemeldet hat.

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 · 2013-02-24 01:38:03

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 · 2013-02-24 01:57:59

wegmann48 wrote:

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

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

Guten Verdauungsschlaf und Gruss
Walter

Netzwolf · 2013-02-24 03:23:24

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.

wegmann48 wrote:

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.

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.

wegmann48 wrote:

Kann mir da jemand weiterhelfen?

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 · 2013-02-24 10:05:52

wegmann48 wrote:

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.

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 … ers=00BTFT

Gruß,
mmd

Last edited by mmd (2013-02-24 10:07:41)

wegmann48 · 2013-02-25 00:06:50

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.
1. 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.
2. 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.
3. Wo mach ich mich schlau zum Thema Einbinden eines Patches? Sorry, mal wieder 'ne Anfängerfrage!

Gruß
Reinhard

Netzwolf · 2013-02-25 00:44:20

Nahmd,

wegmann48 wrote:

1. 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.

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

3. Wo mach ich mich schlau zum Thema Einbinden eines Patches? Sorry, mal wieder 'ne Anfängerfrage!

Per <script src="..."> 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

Last edited by Netzwolf (2013-02-25 09:10:40)

wegmann48 · 2013-02-25 01:35:58

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 · 2013-02-25 07:05:58

Moins,

wegmann48 wrote:

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.

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 · 2013-02-25 09:05:47

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.

Netzwolf · 2013-02-25 09:24:49

Nahmd,

geri-oc wrote:

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.

Danke, sehr hilfreich.

So es ausschaut ein Fehler in OpenLayers (fehlendes “if (this.padding) {”), den FF&Co gnädig verzeihen. Tritt nur dann auf, wenn man sich die korrekte Größe für ein Popup berechnen lässt, nicht nei Verwendung der (gruseligen) Standardgröße.

Gruß Wolf

Edit: Fehldiagnose “OpenLayers fehlerhaft” korrigiert.

Last edited by Netzwolf (2013-02-25 13:09:11)

Netzwolf · 2013-02-25 10:17:11

Moins,

geri-oc wrote:

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.

Kannst Du bitte auch diese Seite testen? Vorsicht: die wirft Alerts!

Bei einem Mouseover sollten vier Alerts geworfen werden:

fixPadding(this.padding=0, condition=true)
fixPadding(this.padding=0,0,0,0)
fixPadding(this.padding=0,0,0,0, condition=false)
fixPadding(this.padding=0,0,0,0)

Ich bin gespannt, was der IE da anzeigt bzw. ob der in dieser Sequenz stirbt.

Dank+Gruß Wolf

Die sollte bei einem

geri-oc · 2013-02-25 11:36:19

Netzwolf wrote:

...
Kannst Du bitte auch diese Seite testen? Vorsicht: die wirft Alerts!
Bei einem Mouseover sollten vier Alerts geworfen werden:
fixPadding(this.padding=0, condition=true)
fixPadding(this.padding=0,0,0,0)
fixPadding(this.padding=0,0,0,0, condition=false)
fixPadding(this.padding=0,0,0,0)
Ich bin gespannt, was der IE da anzeigt bzw. ob der in dieser Sequenz stirbt.
Dank+Gruß Wolf
Die sollte bei einem

Angezeigt werden die vier Gipfel wie in FF. Bei mouseover kommen deine 4 allerts (nacheinander mit Bestätigungsabfrage). bestätige ich alle 4 mit "Enter" wird auch Gipfelname angezeigt (solange die Maus nicht bewegt wird) Nach Doppelklick auf POI und 4xBestätigungen wird Name mit Höhe und Deutschland angezeigt.

Ist aber hier auch in FF so.

chris66 · 2013-02-25 12:01:43

geri-oc wrote:

Ist aber hier auch in FF so.

Bei mir (IE9) ist es ähnlich. Nur ist das Tooltip in IE nicht lesbar, da durch Scrollbalken verstümmelt
(Zoom=139%).

Chris

Netzwolf · 2013-02-25 12:50:12

Nahmd,

geri-oc wrote:

Angezeigt werden die vier Gipfel wie in FF. Bei mouseover kommen deine 4 allerts (nacheinander mit Bestätigungsabfrage). bestätige ich alle 4 mit "Enter" wird auch Gipfelname angezeigt (solange die Maus nicht bewegt wird) Nach Doppelklick auf POI und 4xBestätigungen wird Name mit Höhe und Deutschland angezeigt.

Das heißt, die Seite funktioniert mit IE?

Und was ist mit dieser (ohne Alerts)?

Gruß Wolf

Announcement

#1 2011-10-18 19:30:29

OpenLayers - Hinttext setzen

#2 2011-10-19 06:37:25

Re: OpenLayers - Hinttext setzen

#3 2011-10-19 07:17:28

Re: OpenLayers - Hinttext setzen

#4 2011-10-19 08:30:29

Re: OpenLayers - Hinttext setzen

#5 2011-10-19 08:58:16

Re: OpenLayers - Hinttext setzen

#6 2011-10-19 10:00:27

Re: OpenLayers - Hinttext setzen

#7 2012-05-20 11:35:52

Re: OpenLayers - Hinttext setzen

#8 2012-05-20 16:55:54

Re: OpenLayers - Hinttext setzen

#9 2013-02-23 00:30:08

Re: OpenLayers - Hinttext setzen

#10 2013-02-23 21:27:37

Re: OpenLayers - Hinttext setzen

#11 2013-02-23 23:31:32

Re: OpenLayers - Hinttext setzen

#12 2013-02-24 01:38:03

Re: OpenLayers - Hinttext setzen

#13 2013-02-24 01:57:59

Re: OpenLayers - Hinttext setzen

#14 2013-02-24 03:23:24

Re: OpenLayers - Hinttext setzen

#15 2013-02-24 10:05:52

Re: OpenLayers - Hinttext setzen

#16 2013-02-25 00:06:50

Re: OpenLayers - Hinttext setzen

#17 2013-02-25 00:44:20

Re: OpenLayers - Hinttext setzen

#18 2013-02-25 01:35:58

Re: OpenLayers - Hinttext setzen

#19 2013-02-25 07:05:58

Re: OpenLayers - Hinttext setzen

#20 2013-02-25 09:05:47

Re: OpenLayers - Hinttext setzen

#21 2013-02-25 09:24:49

Re: OpenLayers - Hinttext setzen

#22 2013-02-25 10:17:11

Re: OpenLayers - Hinttext setzen

#23 2013-02-25 11:36:19

Re: OpenLayers - Hinttext setzen

#24 2013-02-25 12:01:43

Re: OpenLayers - Hinttext setzen

#25 2013-02-25 12:50:12

Re: OpenLayers - Hinttext setzen

Board footer