Hintergrund für Mouseover

Hallo,

ich erstelle für meine Marker ein Mouseover:


styleMap: new OpenLayers.StyleMap
(
     {
          'default':
          {
               externalGraphic: '${icon}.png',
               graphicWidth: 26,
               graphicHeight: 26
          },
                
          'select':
          {
               externalGraphic: '${icon}.png',
               graphicWidth: 26,
               graphicHeight: 26,
               label: '${ziel}',
               labelYOffset: -30,
               labelAlign: 'cb',
               fontFamily: 'Arial',
               fontSize: 15,
               cursor: 'pointer'
          }
     }
)

Nun wird mir der Layer bei jedem Mouseover angezeigt. > Nur ist der Layer noch transparent.

Füge ich nun ein Hintergrundbild ein, wird dieses ja in der Breite fest vorgegeben.


'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?
Bei 100% ist leider nicht der Text zu 100% hinterlegt, sondern die komplette Kartenbreite. :open_mouth:
Es muß natürlich nicht unbedingt ein Hintergrundbild sein. Ich wäre auch mit bloßem einfärben des Textfeldes zufrieden. :wink: :wink: :wink:

Beste Grüße
Wayne

Nahmd,

Ich weiß nicht, welche HTML-Struktur intern aus diesen Daten erzeugt wird, ob z.B. an die Breitenangabe ein “px” angehängt wird und ob die Breite an ein

oder an die Graphik gehängt wird. Daher ohne große Hoffnung auf Erfolg:

→ backgroundWidth: ‘auto’
→ backgroundWidth: null
→ “backgroundWidth” weglassen.

Bei den ollen Sprechblasen wird die Größe bestimmt, indem der Content der Sprechblase in ein verstecktes

gerendert wird, und dann die offsetHeight und offsetWidth Attribute dieses ausgelesen und zur Berechnung der Sprechblasengeometrie verwendet werden. Das ist der harte Weg :confused:

Gruß Wolf

Hallo Netzwolf,

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

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.

Gruß Wayne

Nahmd,

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.

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

Gruß Wolf

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 :wink:

@wolf: wie kommst du auf SVG?

Holla die Herren :slight_smile:

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

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

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

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

Hallo,

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

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

Danke fürs reindenken. :slight_smile:
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).

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


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

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

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

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

Leicht abgeändert funktioniert es nun… :slight_smile:

        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:

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

http://tinyurl.com/7kgejy7

Gruß Wayne

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

Schön wäre es, wenns mein Server wäre… :wink: >> 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.

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