Popup (Marker-) Farbe

Frank837 · May 28, 2009, 6:55pm

Hi Forum,
in den mir zur Verfügung stehenden Beispielen für für Popups bei Markern ist der Hintergrund immer weiß. Ich möchte ihn aber z.B. Schweinchen-Rosa haben. Mit Javascript und insbes. OpenLayers.JS bin ich sehr schwach auf der Brust. Aber irgendwie muss das doch gehen!

Kann mir jemand einen Tip geben?

Danke,
Frank

zottel · May 28, 2009, 11:11pm

Hallo Frank,

die Styles für das Popup finden sich in .olPopupContent in Deiner CSS-Datei. Für ein Schweinchenrosafenster musst Du dort folgendes setzen:

.olPopupContent {
background-color: #ffcdcd;
}

das #ffcdcd ist ein hex-trippel, das die Farbe bestimmt. Wenn dir das rosa noch nicht schweinisch genug ist und Du mit den HTML-Farbcodes nichts anfangen kannst, kannst Du ihn z.B. auch aus dem gimp Farbwähler heraus kopieren.

Grüßle, detlef

Markus_B · May 29, 2009, 8:40am

Hallo Detlef,

Und wie mache ich statt der roten Raute beispielsweise eine grüne Pin-Nadel?

Und wie mache ich, dass bei Klick auf einen Marker zusätzlich zum Popup-Fenster auch noch eine farbige Linie erscheint?
Beispielsweise um einen Weg von A nach B zu markieren?

Gruss, Markus

Frank837 · May 29, 2009, 9:24am

Hi Zottel,
Danke, das hilft! Ich werde es nachher ausprobieren. HTML-Farbcode sagt mir was.

