Unterschiedliche Markerfarben einbinden

Communities Deutschland (Germany)
1

Hi Leute!

Wollte fragen wie man bei meiner OL OSM verschiedene Farben für die Marker einbinden kann!


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

    var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));
    var feature = new OpenLayers.Feature(layer, ll);
    feature.closeBox = true;
    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(180, 180) } );
    feature.data.popupContentHTML = popupContentHTML;
    feature.data.overflow = "hidden";

    var marker = new OpenLayers.Marker(ll);
    marker.feature = feature;

    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();
        }
        OpenLayers.Event.stop(evt);
    };
    marker.events.register("mousedown", feature, markerClick);

    layer.addMarker(marker);
  //  map.addPopup(feature.createPopup(feature.closeBox)); Popups sollen nicht sofort angezeigt werden


    /*

    */
}

Hier meine Funktion für das Erstellen eines Markers.
Mir fällt nun leider keine Möglichkeit auf die Farbe anzupassen.
Ich kann mir allerdings vorstellen, dass es im Übergabeparameter der Funktion vielleicht ein Schlupfloch gibt.
LG Triceps

2

Welche OpenLayers-Version ist das?
OpenLayers.Marker gilt seit OL2 als deprecated.

3

Sowas wie da drüben verlinkt mit den roten und gelben Bommeln? Das icon ist der zweite Parameter von OpenLayers.Marker(), wobei ein icon aus einem Bild, einer Größe und einem Versatz besteht. Das Handbuch erklärts: http://dev.openlayers.org/docs/files/OpenLayers/Marker-js.html

Marker musst selber malen, oder Dich mit den mitgelieferten begnügen. Soweit ichs seh gibts die in rot, blau, gold und grün: https://github.com/openlayers/ol2/tree/master/img

4

Entschuldigung, was meinen Sie mit roten und grünen Bommeln?
Ich begnüge mich gerne mit den mitgelieferten! Vielen Dank für die schnellen Antworten!

5

Also ich habe mir meinen vorhandenen Code angesehen und ihn mit dem Beispielcode verglichen.

Das ist mein Code:


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


    var ll = new OpenLayers.LonLat(Lon2Merc(lon), Lat2Merc(lat));
    var feature = new OpenLayers.Feature(layer, ll);
    feature.closeBox = true;
    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(180, 180) } );
    feature.data.popupContentHTML = popupContentHTML;
    feature.data.overflow = "hidden";

    var marker = new OpenLayers.Marker(ll);
    marker.feature = feature;

    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();
        }
        OpenLayers.Event.stop(evt);
    };
    marker.events.register("mousedown", feature, markerClick);

    layer.addMarker(marker);

schaut im html dann bei mir so aus:


map = new OpenLayers.Map('map', {
        projection: new OpenLayers.Projection("EPSG:900913"),    //Geodaten
        displayProjection: new OpenLayers.Projection("EPSG:4326"), //Geodaten
        controls: [
            new OpenLayers.Control.Navigation(),   //Einbinden des
            new OpenLayers.Control.LayerSwitcher(),
            new OpenLayers.Control.PanZoomBar()],
        maxExtent:
            new OpenLayers.Bounds(-20037508.34,-20037508.34,
                                    20037508.34, 20037508.34),
        numZoomLevels: 18,
        maxResolution: 156543,

        units: 'meters'
    });

    layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
    layer_markers = new OpenLayers.Layer.Markers("Address", { projection: new OpenLayers.Projection("EPSG:4326"),
    	                                          visibility: true, displayInLayerSwitcher: false });

    map.addLayers([layer_mapnik, layer_markers]);
    jumpTo(lon, lat, zoom);

    // Position der Marker
    //Betteln
    addMarker(layer_markers,  9.9387, 49.7684, popuptextbetteln);
    addMarker(layer_markers,  9.9587, 49.7684, popuptextbetteln);
    addMarker(layer_markers, 9.9787, 49.7884, popuptextbetteln);
    addMarker(layer_markers, 9.9587, 49.7884, popuptextbetteln);
    addMarker(layer_markers, 9.9888, 49.8000, popuptextbetteln);
    addMarker(layer_markers, 9.9355, 49.7800, popuptextbetteln);
    addMarker(layer_markers, 9.9155, 49.7800, popuptextbetteln);
    addMarker(layer_markers, 9.9355, 49.7900, popuptextbetteln);
    addMarker(layer_markers, 9.9375, 49.7850, popuptextbetteln);
    addMarker(layer_markers, 9.9355, 49.7800, popuptextbetteln);
    addMarker(layer_markers, 9.9405, 49.7850, popuptextbetteln);
    addMarker(layer_markers, 9.9255, 49.7800, popuptextbetteln3);
    //Position der Motels
    addMarker(layer_markers, 9.9588, 49.8000, popuptextbetteln2);
    addMarker(layer_markers, 9.9488, 49.7800, popuptextbetteln2);

    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);

das ist der Code wie er auf der von Ihnen verlinkten Webseite aufgeführt wird:


var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);

var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon));
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon.clone()));

Mir fehlen also im obrigen Beispiel Variablen wie icon oder offset bzw. icon. Ich habe verstanden, dass man hier über den Konstruktor einen neuen Marker erstellt und scheinbar das Bild im Parametern übergibt. Daher komme ich zu dem Schluss, dass es nicht in den Java Script Teil meines Codes gehört, sondern in den html. Ich hab jetzt einiges probiert, leider zeigt mir Chrome keine Veränderung an meiner Webseite.

Schade. Hatte mich echt gefreut und dachte die Lösung wäre so einfach.
Gibt es vielleicht noch einen anderen Weg?
Scheinbar arbeite ich hier mit einer anderen Version als von euch veranschlagt…
Hoffe jemand weiss warum es bei mir nicht funktioniert.
Vielen Dank!

LG Triceps

6

Hier sind 2 rote und 1 gelber Marker zu sehen. Und üblicherweise duzen wir uns hier.

Dein Program mit roten Markern, Dein Program mit gelben Markern. Da steht statt

var marker = new OpenLayers.Marker(ll);

für den roten Marker dann

var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('../osmjs/OpenLayers/img/marker-gold.png', size, offset);    
var marker = new OpenLayers.Marker(ll,icon);

wenn man gelbe Marker will. Der Pfad zum Icon-Bildchen wird bei dir sicher anders sein, bei mir liegt OpenLayers eben auf “…/osmjs/OpenLayers/”. Schau einfach, wo der rote Marker liegt (der heisst nur “marker.png”), daneben liegt der goldene.

Grüße
Max

7

Vielen Dank Max!
Ich habe es geschafft das Icon nun zu ersetzten. Allerdings ist es nicht der Blaue Marker, so wie ich es im Sinn hatte, sondern einfach ein Bild-Icon.
Folgendes Problem hat sich bei mir ergeben. Ich finde diesen osmjs/OpenLayers Order nicht. Wie man meinem obrigen Code entnehmen kann, ist das Rote Icon scheinbar nicht auf meinem Rechner gespeichert…so erscheint es zumindest.
Wie ist es denn möglich den besagten OSM Ordner zu finden?

LG Triceps

8

Irgendwo in deiner Seite steht sowas wie

<script src="http://dev.openlayers.org/OpenLayers.js"></script>

(vermutlich recht weit oben). Da drunter gibts dann einen Ordner “img” mit den Markern, den grünen z.B hier: http://dev.openlayers.org/img/marker-green.png
Alternativ kannst dir die Marker (von hier oder da) auch runterladen und auf deinem Server ablegen.