Hintergrund für Mouseover

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

wambacher · 2012-01-22T03:44:18.000Z

Netzwolf:

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.

genau das machen wir doch: text schreiben, grösse feststellen, label erstellen.
müssen nur noch den text im gewünschen style schreiben, damit die größe 100% stimmt.

edit:


<span id="sizer" style="visibility: hidden; white-space: nowrap; font-family: 'Arial'; font-size: 15"></span>

damit stimmen styleMap und sizer-feld überein und die Grösse passt.

Gruss
Walter

WayneSchlegel · 2012-01-22T12:30:28.000Z

Netzwolf:

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.

wambacher:

edit:


<span id="sizer" style="visibility: hidden; white-space: nowrap; font-family: 'Arial'; font-size: 15"></span>

Oha, da haben aber 2 ne Nachtschicht eingelegt… >> Da hab ich ja jetzt ein richtig schlechtes Gewissen.

wambacher:

damit stimmen styleMap und sizer-feld überein und die Grösse passt.

Damit kommen auf jeden Fall mal 54 raus, was zumindest bedeutend näher dran ist !


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

        var s = '${ziel}';
        return(s.visualLength());
    }
}

So scheint es zu funktionieren, nur wird mir aktuell die Variable ${ziel} noch nicht für jeden Marker ersetzt, sondern selbst als Text interpretiert.
http://tinyurl.com/7kgejy7
Hmmmm

Gruß und vielen Dank Wayne

Netzwolf · 2012-01-22T13:28:01.000Z

Nahmd,

wambacher:

Netzwolf:

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.

genau das machen wir doch: text schreiben, grösse feststellen, label erstellen.

Genauer:
– HTML-Objekt bauen und rendern lassen
– Größe auslesen
– HTML-Objekt entsorgen
– SGV mit der ausgelesenen Größe rendern lassen und hoffen, dass er das gleiche macht wie der HTML-Renderer.

wambacher:

müssen nur noch den text im gewünschen style schreiben, damit die größe 100% stimmt.

Ich habe versucht:
– SVG rendern lassen
– Größe des von SGV gerenderten Objektes abfragen
– Damit die Graphik nachziehen

Das sieht sehr ähnlich aus, ist es aber nicht.

Der Umweg über HTML muss versuchen, alle Parameter zu simulieren, also auch LineHeight, eventuelle Paddings, you name it.
Spätestens bei automatischem Umbruch (ja, das kann SVG), wird das minderspaßig zu bauen.

Die direkte Version ohne Umweg über HTML macht jeden Unsinn mit:

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

Einmal gebaut, braucht man da nie mehr nachzubessern.
Und das kommt meiner Faulheit sehr entgegen.

Gruß Wolf

wambacher · 2012-01-22T13:35:16.000Z

WayneSchlegel:

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

        var s = '${ziel}';
        return(s.visualLength());
    }
}
So scheint es zu funktionieren, nur wird mir aktuell die Variable ${ziel} noch nicht für jeden Marker ersetzt, sondern selbst als Text interpretiert.
http://tinyurl.com/7kgejy7

ich kann die ganze Sache hier nur rudimentär testen. Knackpunkt ist ja die Frage, wie man an den aktuellen String rankommt.
Eventuel über das feature, das ja als Argument übergeben wird?

Gruss
Walter

Netzwolf · 2012-01-22T14:03:30.000Z

Nahmd,

WayneSchlegel:

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

        var s = '${ziel}';
        return(s.visualLength());
    }
}
So scheint es zu funktionieren, nur wird mir aktuell die Variable ${ziel} noch nicht für jeden Marker ersetzt, sondern selbst als Text interpretiert.

Das “${name}” ist keine in JavaScript eingebaute Funktion (so wie in Perl oder PHP). Sondern an einigen Stellen schickt OL Strings durch die (recht leistungsfähige) OpenLayers.String.format-Methode, die solche Referenzen ersetzt. Dieser Methode muss natürlich eine Liste von name→Wert-Zuordnungen mitgeschickt werden.

Du könntest an dieser Stelle schreiben:


var s = OpenLayers.String.format ('${ziel}', feature.attributes);

Das ist aber Overkill.
Wäre nützlich, wenn Du im String gleich zwei Felder ersetzen wolltest:


var s = OpenLayers.String.format ('${ziel} (${verspaetung})', feature.attributes);

Ende des Exkurses.

Du schreibst ganz einfach:


var s = feature.attributes.ziel;

Gruß Wolf