Hintergrund für Mouseover

Netzwolf · 2012-01-20T23:31:47.000Z

Nahmd,

WayneSchlegel:

ich hab deine Vorschläge überprüft, aber leider funktioniert keine der 3.

Sorry, mea culpa.

Ich war von

-Containern ausgegangen, Du nutzt aber SVG.

Bei SVG gibt es keine Hintergrundfarbe für Texte.

Du kannst zuerst ein gefülltes Rechteck zeichnen lassen (oder ein Bild), und dann den Text darüber malen. Dazu musst Du aber wissen, wie breit der Text läuft.

Die Laufweite des Textes kannst Du nach dem Rendern abfragen, und damit die Breite der Hintergrundgrafik anpassen. Eine triviale Aufgabe für eine kleine Fixup-Funktion.

Nur habe ich im OL-Code keinen Haken (Event, Callback) gefunden, an dem man eine solche Fixup-Funktion anhängen könnte.

Ich denke, hier ist einer der Vector-Layer-Experten gefragt.

WayneSchlegel:

Theoretisch müsste sich ja so die gewünschte Textbreite ableiten lassen:
feature.attributes.ziel.length
Wenn ich das ganze an meinem Marker-Popup teste (feature.attributes.title.length) erhalte ich optimal die Länge der Überschrift.

Das dürfte die Breite in Zeichen liefern und nicht in Pixeln.

Gruß Wolf

wambacher · 2012-01-21T09:43:42.000Z

WayneSchlegel:

Es muß natürlich nicht unbedingt ein Hintergrundbild sein. Ich wäre auch mit bloßem einfärben des Textfeldes zufrieden.

Hi Walter

schick doch mal ein Bildchen rüber, damit man mal sehen kann, was du meinst. einmal ohne und einmal mit Hintergrund, auch wenn der dann zu gross ist.

sowas ist relativ einfach:
aber ich weiss nicht, ob du das meinst.

Gruss
auch Walter

@wolf: wie kommst du auf SVG?

WayneSchlegel · 2012-01-21T10:11:07.000Z

Holla die Herren

schick doch mal ein Bildchen rüber, damit man mal sehen kann, was du meinst. einmal ohne und einmal mit Hintergrund, auch wenn der dann zu gross ist.

Hier kannst dus ganz gut erkennen: http://tinyurl.com/7kgejy7

Der Hintergrund des Labels ist jetzt fest auf 200px eingestellt, sollte aber nach Möglichkeit natürlich dynamisch (+/- je nach Textlänge) sein.

Gruß Wayne

wambacher · 2012-01-21T10:16:49.000Z

WayneSchlegel:

Hier kannst dus ganz gut erkennen: http://tinyurl.com/7kgejy7

Der Hintergrund des Labels ist jetzt fest auf 200px eingestellt, sollte aber nach Möglichkeit natürlich dynamisch (+/- je nach Textlänge) sein.

Gruß Wayne

ok, ein ganz einfacher popup.
hast du noch andere popups, die NICHT eingefärbt werden sollen? dann komm ich nämlich ins Schwimmen.

Gruss
Walter

WayneSchlegel · 2012-01-21T10:26:34.000Z

wambacher:

ok, ein ganz einfacher popup.
hast du noch andere popups, die NICHT eingefärbt werden sollen? dann komm ich nämlich ins Schwimmen.

Gruss
Walter

Ich hab dir den Code nochmal bisschen angepasst. > Die Popups sind ne andere Baustelle (daher kurz mal entfernt).

Gruß & Danke Wayne

wambacher · 2012-01-21T10:41:47.000Z

WayneSchlegel:

wambacher:

ok, ein ganz einfacher popup.
hast du noch andere popups, die NICHT eingefärbt werden sollen? dann komm ich nämlich ins Schwimmen.

Gruss
Walter

Ich hab dir den Code nochmal bisschen angepasst. > Die Popups sind ne andere Baustelle (daher kurz mal entfernt).

Gruß & Danke Wayne

Hab mich mal ein wenig “reingedacht”:
ich nehme inzwischen an, dass du die Labels in der Farbe der jeweiligen Linie haben möchtest; jedenfalls in unterschiedlichen Darstellungen.
Da muss ich mit meiner Lösung passen, da ich hier die Farbe global ausgewechselt habe.