Hi Markus,
wenn Du die Karte mit dem Script von dt2 erstellst, hast Du eine Auswahl an Icons, die man anklicken kann. Wenn Deine Karte fertig ist, empfehle ich Dir, die Icons auf Deinen eigenen Rechner zu kopieren (rechte Maustaste: “Grafik speichern unter…”. Das mit der farbigen Linie habe ich nicht verstanden.

Zu diesem Script gibt es hier einen Thread, den dt2 angestoßen hat. Ist noch nicht lang her.
Frank

Markus_B · May 29, 2009, 3:50pm

Hallo Frank,

Unsere Gemeindeseite habe ich nach der Anleitung im Wiki erstellt. Dort habe ich Punkte für “Sehenswürdigkeiten” und für “Essen+Trinken”, die ich gern mit unterschiedlichen Markern kennzeichnen möchte. Bis jetzt werden immer rote Rauten verwendet.

Auf unserer Gemeindeseite habe ich Wanderwege als farbige Linien als OL eingetragen. Nun möchte ich, dass man beispielsweise auf einen Ausflugspunkt klickt, und dann zusätzlich zum Popup (das diesen beschreibt und ein Bild zeigt) auch der Wanderweg hervorgehoben wird, der vom Bahnhof zu diesem Aussichtspunkt führt (der vorher als XML gespeichert wurde). Oder man klickt auf den Flughafen und bekommt die Verbindungslinie zum Rathaus angezeigt.

Was mir auch noch fehlt:
Über ein Menü kann man verschiedene Punkte als Layer anzeigen. Wenn man mehrere Layer anzeigt, kann man nur Punkte des jeweils letzten Layers in der Liste anklicken und ihr Popup sehen. Ich möchte aber, dass man alle Punkte aus *allen *angezeigten Layern anklicken und die dazugehörigen Popups anzeigen kann.

Gruss, Markus

dt2 · May 29, 2009, 4:53pm

Folgende Funktion hinzufügen (zum Beispiel ans Ende der OSM-Karte-Funktionen.js):

/*
 *
 * Creates a new marker icon
 *
 * using the icons-array (defined in the html-file)
 *
 * index
 * 0    address to the image
 * 1    width of the image
 * 2    height
 * 3    factor by which the image should be offset horizontally
 * 4    factor by which the image should be offset vertically
 *
 * please see the icon array itself for examples of values
 */
function makeIcon(iconId) {
    var size = new OpenLayers.Size(icons[iconId][1],icons[iconId][2]);
    var offset = new OpenLayers.Pixel(-(size.w*icons[iconId][3]), -(size.h*icons[iconId][4]));
    var icon = new OpenLayers.Icon(icons[iconId][0],size,offset);
    return icon;
}

Dann in die addMaker-Funktion unter:

feature.data.overflow = "auto";

Folgendes hinzufügen:

feature.data.icon = makeIcon(iconId);

Dann musst du noch das Array mit den Icons erstellen, zum Beispiel (in eine JS-Datei außerhalb einer Funktion):

icons = new Array();
icons[0] = new Array('http://openlayers.org/api/img/marker.png','21','25','0.5','1');
icons[1] = new Array('http://openlayers.org/api/img/marker-gold.png','21','25','0.5','1');
icons[2] = new Array('http://openlayers.org/api/img/marker-blue.png','21','25','0.5','1');
icons[3] = new Array('http://openlayers.org/api/img/marker-green.png','21','25','0.5','1');
icons[4] = new Array('pin_red.png','16','28','0','1');
icons[5] = new Array('pin_blue.png','16','28','0','1');
icons[6] = new Array('pin_green.png','16','28','0','1');

Die Zahl vorne (hier 0-6) muss dann in der addMarker-Funktion angegeben werden, dazu muss folgende Zeile noch geändert werden:

function addMarker(layer, lon, lat, popupContentHTML, showPopupOnLoad, iconId) {

Folgendes würde dann einen grünen Pin anzeigen (wenn die entsprechende Grafik im gleichen Verzeichnis liegt):

addMarker(layer_markers, 11.3363, 49.5952, "<b>Rathaus Simmelsdorf</b> <br>Nürnberger Str. 16 <br>91245 Simmelsdorf <br>+49-9155-78-0 <img src=\"../osm/Simmelsdorf-Rathaus.jpg\" width=\"100\" height=\"50\">", 6);

Ergänze in der addMarker-Funktion (OSM-Karte-Funktionen.js):

    var markerClick = function(evt) {
        if (this.popup == null) {
            this.popup = this.createPopup(this.closeBox);
            map.addPopup(this.popup);
            this.popup.show();
        } else {
            this.popup.toggle();
        }
    
    // Ab hier ergänzen
    if (elementsToShowOnClick != null) {
        for (var i=0;i<elementsToShowOnClick.length;++i) {
            if (this.popup.visible()) {
                elementsToShowOnClick[i].setVisibility(true);
            } else {
                elementsToShowOnClick[i].setVisibility(false);
            }
        }
    }
    // Bis hier
        
        OpenLayers.Event.stop(evt);
    };

Außerdem diese Zeile ändern:

function addMarker(layer, lon, lat, popupContentHTML, iconId, elementsToShowOnClick) {

Dann musst du diejenigen Marker bei denen das möglich sein soll, mit der addMarker Funktion hinzufügen (nur als Beispiel):

var lGrenzeGpx = new OpenLayers.Layer.GPX("Grenze", "Simmelsdorf Grenze.gpx", "#00FF00");
lGrenzeGpx.setVisibility(false);

...

addMarker(layer_markers, 11.3363, 49.5952, "<b>Rathaus Simmelsdorf</b> <br>Nürnberger Str. 16 <br>91245 Simmelsdorf <br>+49-9155-78-0 <img src=\"../osm/Simmelsdorf-Rathaus.jpg\" width=\"100\" height=\"50\">", 1, [ lGrenzeGpx ]);

dt2 · May 29, 2009, 4:54pm

Ich weiß nicht ob das überhaupt geht, da die Layer dann übereinander liegen und vermutlich nur der oberste Layer Clicks empfängt.

Frank837 · May 30, 2009, 4:34pm

Hallo,
meine Anwendung bekommt Farbe. Nur leider ist mein Popup nicht völlig gefüllt. Ich versuche ein Bild anzuhängen, weiß aber nicht ob das klappt. Den von Zottel genannten String “olPopupContent” gibt es in meiner Map.css nicht. Dort heißt das “olFramedCloudPopupContent”. Wenn man da einen Farbparameter dazu schreibt, kriegt man eine Hintergrundfarbe in Form eines rechteckigen Blocks. Schöner wäre es natürlich, wenn das ganze Popup farbigen Hinergrund hätte. So sieht es noch ein wenig nach Bastelei aus.

Weiß da jemand noch etwas?

Danke für Antworten
Frank

P.S: Wie schreibt man so einen

Markus_B · June 20, 2009, 7:54pm

So, jetzt wollte ich das endlich mal umsetzen… danke für die differenzierte Anleitung!

ok.

Wo muss ich das hinschreiben? In die OSM-Karte-Funktionen.js ?
Umd wo finde ich die PNGs für die Marker? gibts da irgendwo nette Grafiken? die muss ich ja lokal speichern.

Das gehört in die HTML?
Dort rufe ich aber eine XML auf, die die Koordinaten für die Punkte enthält:
var lSitzbaGpx = new OpenLayers.Layer.GPX(“Sitzbänke”, “…/osm/Sitzbank.gpx”, “#0000FF”);
map.addLayer(lSitzbaGpx); lSitzbaGpx.setVisibility(false);

Vielleicht hatte ich ja meine Frage unverständlich formuliert. Ich meinte:
Wie kann ich mit jeder XML je andere Icons verwenden?
Damit wenn mehrere XMLs angezeigt werden, ihre Punkte anhand der Marker unterschieden werden können.

Hm - vielleicht wäre es einfacher, wir machen mal eine Teamviewer-Sitzung und telefonieren zusammen?

Gruss, Markus