translateExtent for ZoomableGroup -- map element jumps when clicked

[TJBachorz]

Can you please describe how the translateExtent prop for ZoomableGroup works?

` <ZoomableGroup center={[-150, 55]} minZoom={1} maxZoom={1} translateExtent={[[-150, 55], [-150, 55]]}

`

When I click on the space outside of the map element, the map element jumps a short distance away, usually cutting off part of the map element. I'm attempting to make it so that my map elements are not movable or zoomable. I'm only using the ZoomableGroup component for centering.

[mmartinsky]

https://github.com/zcreativelabs/react-simple-maps/pull/233 looks like it should fix it

[CheerfulMushroom]

Property "translateExtent " is used to define boundaries user can not go beyond. translateExtent = [ [ minX, minY ], [ maxX, maxY ] ], where minY - upper bound maxY - bottom bound minX - left bound maxX - right bound

The boundaries you have set are weird because you basically made your boundaries a single point Try setting more appropriate boundaries (e.g. [ [ -150, -55 ], [ 150, 55 ] ]) and make sure that your map is able to fit in the given boundaries.
If map is bigger than boundaries, it will jump somewhere on dragging (which looks like the situation you described)

Example of usage: https://github.com/CheerfulMushroom/KTS_Frontend_2020_inFrontOfYou/blob/layout-fix-history-compare/src/pages/Home/components/mapChart.js#L69

If you want to test it, run it from branch "layout-fix-history-compare"

[zimrick]

233 has been included in v2.2.0. This should fix some of the more confusing behaviour around translateExtent.