GeoJSON Polygon

let map: maplibregl.Map | undefined;
let loaded: boolean;
let textLayers: maplibregl.LayerSpecification[] = [];
$: if (map && loaded) {
  textLayers = map.getStyle().layers.filter((layer) => layer['source-layer'] === 'place');
}

$: colors = contrastingColor(fillColor);
$: if (map && loaded) {
  for (let layer of textLayers) {
    map.setPaintProperty(layer.id, 'text-color', colors.textColor);
    map.setPaintProperty(layer.id, 'text-halo-color', colors.textOutlineColor);
  }
}

let filterStates = false;
$: filter = filterStates ? ['==', 'T', ['slice', ['get', 'NAME'], 0, 1]] : undefined;

<MapLibre
  bind:map
  bind:loaded
  style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
  class={mapClasses}
  standardControls
  center={[-98.137, 40.137]}
  zoom={4}
>
  <GeoJSON id="states" data={states} promoteId="STATEFP">
    {#if showFill}
      <FillLayer
        paint={{
          'fill-color': hoverStateFilter(fillColor, colors.hoverBgColor),
          'fill-opacity': 0.5,
        }}
        {filter}
        beforeLayerType="symbol"
        manageHoverState
      />
    {/if}
    {#if showBorder}
      <LineLayer
        layout={{ 'line-cap': 'round', 'line-join': 'round' }}
        paint={{ 'line-color': borderColor, 'line-width': 3 }}
        beforeLayerType="symbol"
      />
    {/if}
  </GeoJSON>
</MapLibre>