JS Variation to color map pins

Design help CMS
1

Hi there,

I’m having an issue with this javascript variation and connecting it with the CMS?

To give some background, I’ve loaded a Mapbox map, with map pins that are pulled from a collection ‘Scotland’, with resorts, repair stores and rental locations. Each of which have a different color on the map.

Here is the code that calls ‘TypeToColor’ function:

function addMapPoints() {
    /* Add the data to your map as a layer */
    map.addLayer({
        id: "locations",
        type: "circle",
        /* Add a GeoJSON source containing place coordinates and information. */
        source: {
            type: "geojson",
            data: mapLocations,
        },
        paint: {
            "circle-radius": 8,
            "circle-stroke-width": 1,
            "circle-color": [
                "match",
                ["get", "type"],
                "type1", "#FF5733", // Color for type1
                "type2", "#33FFA3", // Color for type2
                "type3", "#3352FF", // Color for type3
                "type4", "#FF33D3", // Color for type4
                "#1E1E1E" // Default color if 'type' doesn't match any
            ],
            "circle-opacity": 1,
            "circle-stroke-color": "#405F3B",
        },
    });

</script>

In the Webflow CMS I've added a plain text element named 'type'. Is this correct? 

Thanks for any input and feedback on this. 

Hamish

https://preview.webflow.com/preview/outlas?utm_medium=preview_link&utm_source=designer&utm_content=outlas&preview=ff858c537bb8cfa40fa1d18265455d18&pageId=6511bd694bfff95c152db647&workflow=preview

----------

Here is my public share link: **[LINK][1]**
([how to access public share link][2])


  [1]: http://
  [2]: https://help.webflow.com/article/how-do-i-share-my-sites-read-only-link
2

Hey Hamish,
Do you mind sharing your read only link, & also the source to where you got that code snippet?

I don’t want to assume since i’m not sure how this function is supposed to be formatted yet, however I did notice what I believe to be syntax errors. Here is an updated code, let me know if this works.

function addMapPoints() {
  /* Add the data to your map as a layer */
  map.addLayer({
    id: "locations",
    type: "circle",
    /* Add a GeoJSON source containing place coordinates and information. */
    source: {
      type: "geojson",
      data: mapLocations,
    },
    paint: {
      "circle-radius": 8,
      "circle-stroke-width": 1,
      "circle-color": [
        "match",
        ["type1", "#FF5733"], // Color for type1
        ["type2", "#33FFA3"], // Color for type2
        ["type3", "#3352FF"], // Color for type3
        ["type4", "#FF33D3"], // Color for type4
        "#1E1E1E", // Default color if 'type' doesn't match any
      ],
      "circle-opacity": 1,
      "circle-stroke-color": "#405F3B",
    },
  });
}