React-native-maps: Cropped overlay image when user changes zoom

[jvaclavik]

Is this a bug report?

Yes

Have you read the Installation Instructions?

Yes

Environment

react-native: 0.54.0-rc.3
react: 16.0.2
react-native-maps: "git+ssh://[email protected]/react-community/react-native-maps.git"

iOS 11.2, iPhone and Simulator, AppleMaps

Steps to Reproduce

Sometimes when I zoom in and zoom out of the map I cannot see rest of the image overlay. I don't know how exactly it happens but I found that when I want to change images (1198×760 px) in one overlay it happens very often. It happens also sometimes without changing images.

Expected Behavior

Overlay in Maps should be visible all the time without any changes based on zoom.

Actual Behavior

VIDEO: https://youtu.be/LJiyA3xJUKg

Cropped detail: User can't see left side of the image

Cropped: User can't see bottom side of the image

Not cropped – Proper behaviour, user can see whole image

There is also weird behaviour when I zoom too much. Whole overlay will dissapear.

Reproducible Demo

class DemoScreen extends React.Component<null, DemoScreenState> {
interval: ?Object = null;
actualImageId: number = 0;
map = null;

state = {
  region: {
    latitude: LATITUDE,
    longitude: LONGITUDE,
    latitudeDelta: LATITUDE_DELTA,
    longitudeDelta: LONGITUDE_DELTA,
  },
  overlay: {
    bounds: [OVERLAY_TOP_LEFT_COORDINATE1, OVERLAY_BOTTOM_RIGHT_COORDINATE1],
    image: Images.radar[this.actualImageId],
  },
};

play = () => {
  this.interval = setInterval(
    () => {
      if (this.actualImageId === 7) {
        this.actualImageId = 0
      }
      this.setState({
        overlay: {
          bounds: [...this.state.overlay.bounds],
          image: Images.radar[this.actualImageId],
        },
      })
      this.actualImageId += 1
    },
    1000,
  )
};

render() {
  return (
      <View>
        <View style={styles.mapContainer}>
          <MapView
            ref={ref => {
              this.map = ref
            }}
            style={styles.map}
            initialRegion={this.state.region}
            showsUserLocation
          >
            <MapView.Overlay
              bounds={this.state.overlay.bounds}
              image={this.state.overlay.image}
              zindex={2}
            />
          </MapView>
        </View>
        <View style={styles.buttons}>
          <Button onPress={this.play}>PLAY</Button>
        </View>
      </View>
    )
  }
}

export default DemoScreen

[rvlander]

I am experiencing the same issue with images cropped horizontally. Maybe it is due to some z-index issue with the map tiles?

[Slympp]

Any news about this ? There are still major issues with overlays on iOS (cropping and/or not rendering at all if the map is too much zoomed in), even on latest react-native-maps versions.

react-native: 0.59.3
react: 16.8.3
react-native-maps: 0.23.0

Video : https://www.youtube.com/watch?v=A3wf40oubeA

I tried to dig a bit in the implementation but my Objective-C knowledges are closed to none. Despite, I think from my tests that the drawMapRect() delegate function in lib/ios/AirMaps/AIRMapOverlayRenderer.m is not called when it should.

Could it be a MapKit issue ? I successfully did a small repro on an empty native project with MapKit's Swift version and it was working great.
Could it come from a lack of implementation of the zoomScale:(MKZoomScale) parameter in the Air component ?

Also, I tried to jiggle with zindex/zIndex but I'm not sure that this props exists ? (Nothing in the doc, despite some implementation in the Android part, but I could not find any reference in the iOS code)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.