How to render satellite imagery as a background while keeping layers from a custom map style?

[victorcg03]

❓ How to render satellite imagery as a background while keeping layers from a custom map style?

Hi everyone 👋

I'm working on a React Native app using maplibre-react-native and I'm trying to combine a satellite imagery background (from ArcGIS) with a full vector tile style (labels, borders, etc.) defined in a large custom root2.json style file (35k+ lines).

Here is my current setup:

<MapView
  ref={mapRef}
  style={styles.map}
  zoomEnabled
  scrollEnabled
  pitchEnabled
  rotateEnabled
  logoEnabled={false}
  compassEnabled
  compassViewPosition={1}
  onRegionDidChange={handleRegionChange}
  localizeLabels
  mapStyle={require("../root2.json")} // Custom style with boundaries, labels, etc.
>
  {/* Satellite imagery as background */}
  <RasterSource
    id="esri-imagery"
    tileSize={512}
    tileUrlTemplates={[
      "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    ]}
  >
    <RasterLayer
      id="esri-imagery-layer"
      sourceID="esri-imagery"
      style={{ rasterOpacity: 1 }}
    />
  </RasterSource>

  <UserLocation
    animated
    visible
    renderMode="normal"
    androidRenderMode="normal"
    showsUserHeadingIndicator
  />

  <Camera
    ref={cameraRef}
    maxZoomLevel={20}
    animationDuration={2000}
    animationMode="flyTo"
    defaultSettings={{
      centerCoordinate: [currentRegion.longitude, currentRegion.latitude],
      zoomLevel: 15,
    }}
  />
</MapView>

As soon as I add the RasterSource, everything from the mapStyle (root2.json) disappears. I assume it's because the raster layer is rendered on top, and it's not being handled inside the style file.

What I would like to achieve is:

• Have the satellite imagery as the background.
• Keep all the layers from the custom vector tile style (root2.json) on top (city names, boundaries, etc.).
• Do this without having to manually extract and insert all the layers from the JSON file into React Native — because the style file is very large and dynamic.

---

Questions:

1. Is it possible to render a raster tile background behind a full custom style defined via mapStyle?
2. If not, what would be the recommended way to merge both the raster background and vector layers?
3. Can I somehow inject the RasterLayer at the bottom of my existing mapStyle automatically or programmatically?
4. Any examples or tools for modifying the style JSON to insert this base imagery layer at the correct position?

Thanks in advance for any help or ideas 🙏

[KiwiKilian]

You can direct your RasterLayer to be placed above or below a specific layer using the aboveLayerID or belowLayerID.

[niranjan-talkinglands]

But there is no prop called aboveLayerID or belowLayerID

[KiwiKilian]

Yes there is, the documentation generator is broken.

maplibre-react-native/src/components/RasterLayer.tsx

Line 15 in 4e5067c

export interface RasterLayerProps extends BaseProps, BaseLayerProps {

maplibre-react-native/src/hooks/useAbstractLayer.ts

Lines 29 to 36 in 4e5067c

	/**
	* Inserts a layer above aboveLayerID.
	*/
	aboveLayerID?: string;
	/**
	* Inserts a layer below belowLayerID
	*/
	belowLayerID?: string;

[Niranjan-A-S]

Yeah got it. Thanks @KiwiKilian