Papa Parse and Leaflet integration for icons

Question

I'm trying to use PapaParse to pull from a Google Sheets CSV which has lat/lon and some options for setting markers with different icons in Leaflet. Everything appears to be working fine. The markers get set correct with the correct color from the CSV. The problem is that the icons aren't loading, even though the console log shows them as parsing correctly.

Here's the spreadsheet: https://docs.google.com/spreadsheets/d/1cGkXzVfq3gE5hRFEj9f2_ffKPjei57R3J99n_t0zy6M/edit?usp=sharing

Here's the full javascript:

 // URL for points CSV download
let pointsURL =
  "https://docs.google.com/spreadsheets/d/e/2PACX-1vSXery2RhtJDVQox_vzESecIMee9nsQZvs7j7IP6SI0huDOV7wSNX_2DEuKdHpR6jXs0Ft1sKukr5pG/pub?output=csv";
window.addEventListener("DOMContentLoaded", init);

// Map function
function init() {
    // Create map
    map = L.map("map").setView([40.749299,  -73.978141], 11);
    L.tileLayer(
      "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png",
      {
        maxZoom: 19,
      }
    ).addTo(map);

    //Parse google sheets
    Papa.parse(pointsURL, {
        download: true,
        header: true,
        complete: addPoints,
      });
    }

    //add points from CSV to the map
    function addPoints(data) {
        data = data.data;

    //create a layer group to add the points to
    let pointGroupLayer = L.layerGroup().addTo(map);
    let markerType = "marker";
    let markerRadius = 100;

    for (let row = 0; row < data.length; row++) {
        let marker;
        marker = L.marker([data[row].lat, data[row].lon]);

    //add custom icons from Google Sheet CSV
    console.log(data[row].color); 
    console.log(data[row].icon); 
    
    let icon = L.AwesomeMarkers.icon({
      icon: data[row].icon,
      markerColor: data[row].color,
      prefix: "fa"
    });
    marker.setIcon(icon);
    marker.addTo(pointGroupLayer);
    }
    }

It appears that icon: data[row].icon isn't working. If I do icon: "info-circle", which is also how it is it my CSV, it works just fine. The console.log(data[row].icon) shows "info-circle". Any ideas?

Answer 1

Remove " from the icon string in the Sheet. "bicycle" to bicycle

Maybe else it has blanks and you need to trim the icon string