React-plotly, trouble updating scattermapbox center

plotly.js
1

I have an application with a scattermapbox starting with a whole-world view. When the user loads some lat/lon points, the program calculates a sensible centre and zoom and updates the react component accordingly.

Unfortunately, the centre only sometimes works. Displaying the points and zooming always works.

Here is a minimal executable example showcasing the problem.

Clicking the button should zoom to a point in England, centring the map on the data point. Unfortunately, it centres the map on a point in France.

Some observations:

  • This code reproduces the problem for me in both Chrome and Safari.
  • Clicking the button a second time will centre the map correctly.
  • Clicking the button then clicking a modebar zoom button will snap the map display to the correct point.
  • This is very sensitive to the numbers. For example, changing the initial zoom from 0.9 to 1 will fix the problem in this demo. Unfortunately, the same change does not fix the issue in my real app.

Any hints as to what I may be doing wrong will be gratefully received.

import React from 'react';
import ReactDOM from 'react-dom';
import Plot from 'react-plotly.js';
import settings from './settings.json';

class MapPositionSpike extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      center: {lon: 0, lat: 0},
      zoom: 0.9
    };
  }

  render() {
    return (
      <div>
        <Plot 
          data={[{type: "scattermapbox", lon: [-1], lat: [52]}]}
          layout={{
            margin: {'l':0, 'r':0, 'b':0, 't':0},
            mapbox: {
              accesstoken: settings["mapbox_access_token"],
              center: this.state.center,
              zoom: this.state.zoom
            }
          }}
          style={{height: '660px', width: '660px'}}
        />
        <button 
          onClick={e => this.setState({
            center: {lon: -1, lat: 52}, 
            zoom: 7
          })}
        >Click Me!</button>
      </div>
    );
  }
}

ReactDOM.render(
  <MapPositionSpike />,
  document.getElementById('root')
);
2

Sorry to bump the topic. It has been six months and this is still an issue. If anyone has any ideas, then I would love to hear them.

3

Hi @cfoley

I think I just came across the same issue.

I’m using px.scatter_mapbox in Dash (Python). I use this function to calculate map center and zoom based on location of selected points in my dataset.

I noticed that when filtering my dataset, the map sometimes centers itself to a completely wrong location. Despite passing always the same zoom and center parameters to px.scatter_mapbox.

Did you figure out what is causing this problem?

4

No, unfortunately I didn’t figure what is causing the problem. Good luck, and please let me know if you figure it out.

1 Like