Is it possible to render an element (i.e. a View) between the map and a MarkerView?

[theARAking]

Hello!

I'm relatively new to React and React Native. I'm working on an Android app (using Expo) that uses MapLibre React Native, and I'm trying to make an element (i.e. a View) that must display above the map, but I also have a MarkerView that ideally should render above that element (when the MarkerView shows up in the app it allows user input and the data displayed is of more importance than that element, so ideally it should be above everything else). I've tried tweaking the zIndex and/or elevation values of the styles of the involved components, but haven't found a solution yet.

I'm not sure if this is supported by MapLibre React Native or React Native, or if it is supported and I just haven't figured it out yet. I have here a minimal example I made to demonstrate the principle behind what I'm trying to do (here is the index.tsx file):

import React, { useState } from "react";
import { View, Text } from "react-native";
import { FeatureCollection, Feature } from "geojson";
import * as MapLibreRN from "@maplibre/maplibre-react-native";

export default function Index() {

  const [markerViewCoordinate, setMarkerViewCoordinate] = useState<number[] | undefined>(undefined);
  const [selectedFeature, setSelectedFeature] = useState<Feature | undefined>(undefined);

  const layer: FeatureCollection = {
    "type": "FeatureCollection",
    "features": [
      { "type": "Feature", "properties": { "id": 1 }, "geometry": { "type": "Point", "coordinates": [ -86.897454330403093, 52.050075671970824 ] } },
      { "type": "Feature", "properties": { "id": 2 }, "geometry": { "type": "Point", "coordinates": [ -87.04956935607737, 51.984545195159662 ] } },
      { "type": "Feature", "properties": { "id": 3 }, "geometry": { "type": "Point", "coordinates": [ -87.08759811249594, 52.138856270529111 ] } },
      { "type": "Feature", "properties": { "id": 4 }, "geometry": { "type": "Point", "coordinates": [ -86.471532374569605, 52.283330492645753 ] } },
      { "type": "Feature", "properties": { "id": 5 }, "geometry": { "type": "Point", "coordinates": [ -86.281388592476731, 52.232119394489899 ] } },
      { "type": "Feature", "properties": { "id": 6 }, "geometry": { "type": "Point", "coordinates": [ -86.334628619353637, 52.343776707899927 ] } },
      { "type": "Feature", "properties": { "id": 7 }, "geometry": { "type": "Point", "coordinates": [ -87.422251285033923, 52.584736061254198 ] } },
      { "type": "Feature", "properties": { "id": 8 }, "geometry": { "type": "Point", "coordinates": [ -87.56676067547906, 52.487584325728278 ] } },
      { "type": "Feature", "properties": { "id": 9 }, "geometry": { "type": "Point", "coordinates": [ -87.642818188316198, 52.603216870431787 ] } }
    ]
  };

  const dataStyle: MapLibreRN.CircleLayerStyle = {
    circleColor: "orange",
    circleOpacity: 0.5,
    circleRadius: 12,
    circleStrokeColor: "black",
    circleStrokeWidth: 0.5
  };

  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <MapLibreRN.MapView
        style={{
          flex: 1,
          alignSelf: "stretch"
        }}
        pitchEnabled={false}
        rotateEnabled={false}
        logoEnabled={true}
        mapStyle="https://demotiles.maplibre.org/style.json"
      >
        <MapLibreRN.Camera
          defaultSettings={{
            centerCoordinate: [ -87.04956935607737, 51.984545195159662 ],
            zoomLevel: 7.0
          }}
        />
        <MapLibreRN.ShapeSource
          id="data-source"
          shape={layer}
          onPress={(event) => {
            if (event.features && event.features[0] && event.features[0].geometry.type == "Point") {
              setSelectedFeature(event.features[0]);
              setMarkerViewCoordinate(event.features[0].geometry.coordinates);
            }
          }}
        >
          <MapLibreRN.CircleLayer
            id="data-layer"
            style={dataStyle}
          />
        </MapLibreRN.ShapeSource>

        {!(markerViewCoordinate && selectedFeature) ? null : 
          <MapLibreRN.MarkerView
            coordinate={markerViewCoordinate}
            style={{
              //zIndex: 2,      // ?
              //elevation: 2    // ?
            }}
          >
            <Text
              style={{
                color: "black",
                textAlign: "center",
                fontSize: 26,
                //zIndex: 3,    // ?
                //elevation: 3  // ? 
              }}
            >
              {`Feature ID: ${selectedFeature.properties?.id}`}
            </Text>
          </MapLibreRN.MarkerView>
        }
      </MapLibreRN.MapView>

      <View
        style={{
          backgroundColor: "white",
          position: "absolute",
          height: "50%",
          width: "50%",
          top: 5,
          left: 5,
          opacity: 0.75,
          //zIndex: 1,    // ?
          //elevation: 1  // ?
        }}
      >
        <Text
          style={{
            color: "black"
          }}
        >
          This is a test
        </Text>
      </View>
    </View>
  );
};

