เลเยอร์ GeoJSON

@StateObject private var layerState = GeoJSONLayerState(
    opacity: 1.0,
    layerStyle: GeoJSONTileRenderer.LayerStyle(
        strokeColor: UIColor(red: 30/255, green: 136/255, blue: 229/255, alpha: 0.86),
        fillColor:   UIColor(red: 30/255, green: 136/255, blue: 229/255, alpha: 0.24),
        strokeWidth: 1.5,
        pointRadius: 8.0
    )
)

// ฟิลด์ของ LayerStyle เป็น let จึงต้องเปลี่ยนทั้งโครงสร้าง (alpha อยู่ฝั่ง UIColor)
layerState.layerStyle = GeoJSONTileRenderer.LayerStyle(
    strokeColor: layerState.layerStyle.strokeColor,
    fillColor:   UIColor.systemRed.withAlphaComponent(0.35),
    strokeWidth: layerState.layerStyle.strokeWidth,
    pointRadius: layerState.layerStyle.pointRadius
)

import { colorArgb, colorRgb, argbToCss } from '@mapconductor/react-geojson';

const layerState = useMemo(() => new GeoJSONLayerState({
  strokeColor: colorArgb(220, 30, 136, 229),
  fillColor:   colorArgb(60, 30, 136, 229),
  strokeWidth: 1.5,
  pointRadius: 8,
  opacity: 1,
  minZoom: 8, maxZoom: 22,
}), []);

// ใช้ colorRgb สำหรับสีทึบ และ argbToCss เมื่อแปลงเป็น CSS
const legend = argbToCss(colorRgb(30, 136, 229)); // "rgba(30,136,229,1.0000)"

let parsed = GeoJSONParser.parse(data: data)

let styled = parsed.map { f -> GeoJSONFeature in
    switch f.properties["status"] as? String {
    case "alert":
        var copy = f
        copy.fillColor = UIColor.systemRed.withAlphaComponent(0.47)
        copy.strokeWidth = 3.0
        return copy
    case "closed":
        var copy = f
        copy.visible = false
        return copy
    default:
        return f   // หากปล่อยเป็น nil จะใช้ค่าเริ่มต้นของเลเยอร์
    }
}

const styled = useMemo(() =>
  GeoJSONParser.parseFeatures(GEOJSON).map(f => {
    const status = f.properties.status;
    if (status === 'alert') {
      return { ...f, fillColor: colorArgb(120, 214, 64, 69), strokeWidth: 3 };
    }
    if (status === 'closed') return { ...f, visible: false };
    return f; // หากปล่อยเป็น null จะใช้ค่าเริ่มต้นของเลเยอร์
  }), []);

<GeoJSONLayer state={layerState} features={styled} />

final class DensityStyleProvider: GeoJSONStyleProvider {
    func style(
        for feature: GeoJSONFeature,
        defaultStyle: GeoJSONTileRenderer.LayerStyle
    ) -> GeoJSONTileRenderer.LayerStyle {
        let pop = (feature.properties["population"] as? Int) ?? 0
        let fill: UIColor =
            pop > 500_000 ? UIColor(red: 173/255, green: 20/255, blue: 87/255, alpha: 0.59)
          : pop > 200_000 ? UIColor(red: 244/255, green: 143/255, blue: 177/255, alpha: 0.47)
          : UIColor(red: 248/255, green: 187/255, blue: 208/255, alpha: 0.31)

        return GeoJSONTileRenderer.LayerStyle(
            strokeColor: defaultStyle.strokeColor,
            fillColor: fill,
            strokeWidth: defaultStyle.strokeWidth,
            pointRadius: defaultStyle.pointRadius
        )
    }
}

layerState.styleProvider = DensityStyleProvider()

// บนเว็บ แทนที่จะใช้ StyleProvider ให้ map ผลลัพธ์การแจงข้อมูลแล้ว
// กำหนดสไตล์ให้แต่ละฟีเจอร์ (ผลลัพธ์เหมือนกัน)
const styleOf = (props: Record<string, unknown>) => {
  const pop = Number(props.population ?? 0);
  if (pop > 500_000) return colorArgb(150, 173, 20, 87);
  if (pop > 200_000) return colorArgb(120, 244, 143, 177);
  return colorArgb(80, 248, 187, 208);
};

const features = useMemo(
  () => GeoJSONParser.parseFeatures(GEOJSON)
        .map(f => ({ ...f, fillColor: styleOf(f.properties) })),
  [],
);