Mapbox Styling

March 27, 2025 (4mo ago)

The need fill and stroke style need to be in different layer.


const layerFillStyle = {
  id: "geojson-fill",
  type: "fill",
  paint: {
    "fill-color": "#0080ff", // Fill color
    "fill-opacity": 0.5, // Transparency
  },
};

const layerOutlineStyle = {
  id: "geojson-outline",
  type: "line",
  paint: {
    "line-color": "#ff0000", // Stroke color (red)
    "line-width": 2, // Stroke width
  },
};



<Source id="geojson-source" type="geojson" data={geojsonData}>
  <Layer {...layerFillStyle} />
  <Layer {...layerOutlineStyle} />
</Source>