Nsryjdtyk

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):

function makeObjectsArray() {



  for(var i = 0; i < 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();

and placing them in a variable:

var geojson = {

   type: 'FeatureCollection',

   features: placesArray //an array containing the coordinates and other properties from the custom post type

};

Then I'm creating markers (div's):

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);



 });

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):

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 < 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);



});

Classes .cat2 and .cat3 hold different markers (background urls). The code above gives all the markers class .cat2. 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.

This code:

for(var k = 0; k < 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;

  }

}

traverses all the elements of categoriesArray and checks for each item whether it is 2 or 3. Subsequently, unless categoriesArray will not change in the meantime for some reason (and there is no sign of that), then either nothing changes if there is no match in the array, or, the last match will be applied for all elements.

Let's consider the example when categoriesArray is [1, 3, 2, 4]

In this case for the first iteration your cycle will not find any matches, at the second iteration it will find the 3 and set classCat, el.className correspondingly, at the third iteration it will find the 2 and will override the values for classCat and el.className set in the previous iteration and lastly 4 will not match 2 nor 3.

Your algorithm, as it is will set the values specified for the last match in the cycle, ignoring anything different from 2 or 3, however, you will need to somehow assign categories to your markers and load those values and then match them to a category class. Also, el.className = ""; is not needed, as you override the very same value in the very next line. Finally, classCat does not seem to be a necessary variable, you could just do domething like el.className = "marker cat2";