Auf welcher Platform rennt der Server denn? Eventuell könnte man die Hintergrund.png für jedes Label dynamisch erzeugen, sodass jedes Label sein eigenes png bekommt.
allerdings weiss ich nicht, ob OL da mitspielt.

gruss
walter

ikonor · 2012-01-21T10:52:11.000Z

Hallo,

WayneSchlegel:


'select':
{
     externalGraphic: '${icon}.png',
     graphicWidth: 26,
     graphicHeight: 26,
     backgroundGraphic: 'hintergrund.png',
     backgroundHeight: 20,
     backgroundWidth: '100',
     backgroundYOffset: 15,
     label: '${ziel}',
     labelYOffset: -30,
     labelAlign: 'cb',
     fontFamily: 'Arial',
     fontSize: 15,
     cursor: 'pointer'
}

Gibts irgendwie ne Möglichkeit, die “backgroundWidth:” dynamisch so abzuändern, das sie immer so breit wie der Text (label) ist?

Evtl. kann man die Breite mit einer Funktion im Style Context annähern (nicht getestet):


'select':
{
...
     backgroundWidth: '${getBackgroundWidth}',
     label: '${ziel}',
...
}, { context: {
  getBackgroundWidth: function(feature) {
    return feature.attributes.ziel.length * <max. zeichenbreite>;
  }
}}

Gruß,
ikonor

wambacher · 2012-01-21T10:52:56.000Z

nochmal ganz von vorne:

Was soll eingefärbt werden?

a) der sich bewegene Kreis mit der farbigen Linienbezeichnung?
b) das weisse Label mit der Zielangabe, das erscheint, wenn man mit der Maus über der Linie ist?
c) beides
d) was anderes?

gruss
walter

WayneSchlegel · 2012-01-21T10:57:21.000Z

wambacher:

Hab mich mal ein wenig “reingedacht”:
ich nehme inzwischen an, dass du die Labels in der Farbe der jeweiligen Linie haben möchtest; jedenfalls in unterschiedlichen Darstellungen.
Da muss ich mit meiner Lösung passen, da ich hier die Farbe global ausgewechselt habe.

Danke fürs reindenken.
Aber leider hat es mit der Farbe absolut nichts zu tun. > Diese soll immer weiß sein, unabhängig von der Linie.
Es geht lediglich um die Breite der backgroundGraphic (Also das weiße Label wenn man mit der Maus drüber fährt).

WayneSchlegel · 2012-01-21T11:07:31.000Z

ikonor:

Hallo,

WayneSchlegel:


'select':
{
     externalGraphic: '${icon}.png',
     graphicWidth: 26,
     graphicHeight: 26,
     backgroundGraphic: 'hintergrund.png',
     backgroundHeight: 20,
     backgroundWidth: '100',
     backgroundYOffset: 15,
     label: '${ziel}',
     labelYOffset: -30,
     labelAlign: 'cb',
     fontFamily: 'Arial',
     fontSize: 15,
     cursor: 'pointer'
}

Gibts irgendwie ne Möglichkeit, die “backgroundWidth:” dynamisch so abzuändern, das sie immer so breit wie der Text (label) ist?

Evtl. kann man die Breite mit einer Funktion im Style Context annähern (nicht getestet):


'select':
{
...
     backgroundWidth: '${getBackgroundWidth}',
     label: '${ziel}',
...
}, { context: {
  getBackgroundWidth: function(feature) {
    return feature.attributes.ziel.length * <max. zeichenbreite>;
  }
}}

Gruß,
ikonor

Das hatte ich bereits versucht, aber mehr als “undefined” kommt dabei leider nicht raus…


styleMap: new OpenLayers.StyleMap
        (
            {
                'default':
                {
                    externalGraphic: '${icon}.png',
                    graphicWidth: 26,
                    graphicHeight: 26
                },
                
                'select':
                {
                    backgroundGraphic: 'bg.png',
                    backgroundHeight: 20,
                    backgroundWidth: '${getBackgroundWidth}',
                    backgroundYOffset: 15,
                    label: '${ziel}',
                    labelYOffset: -30,
                    labelAlign: 'cb',
                    fontFamily: 'Arial',
                    fontSize: 15,
                    cursor: 'pointer'
                },
                
                'context':
                {
                    getBackgroundWidth: function(feature)
                    {
                        return(5 * feature.attributes.ziel.length);
                    }
                }
            }
        )

Gruß Wayne

wambacher · 2012-01-21T11:47:52.000Z

WayneSchlegel:

wambacher:

Hab mich mal ein wenig “reingedacht”:
ich nehme inzwischen an, dass du die Labels in der Farbe der jeweiligen Linie haben möchtest; jedenfalls in unterschiedlichen Darstellungen.
Da muss ich mit meiner Lösung passen, da ich hier die Farbe global ausgewechselt habe.

Danke fürs reindenken.
Aber leider hat es mit der Farbe absolut nichts zu tun. > Diese soll immer weiß sein, unabhängig von der Linie.
Es geht lediglich um die Breite der backgroundGraphic (Also das weiße Label wenn man mit der Maus drüber fährt).

EDIT: so langsam dämmert es mir, was du vorhast. Ziemlich tricky
Ich ziehe mich mal in mein “Labor” zurück.

ikonor · 2012-01-21T12:06:45.000Z

WayneSchlegel:

Das hatte ich bereits versucht, aber mehr als “undefined” kommt dabei leider nicht raus…

Ich vermute, dann ist der context noch nicht richtig definiert. Der muss vermutlich beim Style statt der StyleMap definiert sein, evtl. mit explizitem Konstruktor:


        stylemap = new OpenLayers.StyleMap({
        'default': new OpenLayers.Style({
            ...
        }),
        'select' : new OpenLayers.Style({
            ...
            }, {
            'context':
            {
                getBackgroundWidth: function(feature)
                {
                    return(5 * feature.attributes.ziel.length);
                }
            }
        })
    });

Siehe auch http://openlayers.org/dev/examples/strategy-cluster-extended.js

Gruß,
ikonor

WayneSchlegel · 2012-01-21T13:58:58.000Z

Erstmal vielen Dank an Netzwolf, wambacher und ikonor für die tolle Hilfe…

ikonor:

Ich vermute, dann ist der context noch nicht richtig definiert. Der muss vermutlich beim Style statt der StyleMap definiert sein, evtl. mit explizitem Konstruktor:

Leicht abgeändert funktioniert es nun…

        styleMap: new OpenLayers.StyleMap
        ({
            'default': new OpenLayers.Style
            ({
                externalGraphic: '${icon}.png',
                graphicWidth: 26,
                graphicHeight: 26,
            }),
            
            'select': new OpenLayers.Style
            ({
                backgroundGraphic: 'bg.png',
                backgroundHeight: 20,
                backgroundWidth: '${getBackgroundWidth}',
                backgroundYOffset: 15,
                label: '${ziel}',
                labelYOffset: -30,
                labelAlign: 'cb',
                fontFamily: 'Arial',
                fontSize: 15,
                cursor: 'pointer'
            },{
                context:
                {
                    getBackgroundWidth: function(feature)
                    {
                        return(feature.attributes.ziel.length * 7.5);
                    }
                }
            })
        })

Nur ist es wirklich so, wie Netzwolf es vermutet hat:

Netzwolf:

Das dürfte die Breite in Zeichen liefern und nicht in Pixeln.

Jetzt muß ich nur noch ne Möglichkeit finden, anstelle der Zeichenanzahl die Pixelbreite zu erhalten.
Dann passts optimal.
Jemand ne Idee???

http://tinyurl.com/7kgejy7

Gruß Wayne

wambacher · 2012-01-21T14:45:05.000Z

WayneSchlegel:

Jetzt muß ich nur noch ne Möglichkeit finden, anstelle der Zeichenanzahl die Pixelbreite zu erhalten.
Dann passts optimal.
Jemand ne Idee???

Auf welcher Platform (OS) läuft denn dein Server?

WayneSchlegel · 2012-01-21T14:57:20.000Z

wambacher:

Auf welcher Platform (OS) läuft denn dein Server?

Schön wäre es, wenns mein Server wäre… >> http://all-inkl.com/webhosting/privatplus/

wambacher · 2012-01-21T15:29:42.000Z

WayneSchlegel:

wambacher:

Auf welcher Platform (OS) läuft denn dein Server?

Schön wäre es, wenns mein Server wäre… >> http://all-inkl.com/webhosting/privatplus/

ok, sackgasse.

bremsen, umdrehen, nächsten weg suchen, …

meine Idee war es, das png mit http://www.imagemagick.org dynamisch zu erzeugen. eventuell kriegst du das ja hin.

wambacher · 2012-01-21T15:54:00.000Z

nächster ansatz:

a)
irgendwo unten in der webseite einbauen (unsichtbares feld)

b)

String.prototype.visualLength = function()
        {
           var sizer = document.getElementById("sizer");
           sizer.innerHTML = this;
           return sizer.offsetWidth;
        }

einbauen

c)
var s = “Abgrund”;
var len = s.visualLength();
alert (s+": "+len);

d) len entsprechend verwenden. (bei mir kommt 70 raus - sollte aber wohl von Bildschirm des Anwenders abhängig sein)

gruss
walter

WayneSchlegel · 2012-01-21T21:51:27.000Z

wambacher:

bremsen, umdrehen, nächsten weg suchen, …

Super Einstellung…
Die gefällt mir !

wambacher:

(bei mir kommt 70 raus - sollte aber wohl von Bildschirm des Anwenders abhängig sein)

Bei mir kommen 68 raus. > Nachgemessen hat “Abgrund” aber ca. 46 Pixel.
Ich hab auch schon rumprobiert, ob der Text vielleicht immer 2/3 des angezeigten ist, aber dem ist leider nicht so.
Wäre ja zu einfach gewesen

Gruß Wayne

wambacher · 2012-01-22T02:30:59.000Z

WayneSchlegel:

Bei mir kommen 68 raus. > Nachgemessen hat “Abgrund” aber ca. 46 Pixel.
Ich hab auch schon rumprobiert, ob der Text vielleicht immer 2/3 des angezeigten ist, aber dem ist leider nicht so.
Wäre ja zu einfach gewesen

Bingo,

gerade rausgefunden: liegt am Font

nimm mal temporär im styleMap fontFamily und fontSize raus. dann passt es.

habe versucht, das im style vom span-element anzugeben, aber das wollte der nicht. liegt auf jeden Fall daran, dass beim Berechnen und beim Zeichnen natürlich der gleiche Font verwendet werden muss.
bin ein wenig müde - du wirst das schon hinkriegen ^^

Gruss
Walter

Netzwolf · 2012-01-22T03:06:16.000Z

Moin moin,

WayneSchlegel:

wambacher:

(bei mir kommt 70 raus - sollte aber wohl von Bildschirm des Anwenders abhängig sein)

Bei mir kommen 68 raus. > Nachgemessen hat “Abgrund” aber ca. 46 Pixel.
Ich hab auch schon rumprobiert, ob der Text vielleicht immer 2/3 des angezeigten ist, aber dem ist leider nicht so.

Du könntest einen Monospace-Font nehmen, Courier oder ähnlich.
Da haben alle Zeichen per definitionem die gleiche Breite.

Das ist aber nicht wirklich eine Lösung, alldieweil unterschiedliche Browser möglicherweise unterschiedlich große Fonts haben.

WayneSchlegel:

Wäre ja zu einfach gewesen

Es ist wirklich knifflig, nämlich ein Henne-und-Ei-Problem:
– Die Textgröße kann man nach dem Zeichnen abfragen.
– Der Style will die Breite aber vor dem Zeichnen wissen.

Das Problem wird durch die Art und Weise verursacht, wie OpenLayers mit Labels umgeht.
Innerhalb von OL könnte man relativ leicht Features “Hintergrundgrafik mit automatischer Größenanpassung” oder Hintergrundfarbe (auch mit Rahmen) realisieren.

Ich habe den grundsätzlichen Ablauf ins OL reingepatched:

http://www.netzwolf.info/kartografie/openlayers/nvk.phtml

(Das Klauen der Karte bitte ich nachzusehen, das war schneller als selber eine Demo zu bauen.)

Durch Aufruf der URL mit angehängter Font-Größe kann man sehen, wie die Hintergrundgrafik an den Text angepasst wird.

Leider ist diese Lösung noch nicht serienreif.

Gruß Wolf