Config on root style with dynamic source

by Tristen Brown

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v3.15.0/mapbox-gl.js"></script>
<link
  href="https://api.mapbox.com/mapbox-gl-js/v3.15.0/mapbox-gl.css"
  rel="stylesheet"
/>
<link
  href="https://api.mapbox.com/mapbox-assembly/mbx/v1.2.0/assembly.min.css"
  rel="stylesheet"
/>
<div id="map" class="absolute top bottom left right w-full"></div>

JavaScript

mapboxgl.accessToken =
  "pk.eyJ1IjoibWFwYm94c2F0ZWxsaXRlIiwiYSI6ImNqZWZ0MHg0djFqZWoyeG9kN3ZiMmkyd3cifQ.y2HNjGo7FcKQ7psI_BfGqQ";

const data = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {},
      geometry: {
        type: "Point",
        coordinates: [-104.1498, 44.7627],
      },
    },
  ],
};

const style = {
  version: 8,
  imports: [{ id: "underlay", url: "mapbox://styles/mapbox/standard" }],
  glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
  sources: {},
  schema: {
    color: {
      default: "red",
      type: "color",
    },
  },
  layers: [],
};

const map = (window.map = new mapboxgl.Map({
  container: "map",
  center: [-104.1498, 44.7627],
  zoom: 6,
  style,
}));

map.on("load", () => {
  map.setStyle({
    ...style,
    sources: {
      dynamicFeatures: {
        type: "geojson",
        data,
      },
    },
    layers: [
      {
        id: "dynamic-feature",
        type: "circle",
        source: "dynamicFeatures",
        minzoom: 3,
        paint: {
          "circle-radius": 10,
          "circle-color": ["config", "color"],
        },
      },
    ],
  });

  map.once('styledata', () => {
    map.setConfigProperty('basemap', 'color', 'green');
  });
});