Pfthb

I am building a website with Leaflet map that uses a data source to populate the map and the popups. Here is how my JSON data looks like:

 "time_exo": null,
 "time_stm": 1541787833,
 "results": [
 
 "agency": "STM",
 "icon": "busSTMIcon",
 "vehicle_id": "22210",
 "route_id": "55",
 "trip_id": "188767688",
 "start_time": "12:59:00",
 "start_date": "20181109",
 "current_stop_sequence": 20,
 "current_status": 2,
 "lat": 45.52397,
 "lon": -73.59475
 ,
 ...

Here is my JavaScript code:

 $.get(dataUrl, function(data, pos_status) 
 console.log("pos call result: " + pos_status);
 // show data on map
 data.results.forEach(function(element) 
 L.marker(L.latLng(element.lat, element.lon), 
 icon: busSTMIcon
 ).addTo(posLayer)
 .bindPopup("<h3>" + element.agency + " " + element.vehicle_id + "</h3><b>Trip: </b> " + element.trip_id + "<br><b>Route: </b>" + element.route_id + "<br><b>Start: </b>" + element.start_date + element.start_time + "<br><b>Current stop sequence: </b>" + element.current_stop_sequence + "<br><b>Status: </b>" + element.current_status);
 );
 );

Here is how I declare my busSTMIcon :

var busSTMIcon = L.icon(
 iconUrl: 'https://felixinx.github.io/mtl-gtfs-rt/assets/map-bus-stm.svg',
 iconSize: [20, 20]
);

Currently I use the static way which causes all markers to have the same icon. I would like to have the icon based on my data source. What would be the best way to achieve this?

If you create the icon variable as part of an object (to which you could add other icons):

var icons = 
 "busSTMIcon" : L.icon( iconUrl: 'https://felixinx.github.io/mtl-gtfs-rt/assets/map-bus-stm.svg', iconSize: [20, 20] ) 
; 

and then you would write

icon: icons[element.icon] 

(instead of icon: busSTMIcon)

then it would dynamically pick the right item from the icons object based on the string in element.icon