Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to disable double click zoom #341

Open
goinnovise opened this issue Sep 27, 2023 · 1 comment
Open

How to disable double click zoom #341

goinnovise opened this issue Sep 27, 2023 · 1 comment

Comments

@goinnovise
Copy link

I am using react-simple-maps 3.0.0-beta.6

I am using the useZoomPan hook to create a control.

I am disabling zoom on scroll with filterZoomEvent, but also noticed that there's zoom-in behavior on double-click. It'd like to disable this.

I've tried handling the click event for geographies and running event.preventDefault() with no luck.
I've also noticed that geography.onDoubleClick no longer fires after adding a ZoomableGroup.

My CustomizableZoomGroup:

import { useZoomPan } from 'react-simple-maps'

const handleZoomFilter = ev => {  
  const disableTypes = ['wheel', 'mousedown']  
  return !disableTypes.includes(ev.type)
}

const width = 800
const height = 600
const CustomizableZoomGroup = ({ children }) => {

  const { mapRef, transformString, position } = useZoomPan({
    center: [0, 0],
    filterZoomEvent: handleZoomFilter,
    scaleExtent: [1, 3],
    translateExtent: [
      [0, -height],
      [width, height],
    ],
  })

  return (
    <g ref={mapRef}>
      <g transform={transformString}>{children(position)}</g>
    </g>
  )
}

export default CustomizableZoomGroup
@EvgeniyT13
Copy link

I am using react-simple-maps 3.0.0-beta.6

I am using the useZoomPan hook to create a control.

I am disabling zoom on scroll with filterZoomEvent, but also noticed that there's zoom-in behavior on double-click. It'd like to disable this.

I've tried handling the click event for geographies and running event.preventDefault() with no luck. I've also noticed that geography.onDoubleClick no longer fires after adding a ZoomableGroup.

My CustomizableZoomGroup:

import { useZoomPan } from 'react-simple-maps'

const handleZoomFilter = ev => {  
  const disableTypes = ['wheel', 'mousedown']  
  return !disableTypes.includes(ev.type)
}

const width = 800
const height = 600
const CustomizableZoomGroup = ({ children }) => {

  const { mapRef, transformString, position } = useZoomPan({
    center: [0, 0],
    filterZoomEvent: handleZoomFilter,
    scaleExtent: [1, 3],
    translateExtent: [
      [0, -height],
      [width, height],
    ],
  })

  return (
    <g ref={mapRef}>
      <g transform={transformString}>{children(position)}</g>
    </g>
  )
}

export default CustomizableZoomGroup

I also have this issue. But I used 'dblclick' in array and double click is disabled.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants