Map component incorrect zoom behaviour

[patryk-smc]

Please list the package(s) involved in the issue, and include the version you are using

    "@shopify/ui-extensions": "2024.7.0",
    "@shopify/ui-extensions-react": "2024.7.0",

Describe the bug

When the latitude and longitude props are updated to change the map location, and a zoom prop is set, the map incorrectly resets its zoom level to the value specified in the zoom prop instead of preserving the current zoom level.

Steps to reproduce the behavior:

1. See video

Expected behavior

The map should preserve the value of the current zoom level when updating location

Screenshots

https://github.com/user-attachments/assets/f0cbfb8f-e4d2-4ad1-8a54-8407290bba2c

Additional context

import { MapLocation, Modal, Button, Map } from "@shopify/ui-extensions-react/checkout"
import React from "react"

export function MapModal() {
  const [mapLocation, setMapLocation] = React.useState<MapLocation>({
    latitude: 40.74043971054843,
    longitude: -73.98826780257427,
  })

  const [currentZoom, setCurrentZoom] = React.useState<number | undefined>()

  return (
    <Modal id="test-modal">
      <Map
        apiKey="removed"
        latitude={mapLocation.latitude}
        longitude={mapLocation.longitude}
        zoom={15}
        accessibilityLabel="Map"
        onZoomChange={(zoom) => setCurrentZoom(zoom)}
      />
      <Button
        onPress={() =>
          setMapLocation({
            latitude: mapLocation.latitude,
            longitude: mapLocation.longitude - 0.001,
          })
        }
      >
        Go left
      </Button>
      <Button
        onPress={() =>
          setMapLocation({
            latitude: mapLocation.latitude,
            longitude: mapLocation.longitude + 0.001,
          })
        }
      >
        Go right
      </Button>
      Zoom: {currentZoom}
    </Modal>
  )
}

[ryan-ludwig]

This appears to be a bug in the Extension code.

      <Map
        zoom={15}
        ...
      />

should be

      <Map
        zoom={currentZoom}
        ...
      />

[patryk-smc]

Hey @ryan-ludwig, We tried that approach, but using a controlled zoom value actually causes an even bigger issue. In this video, you can see that when I zoom using the touchpad, it keeps reverting to the initially set coordinates.

https://github.com/user-attachments/assets/c3c4d9ca-d23b-453c-874d-27067170cefc

Code:

import { MapLocation, Modal, Button, Map } from "@shopify/ui-extensions-react/checkout"
import React from "react"

export function MapModal() {
  const [mapLocation, setMapLocation] = React.useState<MapLocation>({
    latitude: 40.74043971054843,
    longitude: -73.98826780257427,
  })

  const [currentZoom, setCurrentZoom] = React.useState<number>(15)

  return (
    <Modal id="test-modal">
      <Map
        apiKey="redacted"
        latitude={mapLocation.latitude}
        longitude={mapLocation.longitude}
        zoom={currentZoom}
        accessibilityLabel="Map"
        onZoomChange={(zoom) => {
          console.log("zoomChange", zoom)
          setCurrentZoom(zoom)
        }}
      />
      <Button
        onPress={() =>
          setMapLocation({
            latitude: mapLocation.latitude,
            longitude: mapLocation.longitude - 0.001,
          })
        }
      >
        Go left
      </Button>
      <Button
        onPress={() =>
          setMapLocation({
            latitude: mapLocation.latitude,
            longitude: mapLocation.longitude + 0.001,
          })
        }
      >
        Go right
      </Button>
      Zoom:{currentZoom}
    </Modal>
  )
}

[ryan-ludwig]

Thanks for the video and code samples @patryk-smc! We've identified the problem now and are investigating how to fix.

[patryk-smc]

Thanks for the video and code samples @patryk-smc! We've identified the problem now and are investigating how to fix.

Awesome. Thank you. If there is anything I could do to help - let me know 😊

[patryk-smc]

Hi @ryan-ludwig just wondered if there any updates you can share? Thank you!

[jun-shop]

Hey @patryk-smc no updates yet. The issue is triaged and we'll get to it when we can

[patryk-smc]

Hey @patryk-smc no updates yet. The issue is triaged and we'll get to it when we can

Thanks for update Jun!