Изменить значок на основе JSON атрибутов

Question

Вот карта, я работаю над:

http://members.upcpoczta.pl/w.racek/mapa.html

Я хотел бы изменить значок, который показывает в правом верхнем углу Infobox (при выборе маршрута) соответственно к свойствам файла JSON (цветовой тег). Существует 5 базовых цветов, используемых для маркировки велосипедных маршрутов (синий, красный, зеленый, желтый, черный и без цвета), почти все из них имеют цвет (возможно, 10% имеют символ или разную маркировку). У меня есть 5 значков png, которые должны быть связаны с этим. На данный момент мне удалось установить простую ссылку html, и она отображает только красный значок, но, возможно, есть способ изменить его в соответствии с json-свойствами?

Вот часть кода, который отвечает за показ этой инфобокса: var info = L.control();

info.onAdd = function (map) { 
     this._div = L.DomUtil.create('div', 'info'); 
     this.update(); 
     return this._div; 
    }; 

    info.update = function (props) { 
     this._div.innerHTML = (props ? 
      '<b>' + '<img src="img/red.png " height="42" width="42" > ' + props.name 
      : 'Kliknij na szlak'); 
    }; 

    info.addTo(map); 

Прямо сейчас значок всегда красный.

Я благодарен за советы. Благодаря!

Answer 1

код используется неправильно, чтобы начать с:

this._div.innerHTML = (props ? 
     '<b>' + '<img src="img/red.png " height="42" width="42" > ' + props.name 
     : 'Kliknij na szlak'); 

Моя догадка вас пытаются использовать ternary operator. Это не работает. Например, когда один, как правило, делают это:

var value = 'foobar'; 
var result; 

if (value === 'foobar') { 
    result = true; 
} else { 
    result = false; 
} 

С тройным вы можете написать это обсчитывать так:

var value = 'foobar'; 
var result = (value === 'foobar') ? true : false; 

Или в этом примере при возврате булево true или false, можно даже сделать это (но то далеко за пределы точки здесь):

var value = 'foobar'; 
var result = (value === 'foobar'); 

Ваш синтаксис далеко или я, не понимая, что вы пытаетесь сделать. Далее для строки concatination вы делаете:

'<b>' + '<img src="img/red.png " height="42" width="42" > ' 

Может быть просто записать в виде:

'<b><img src="img/red.png " height="42" width="42" > ' 

Теперь для фактического решения с использованием троичной оператора и CONCAT:

this._div.innerHTML = (props) ? 
     '<b><img src="img/' + props.color + '.png " height="42" width="42" >' + props.name + '</b>' : 
     'Kliknij na szlak'; 

Doing его a нормальный оператор:

if (props) { 
    this._div.innerHTML = '<b><img src="img/' + props.color + '.png " height="42" width="42" >' + props.name + '</b>'; 
} else { 
    this._div.innerHTML = 'Kliknij na szlak'; 
} 

Я предлагаю использовать последний, если у вас возникнут проблемы с этим. Это легче понять, поэтому вы вряд ли допустите ошибки.

Answer 2

Я посмотрел ваш источник, proops получил название и цвет, так что вы можете попробовать это:

info.update = function (props) { 
var color='red'; //default color 
if(props.colour) 
    color=props.colour; 

    this._div.innerHTML = (props ? 
     '<b>' + '<img src="img/'+color+'red.png " height="42" width="42" > ' + props.name 
     : 'Kliknij na szlak'); 
};