Unterschiedliche Markerfarben einbinden

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

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/Op … er-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

maxbe wrote:

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/Op … er-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

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!

triceps wrote:

maxbe wrote:

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/Op … er-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

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!

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

triceps wrote:

Entschuldigung, was meinen Sie mit roten und grünen Bommeln?

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

maxbe wrote:

triceps wrote:

Entschuldigung, was meinen Sie mit roten und grünen Bommeln?

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

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

triceps wrote:

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?

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.