How do we use fill-pattern with React

[rafaqz]

I'm trying to use fill-pattern property of paint with some vector tile layers, and not having much success. The key difference with fill-color (which is working fine) is that fill-pattern needs to load an image before it can be used. This seems simple enough in imperative maplibre gl code map.loadImage() / map.addImage(), but my attempts with react have just led to race conditions on the image resource.

Has anyone got fill-pattern working with react-map-gl? Or have any ideas how to?

[nazari2079]

You can use fill-pattern in react-map-gl, but the key is that the image you want to reference must be added to the map before the layer is created. In React, this means you need to wait for the onLoad event (or use useEffect with the Map instance) and call map.addImage() imperatively. If the image is not loaded before the layer tries to use it, nothing will render.

import { Map, Source, Layer } from 'react-map-gl';
import patternSrc from './pattern.png'; // any local image

export default function Example() {
  const handleMapLoad = async (event) => {
    const map = event.target;

    // Load the image and register it in the map style
    if (!map.hasImage('my-pattern')) {
      const img = await loadImage(map, patternSrc);
      map.addImage('my-pattern', img);
    }

    // After this, any layer referencing "my-pattern" in fill-pattern will work
  };

  return (
    <Map
      mapStyle="mapbox://styles/mapbox/light-v11"
      onLoad={handleMapLoad}
      {...yourMapProps}
    >
      <Source
        id="my-geojson"
        type="geojson"
        data={yourGeoJson}
      />
      <Layer
        id="pattern-fill"
        type="fill"
        source="my-geojson"
        paint={{
          'fill-pattern': 'my-pattern'
        }}
      />
    </Map>
  );
}

// Helper: load image via mapbox-gl API
function loadImage(map, src) {
  return new Promise((resolve, reject) => {
    map.loadImage(src, (err, data) => {
      if (err) reject(err);
      else resolve(data);
    });
  });
}

• fill-pattern values must match the name passed to map.addImage().
• The image must be added before the layer is rendered, otherwise the paint property is silently ignored.
• You cannot use fill-pattern purely declaratively—some imperative setup is required when working with Mapbox GL / MapLibre.

If you try to define the <Layer /> before the pattern image is registered, React will mount the layer too early and the pattern will fail. Triggering the image setup in the onLoad event ensures the timing works correctly.