Mapbox and webflow CMS - Having multiple countries highlighted

Hi,

Wondering if anyone can help. I’m trying to integrate mapbox on a CMS template page which will highlight countries (one or multiple) depending on where a particular species can be found.

I have got this to work with one county using the CMS, but if you add multiple it causes issues.

This is the code to highlight the country

map.setFilter(‘country-boundaries’, [
“in”,
“iso_3166_1_alpha_3”,
‘ZAF’,

  ]);

Where ZAF is the country code. So for one country, I can just add a field from the CMS and it replaces it correctly.

For multiple countries, for it to work have to be listed as follows

‘ZAF’, ‘EGY’, ‘AUS’

The issue I’m having, is that if I add the ‘’ in the CMS it replaces them on the live site.

So i’ve had to add the countries as follows within the CMS… ZAF,EGY,AUS

I’m using the following code, to convert that into the correct format which can be seen below

const isomap = “countryids”;

  const countriesArray = isomap.split(',');
  const cA = countriesArray.map(x => "'" + x + "'").toString();

My issue is how to add this into the main code. As it keeps adding double quotes to the item in the array, which stops it from working.

Does anyone have any ideas? Hopefully I’ve explained it well enough.

Thank you in advance,

David

Here is my public share link: LINK
(how to access public share link)