title: Change class of Mapbox marker depending on object's category with JavaScript
body: <p>I am trying to display different markers on a Mapbox map, but my code doesn't seem to do what expected.
  I am pulling data from a WordPress custom post type (variables used are already defined):</p>
  
  <pre><code>function makeObjectsArray() {
  
    for(var i = 0; i &lt; data.length; i++) {
      placeTitle = data[i].title.rendered;
      placeLong = data[i].acf.longitude;
      placeLat = data[i].acf.latitude;
      placeCategory = data[i].categories;
      place = {
        type: "Feature",
        geometry: {
          type: "Point",
          coordinates: [placeLong, placeLat]
        },
        properties: {
          title: placeTitle,
          category: placeCategory
        }
      };
      placesArray.push(place);      
      categoriesArray.push(placeCategory.toString());//this will create a list of category IDs
    };
  
  };
  makeObjectsArray();
  </code></pre>
  
  <p>and placing them in a variable:</p>
  
  <pre><code>var geojson = {
     type: 'FeatureCollection',
     features: placesArray //an array containing the coordinates and other properties from the custom post type
  };
  </code></pre>
  
  <p>Then I'm creating markers (div's):</p>
  
  <pre><code>geojson.features.forEach(function(marker) {
  
     // create a HTML element for each feature
     var el = document.createElement("div");
     // I'm adding a class that sets "background-image" of the marker
     el.className = "marker";
  
     new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)
    .addTo(map);
  
   });
  </code></pre>
  
  <p>The code above works fine, but I wanted to have different markers for different categories of the places. To do that I was trying to add different classes for different category IDs (let's say I have only two categories with IDs 2 and 3):</p>
  
  <pre><code>geojson.features.forEach(function(marker) {
  
    // create a HTML element for each feature
  var el = document.createElement("div");
  el.className = "marker";
  
  for(var k = 0; k &lt; categoriesArray.length; k++) {
      var classCat = "";
        if (categoriesArray[k] == 2) {
  
          classCat = "marker cat2";
          el.className = "";            
          el.className = classCat;
  
        } else if (categoriesArray[k] == 3) {
  
          classCat = "marker cat3";
          el.className = ""; 
          el.className = classCat;
    }
  }
  
  
    // make a marker for each feature and add to the map
    new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)
    .addTo(map);
  
  });
  </code></pre>
  
  <p>Classes <code>.cat2</code> and <code>.cat3</code> hold different markers (background urls). The code above gives all the markers class <code>.cat2</code>. I suspect there is some kind of error in my JavaScript logic, but I tried many variations of the above and I can't work it out. Any help would be appreciated.</p>