pigeon-maps icon indicating copy to clipboard operation
pigeon-maps copied to clipboard

Can't get zoom working in Android

Open OtterTax opened this issue 2 years ago • 5 comments

I'm sure I'm missing something here, but I can't get zoom working in Android. Whenever I zoom in or zoom out on an Android device. The zoom level snaps back to its original value. I'm told the same thing happens on iOS, but I haven't tested it myself. Zooming works fine on the desktop browsers I've tried (Chrome and Firefox). The example below uses a controlled component, but I've also tried using defaultCenter and defaultZoom with an uncontrolled component.

Steps to reproduce:

  1. yarn create react-app pigeon-maps-test
  2. yarn add pigeon-maps
  3. replace App.js with the following:
import React, { useState } from 'react'
import { Map } from 'pigeon-maps'

function App() {
  const [center, setCenter] = useState([50.879, 4.6997])
  const [zoom, setZoom] = useState(13)
  return (
    <Map 
      height={300}
      center={center} 
      zoom={zoom} 
      onBoundsChanged={({ center, zoom }) => { 
        setCenter(center) 
        setZoom(zoom) 
      }} 
    />
  )
}

export default App;
  1. Run app. Zooming from desktop browser works fine, but zooming from Android is not possible.

OtterTax avatar Jan 31 '23 13:01 OtterTax

I'm facing the same issue in my Ionic react app. Did you figure out any solution to this?

Would like to add that when 2-finger dragging, the map updates center to the wrong position causing jumps/stuttering

MrGentle avatar Apr 01 '23 14:04 MrGentle

have u tried this workaround:

https://github.com/mariusandra/pigeon-maps/issues/58#issuecomment-525253190

albjeremias avatar Apr 11 '23 16:04 albjeremias

I was facing this issue, but it doesn't seem to affect maps with zoomSnap set to false.

Also worth noting that the example works in mobile, not sure what's different there.

luisdralves avatar Apr 28 '23 21:04 luisdralves

I was facing this issue, but it doesn't seem to affect maps with zoomSnap set to false.

Also worth noting that the example works in mobile, not sure what's different there.

Setting zoomsnap to 'false' did the trick for me. Thanks for that!

Shaky-Sahil avatar Aug 01 '23 06:08 Shaky-Sahil

idk how many hours I lost trying to figure this out. thanks.

rogerio-richa avatar Sep 19 '23 01:09 rogerio-richa