visgl / react-map-gl

React friendly API wrapper around MapboxGL JS
http://visgl.github.io/react-map-gl/
Other
7.88k stars 1.36k forks source link

fix: change transformation setters call order #2391

Closed oxidase closed 4 months ago

oxidase commented 6 months ago

The order of setters in applyViewStateToTransform has a side effect which leads to wrong camera transformation. In a case of map.jumpTo({center: [12,34], zoom: 15}) from {center: [0,0], zoom: 0} the current order of setters in case of maplibre-gl leads to the following:

tr.center = new center.constructor(v.longitude, v.latitude);  /* (12, 34); */
  -> const {center, zoom} = this.getConstrained(this.center /* [12, 34]*/ , this.zoom /* 0 */);
       this.center = center;  /* [12, 0] */
       this.zoom = zoom;  /* 0 */

tr.zoom = v.zoom; /* 15 */
  -> const {center, zoom} = this.getConstrained(this.center /* [12, 0]*/ , this.zoom /* 15 */);
       this.center = center;  /* [12, 0] */
       this.zoom = zoom;  /* 15 */

But expected would be to have {center: [12,34], zoom: 15} instead of {center: [12,0], zoom: 15}.

The changed order leads to the following setters sequence

tr.zoom = v.zoom; /* 15 */
  -> const {center, zoom} = this.getConstrained(this.center /* [0, 0]*/ , this.zoom /* 15 */);
       this.center = center;  /* [0, 0] */
       this.zoom = zoom;  /* 15 */

tr.center = new center.constructor(v.longitude, v.latitude);  /* (12, 34); */
  -> const {center, zoom} = this.getConstrained(this.center /* [12, 34]*/ , this.zoom /* 15 */);
       this.center = center;  /* [12, 34] */
       this.zoom = zoom;  /* 15 */