This test app has a rather large View using absolute location with a white background just displaying some test message. Clicking on a point renders a marker view at the clicked point that just displays text with the feature ID. Is it possible to get the text in the MarkerView to render above the aforementioned View?

I'd really like to know if this is possible. Any help will be greatly appreciated. I'd really like to implement this principle in the app I'm actively working on. If it's not possible, I'll make do.

Thanks!

[brentforder]

Hey @theARAking, I don't think your View outside of the MarkerView could ever work because I'm pretty sure that MapView renders all marker and layer type components with internal layer levels/z-indexes. I think that MarkerView is supposed to be able to handle multiple children views, and you'd have to do it that way.
I haven't tried it myself, but something like this should work:

<MapLibreRN.MarkerView coordinate={markerViewCoordinate}>
  <View>{/* Container */}
    <View style={{
        backgroundColor: "white",
        position: "absolute",
        height: "50%",
        width: "50%",
        top: 5,
        left: 5,
        opacity: 0.75,
        zIndex: 1
      }}
    >
    </View>
    <View>
      <Text
        style={{
          color: "black",
          textAlign: "center",
          fontSize: 26,
          zIndex: 2,
        }}
      >
        {`Feature ID: ${selectedFeature.properties?.id}`}
      </Text>
    </View>
  </View>
</MapLibreRN.MarkerView>

[theARAking]

Thanks for the response!

I tried out your suggestion today. The render layering is correct and works (the View renders underneath the text from the MarkerView), but unfortunately it makes the View no longer anchored to the top left of the screen, and it moves with the MarkerView text as I move around in the map.

[brentforder]

Ah, okay. I think you will have to use the BackgroundLayer or FillLayer components for the layer you want to be anchored underneath markers.
https://maplibre.org/maplibre-react-native/docs/components/layers/background-layer
https://maplibre.org/maplibre-react-native/docs/components/layers/fill-layer

I think most of the layer components need to be children of a "source" component (one of ImageSource, RasterSource, ShapeSource, VectorSource), but I see in the examples that BackgroundLayer doesn't have a source so that one may be different. All of these components definitely need to be children of the MapView though.

There's an example of BackgroundLayer here:

• https://github.com/maplibre/maplibre-react-native/blob/main/examples/shared/src/examples/FillRasterLayer/GeoJSONSource.tsx

There are examples for FillLayer here:

• https://github.com/maplibre/maplibre-react-native/blob/main/examples/shared/src/examples/FillRasterLayer/CustomVectorSource.tsx
• https://github.com/maplibre/maplibre-react-native/blob/main/examples/shared/src/examples/FillRasterLayer/QueryWithRect.js

The documentation is very incomplete. I learn a lot by copying from the examples app. I'd recommend having a checkout of the library to play with these, and whenever you are experimenting with a component search for it in the examples.
I'm happy to help and please do let me know if you get it working or run into other issues! :)