React Native MapView make GeoJson clickable

Question

I have a GeoJSON data of lakes and rivers. I am displaying them using the code below.

<MapView.Geojson
          geojson={barajVeGolet}
          strokeColor="#39A2DB"
          fillColor="#D0E8F2"
          strokeWidth={3}
        />

This component renders the data in the map like the image below.

MapView.Geojson Component display example

I want a popup to appear when a user clicks anywhere inside this lake, like a marker.

What I have tried:

I wrapped MapView.Geojson with TouchableOpacity component, to use its onPress attribute.

<TouchableOpacity onPress={onPress}>
        <MapView.Geojson
          geojson={barajVeGolet}
          strokeColor="#39A2DB"
          fillColor="#D0E8F2"
          strokeWidth={3}
        ></MapView.Geojson>
    </TouchableOpacity>

I used onPress attribute of the MapView.Geojson

<MapView.Geojson
  geojson={barajVeGolet}
  strokeColor="#39A2DB"
  fillColor="#D0E8F2"
  strokeWidth={3}
  onPress={onPress}
></MapView.Geojson>

I put a Callout component inside the MapView.Geojson with text

<MapView.Geojson
  geojson={barajVeGolet}
  strokeColor="#39A2DB"
  fillColor="#D0E8F2"
  strokeWidth={3}
>
    <MapView.Callout>
      <View style={{ width: 200 }}>
        <Text style={styles.barajInfoTitle}>Test</Text>
      </View>
    </MapView.Callout>
</MapView.Geojson>

Is there any way to click anywhere inside a Geojson or Polygon component which opens a popup, just like the Marker component?

Answer 1

Unfortunately, you cannot set custom callout while using GeoJson of the its Marker module does not supporting it. https://github.com/react-native-maps/react-native-maps/blob/master/lib/components/Geojson.js#L156

However, you can use custom solution for this use-case.

I've added the onPress functionality for GeoJson

<Geojson
   tappable
   image={require("assets/markers/bicycle/seasonal-tour.png")}
   geojson={your-data}
   strokeColor={colors.theme.light.routeColor}
   strokeWidth={7}
   onPress={(data: any) => {
     this.props.myInfoModal.openModal(); // For Modalize
     this.setState({modalVisibility: true }); // For Classic Modal
   }}
/>

You can use classic modal or modalize

• https://github.com/react-native-modal/react-native-modal
• https://github.com/jeremybarbet/react-native-modalize

Then you can show the data detail into