How can I hide tooltip with MapBoxGL.Callout manually?

[Frozen1110]

I am now showing several markers on the mapview using MapBoxGL.PointAnnotation. I added MapboxGL.Callout component to show tooltip when the marker is selected.

<MapboxGL.PointAnnotation
    key={random.toString()}
    id={random.toString() + '_source'}
    coordinate={tagCoordinates}>
      <Image source={getIconLocal(tagIcon)} />
      <MapboxGL.Callout
        title={`Tag: Pathogen\n${typeName}\nUser: ${userName}\nDate: ${createDate}`}
        style={{minWidth: 200}}
        contentStyle={styles.tagContainer}
        textStyle={styles.tagText}
        tipStyle={styles.tagTip}
      />
</MapboxGL.PointAnnotation>

It's working as I expected. The problem is that I can't hide tooltip when select the rest area of the mapbox. When I select another marker, it's working fine (hide current tooltip and show selected marker's tooltip), but tooltip is remained when select the rest area of the mapview except markers.

[ebarahona]

Per the Mapbox iOS SDK you can dismiss with "dismissCalloutAnimated" or you can add the dismiss automatically property, to dismiss when the mapview changes.

If it's NOT supported in the RN component you may need to modify the library to support it, take a look at:

https://github.com/rnmapbox/maps/blob/main/javascript/components/Callout.js https://github.com/rnmapbox/maps/blob/main/ios/RCTMGL/RCTMGLCallout.m

To dismiss manually if supported, you will need to add a ref to the callout so you can call it's methods:

     let calloutRef = useRef(undefined);
     
     const onSomething = () => {
        ...
        calloutRef.current.dimissCallout();
     };
      
     <MapboxGL.Callout
          ref={useCallback(r => {
              calloutRef.current = r;
         })}
        title={`Tag: Pathogen\n${typeName}\nUser: ${userName}\nDate: ${createDate}`}
        style={{minWidth: 200}}
        ...

https://docs.mapbox.com/ios/maps/api/6.4.1/Protocols/MGLCalloutView.html#/c:objc(pl)MGLCalloutView(py)dismissesAutomatically

[PradeepVL]

Previously when selecting the rest area of the map view, the tooltip gets hidden automatically. But after upgrading to the latest version i.e"github:rnmapbox/maps#main", the tooltip not hiding automatically when we select the rest map area. I tried the @ebarahona solution but it's not working. Got an error message "dimissCallout" is not a function. Any solution for this?

[W1MMER]

I decided to ditch the native callout altogether. Here's my solution using a seperate MarkerView:

<MapboxGL.MapView>
  {locations.map(location => (
    <MapboxGL.PointAnnotation
      key={location.id}
      coordinate={[location.longitude, location.latitude]}
      anchor={{ x: 0.5, y: 0.5 }}
      onSelected={() => setSelectedLocation(location)}
    >
      <View style={styles.mapPin} />
    </MapboxGL.PointAnnotation>
  ))}

  {selectedLocation && (
    <MapboxGL.MarkerView
      id="locationView"
      coordinate={[selectedLocation.longitude, selectedLocation.latitude]}
      anchor={{ x: 0.5, y: 1 }}
    >
      <View style={{ alignItems: 'center', justifyContent: 'center', marginBottom: 13 }}>
        <View
          style={{
            backgroundColor: '#FFF',
            padding: 10,
            borderRadius: 5,
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <SomeContent />
        </View>
        <View
          style={{
            alignItems: 'center',
            justifyContent: 'center',
            borderTopWidth: 15,
            borderLeftWidth: 10,
            borderRightWidth: 10,
            borderTopColor: '#FFF',
            borderLeftColor: 'transparent',
            borderRightColor: 'transparent',
          }}
        />
      </View>
    </MapboxGL.MarkerView>
  )}
</MapboxGL.MapView>

Final result:

[RyanTG]

I agree with others above that currently (v10.0.8) when you use PointAnnotation and Callout, you can dismiss a callout by clicking on another point, but clicking a part of the mapview does not dismiss it. It's a little unclear to me if this is expected Callout behavior (though personally I would expect a visible Callout to be dismissed when clicking elsewhere on the map).

@W1MMER Your custom callout is certainly cool. But your code doesn't seem contain anything for dismissing the callout (when the map area is touched, or when another marker is opened)?

[W1MMER]

@RyanTG You can use the MapView's onPress prop to set the selectedLocation state to null or whatever your default is. But my method will require you to track the selected marker in state to display the callout.

[shiraz27]

This is still an issue. 😢

[minifisk]

This shouldn't be an issue... and not been resolved for so long.