Add feature for clamping the x/y translation

[scottyantipa]

The user of MapInteraction should be able to specify the min and max translation in both the x and y dimensions.

[c-emil]

I definitely vote for that feature. This library is just incredible by the way. It's the first library for React that I found that actually supports panning + zooming together with support for mobile, just amazing!

[c-emil]

@scottyantipa By the way, have you tried using translate3d instead of translate + scale? I think it would be worth it because translate3d uses hardware acceleration.

[Seb-AS]

Any idea how to implement the bounds?, I've implemented double click/tap to zoom

[scottyantipa]

@Seb-AS I would like to build this functionality into the library, but in the meantime: The MapInteraction component takes props.scale and props.translate. So you could implement your bounding logic in the parent component. You'll need to pass onChange to MapInteraction, and then handle the { scale, translation } object that it passes back.

Something like:

applyBounds(scale, translation) {
  this.setState({ scale: scale, translation: ... do your bounding here ....})
}

render() {
  return (
    <MapInteraction
      translation={this.state.translation}
      scale={this.state.scale}
      onChange={({ scale, translation}) => this.applyBounds(scale, translation)}
    />
  )
}

[scottyantipa]

I'll take a look at this today.

[scottyantipa]

Published in version 1.2.0