Remove marker jiggle. #603
Conversation
| const overlayProjection = overlay.getProjection(); | ||
| const ptx = overlayProjection.fromLatLngToDivPixel( | ||
| overlayProjection.fromContainerPixelToLatLng({ x: 0, y: 0 }) | ||
| ); |
There was a problem hiding this comment.
@stephenfarrar This is the part that you were mentioning, right? The container that was being re-calculated
| @@ -611,7 +611,7 @@ export default class GoogleMap extends Component { | |||
| onChildMouseEnter={this_._onChildMouseEnter} | |||
| onChildMouseLeave={this_._onChildMouseLeave} | |||
| geoService={this_.geoService_} | |||
| projectFromLeftTop | |||
| insideMapPanes | |||
There was a problem hiding this comment.
I believe that insideMapPanes is not that descriptive to me. I guess you want to change it because you're making the calculation from the center now, right?
There was a problem hiding this comment.
Sorry for being slow to respond.
MapPanes is a concept in the Maps JS API. You can see that the react markers are placed inside the panes here:
google-map-react/src/google_map.js
Line 599 in 2cfb0a6
Initially, the panes are located at the centre of the map. But as you pan the map, the panes move too, so that it's not necessarily (usually) to reposition the markers. As you zoom the map, you will have to reposition the markers.
So there are really three different reference points for coordinate: the map centre, the map top left ("container pixels"), and the map panes ("div pixels"). We use the map centre for server-side rendering, map top-left for mouse events, and map panes for dynamic rendering.
There was a problem hiding this comment.
@stephenfarrar Great work man, I admire your knowledge of the Google Maps api. Do you think that by this change, would be easier to fix #505?
itsmichaeldiego
force-pushed
the
jiggle
branch
2 times, most recently
from
882e4db
to
0acb038
Compare
Position the markers relative to the map panes. Don't position the element that contains the markers. Renamed all the geo service projection methods, for clarity.
|
@stephenfarrar I've rebased this branch with latest master so the build works, left one comment, and again, great work! |
* 'master' of github.com:google-map-react/google-map-react: Bump to 1.1.1 (google-map-react#680) Revert "Added feature: update heat map on data change + fix linting" (google-map-react#679) Bump version to 1.1.0 (google-map-react#671) Added feature: update heat map on data change + fix linting (google-map-react#593) Pass map instance to onDrag handler (google-map-react#656) add math abs to avoid negative values when calculating zoom (google-map-react#655) Bump version to 1.0.9 (google-map-react#651) Custom div style options (google-map-react#634) Bump version to 1.0.8 (google-map-react#646) Revert 643 fix/map context (google-map-react#645) Bump version to 1.0.7 (google-map-react#644) Add passive scroll (google-map-react#631) Use React 16 portal to render map overlay (google-map-react#643) Fix old examples links and add one to new examples (google-map-react#633) Bump version to 1.0.6 (google-map-react#621) Add prop `onTilesLoaded` (google-map-react#615) Fix typo, and call fromContainerPixelToLatLng() as you would expect. (google-map-react#620) Update API.md (google-map-react#611) Upgrade version to 1.0.5 (google-map-react#607) Remove marker jiggle. (google-map-react#603)
|
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
Position the markers relative to the map panes.
Don't position the element that contains the markers.
Fixes #575