Can't zoom with scrollwheel

[AshotN]

I've tried reading the docs, the source, and the demo that is provided. But I can't for the life of me figure out why I can't get zooming to work with the scroll wheel. It works on the demo, so I can't tell if it's my code.

<Map
center={[
  geoLocation?.latitude ?? 34.050888,
  geoLocation?.longitude ?? -118.242854
]}
animate={false}
metaWheelZoomWarning={true}
zoom={(geoLocation && 18) ?? 12}
width={600}
height={400}
>
{geoLocation && <Marker
  anchor={[
    geoLocation.latitude,
    geoLocation.longitude
  ]}
  payload={1}
/> }
</Map>

I've tried removing the marker.

I don't get the meta zoom warning overlay.

I've tried using Firefox and Chromium. I'm on Ubuntu Linux. I tested on Windows with Edge as well.

Versions

"pigeon-maps": "^0.14.0",
"pigeon-marker": "^0.3.4",

[AshotN]

Removing width/height seemed to resolve for some reason!

[marcosaurelioo]

I'm having the same problem.

[AshotN]

I just set the size with CSS.

[mariusandra]

Hi, if you set center and zoom, it will lock the map to this location. You will in this case need to get the coordinates and zoom with onBoundsChanged and update the center accordingly.

Alternatively use defaultCenter and defaultZoom and the map is free to move as it wants to.

[AshotN]

Why does removing width and height get rid of that limitation.

[marcosaurelioo]

Do like that work for me:

    center: [50.1102, 3.1506],
    zoom: 7,
    minZoom: 3,
    maxZoom: 16,
  });
  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <Map
        center={locations.center}
        zoom={locations.zoom}
        minZoom={locations.minZoom}
        maxZoom={locations.maxZoom}
      >
      </Map >
    </div>```

[elibenjii]

Do like that work for me:

    center: [50.1102, 3.1506],
    zoom: 7,
    minZoom: 3,
    maxZoom: 16,
  });
  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <Map
        center={locations.center}
        zoom={locations.zoom}
        minZoom={locations.minZoom}
        maxZoom={locations.maxZoom}
      >
      </Map >
    </div>```

working for me, thanks!

[roux1max]

Hi ! Any progress on this? It seems that it is really in the code that setting both width and height prevent the registering of the mouseWheel events: https://github.com/mariusandra/pigeon-maps/blob/8ed9a23c5e1992d4f9ef1dae03ba7907356aed0c/src/map.tsx#L278-L293

Is there a particular reason for that? Thanks

[mariusandra]

Looks like a bug. Thanks for digging it out! I'd be happy to accept a PR for this!

[roux1max]

Thanks for the quick answer @mariusandra ! I'll see what I can do. Should I also get the this.bindResizeEvent() out of the if?

[mariusandra]

That can stay in the if. Make sure to also move the unbindWheelEvent event.