Formatting the style of Mapbox component

Question

I am currently using React as Frontend and ReactMapGL as my map component and I'm trying to style it so that all my continents have different colors. I tried styling in all the different templates provided, But I can only change the water and land color in http://studio.mapbox.com . Is it possible to make this change happen?

Answer 1

You'd have to overlay a continent layer on your map and then conditionally style it based on your own color/continent mapping logic.

You can get the data (geojson) for the continent layer by searching for it.

  const continentLayer = {
    id: "continents",
    type: "fill",
    source: {
      type: "geojson",
      data: continents
    },
    paint: {
      "fill-color": [
        "match",
        ["get", "CONTINENT"],
        "Asia",
        "red",
        "Europe",
        "Green",
        /* default */ "yellow"
      ]
    }
  };

  <Layer {...continentLayer} />

Here's a codesandbox with a working example: https://codesandbox.io/s/color-xd1cw?file=/src/App.js (also take a look at continent.json)