Leaflet Marker eigene Icons anhand json Ausgabe

[Meteorologe]

Hallo,
ich habe eine Leaflet Map erstellt, die anstatt des typischen Marker, ein eigenes Icon anzeigt. So weit, so erfreulich, dass dies funktioniert.

$x = parse_coordinate($jshomepage->x);
$y = parse_coordinate($jshomepage->y);
echo "var marker = L.marker([$y, $x], {icon: Bild1}).addTo(map);";

Mein Problem, bei dem ich leider nicht weiter komme und um eure Unterstützung bitte, ist, dass gerne anhand einer json URL Ausgabe, ein entsprechendes Icon angezeigt werden soll. Aktuell ist es so, dass nur Bild1 angezeigt wird. Logisch, da ich als icon: Bild1 verwende

Die json Ausgabe, auf die ich mich gerne berufen möchte, enthält „product“ und danach eine Zahl.
Beispiel: "product" : "1"
Nun hätte ich gerne, wenn bei „product“ eine 1 ausgegeben wird, das von mir definierte icon „Bild1“ angezeigt wird.
Wenn "product" : "2" ausgegeben wird, dann „Bild2“ usw…

Folgendes habe ich in meine Datei zur Definition der Bilder hinterlegt:

var Bild1 = L.icon({
    iconUrl: 'http://xyz.de/IMG_0750.jpeg',


    iconSize:     [20, 20], // size of the icon


});

var Bild2 = L.icon({
    iconUrl: 'http://xyz.de/IMG_0760.jpeg',


    iconSize:     [20, 20], // size of the icon


});

var Bild3 = L.icon({
    iconUrl: 'http://xyz.de/IMG_0770.jpeg',


    iconSize:     [20, 20], // size of the icon


});

Leider habe ich noch nicht heraus gefunden, wie ich bei leaflef anhand einer bestimmten json Ausgabe, jeweils ein anderes Icon verwenden kann.

 

[floq0r]

An L.icon übergibst du ein Object. Wenn du das vorher definierst kannst du es so lösen:

var conf = {
    iconUrl: false,
    iconSize: [20, 20]
}
switch(deinJSON.product)
{
    case 1:
        conf.iconUrl = 'http://xyz.de/IMG_0750.jpeg';
        break;
    case 2:
        conf.iconUrl = 'http://xyz.de/IMG_0760.jpeg';
}
var Bild = L.icon(conf);

 

[Meteorologe]

Danke für die Hilfe. Sieht logisch und sehr gut aus.
Nur leider wird bei mir entweder gar kein Icon mehr angezeigt, oder nur noch das blaue Standard Icon ohne eigenem Bild.

Muss

echo "var marker = L.marker([$y, $x], {icon: Bild}).addTo(map);";

noch bearbeitet werden?

 

[floq0r]

Ich denke nicht, setz zusätzlich sicherheitshalber noch den iconAnchor wie hier beschrieben: https://leafletjs.com/examples/custom-icons/
Ansonsten schau in deine Konsole, können die images geladen werden?