A few styling tips for the MapBox GL map

README.md

Setting the style for the MapBox GL map template

Using a color scale

If you have a property called rating that goes from 0-10, this code will fill in your shape based on it. 1 will be a very light blue, 5 will be a slightly darker blue, and 10 will be even more dark. Numbers in between will be estimated (interpolated). Note that including the 5 level was not necessary - if rating were 5, MapBox GL would have guessed a color in between the 1 color and the 10 color.

'fill-color': [
      'interpolate', ['linear'],
      ["to-number", ["get", "rating"]],  
      1, "#ece2f0", 
      5, "#a6bddb",
      10, "#1c9099" 
],

Setting the circle-radius

Use the radius property from the GeoJSON, and make sure it's a number.

'circle-radius': ['to-number', ['get', 'radius']],

If you always wanted it to be the same thing, just use a number.

'circle-radius': 5,

Setting the circle-opacity

If the point is being hovered, set the opacity to 1. If not, set it to 0.5.

'circle-opacity': [
      'case',
      ['boolean', ['feature-state', 'hover'], false],
      1,
      0.5
    ]

Setting the circle-color

If the point is being hovered, set it to #666. If not, use the color property. You don't need the to-number thing we used with circle-radius because it isn't a number.

'circle-color': [
  'case',
  ['boolean', ['feature-state', 'hover'], false],
  '#666',
  ['get', 'color'],
],

If you didn't care about hovering, you could just use the color property from the GeoJSON.

'circle-color': ['to-number', ['get', 'color']],