Javascript – Using discrete colors for map fill in mapboxgl instead of default interpoolated colors?

Instead of stops, you can use match.

map.on('load', function () {
  map.addSource('bb', { type: 'geojson', data: data, generateId: true });
  map.addLayer({
    'id': 'berlin',
    'type': 'fill',
    'source': 'bb',
    'paint': {
      'fill-color': [
        'match',
        ['get', 'some_numeric_val'],
        4, '#feebe2',
        8, '#fbb4b9',
        12, '#f768a1',
        16, '#c51b8a',
        20, '#7a0177',
        // Add a default color if no values match
        '#000000', // Example - black
      ],
      'fill-opacity': 0.65,
    },
  });
  map.addLayer({
    'id': 'berlin-stroke',
    'type': 'line',
    'source': 'bb',
    'paint': {
      'line-color': '#000',
      'line-width': ['case', ['boolean', ['feature-state', 'hover'], false], 2, 0.5],
    },
  });
});

In the example provided above, match compares some_numeric_val to each value and returns the color if there’s a match. If there isn’t, it returns a default color that you can set.

EDIT: To also include a value between the specified range of values you have to preprocess the data first.

Here’s an example of how:

map.on('load', function () {
  // Example data
  const data = [
    { id: 1, some_numeric_val: 3 },
    { id: 2, some_numeric_val: 6 },
    { id: 3, some_numeric_val: 10 },
  ];

  // Set ranges
  const colorOptions = [
    { value: 4, color: '#feebe2' },
    { value: 8, color: '#fbb4b9' },
    { value: 12, color: '#f768a1' },
    { value: 16, color: '#c51b8a' },
    { value: Infinity, color: '#7a0177' } // values > 16
  ];

  // Preprocess the data
  function preprocessData(data, colorOptions) {
    colorOptions.sort((a, b) => a.value - b.value);

    const preprocessedData = data.map((feature) => {
      const currentValue = feature.some_numeric_val;
      let color;
      // Find the appropriate color for the current value
      for (let i = 0; i < colorOptions.length; i++) {
        if (currentValue <= colorOptions[i].value) {
          color = colorOptions[i].color;
          break;
        }
      }
      return { ...feature, color };
    });
    return preprocessedData;
  }

  const preprocessedData = preprocessData(data, colorOptions);

  map.addSource('bb', { type: 'geojson', data: { type: 'FeatureCollection', features: preprocessedData }, generateId: true });
  map.addLayer({
    'id': 'berlin',
    'type': 'fill',
    'source': 'bb',
    'paint': {
      'fill-color': ['get', 'color'],
      'fill-opacity': 0.65
    }
  });
  map.addLayer({
    'id': 'berlin-stroke',
    'type': 'line',
    'source': 'bb',
    'paint': {
      'line-color': '#000',
      'line-width': [
        'case',
        ['boolean', ['feature-state', 'hover'], false],
        2,
        0.5
      ]
    }
  });
});