Jiggling scrollbars with StaticMap

[Rob Jacobson]

Thanks so much for these tutorials. I'm stuck on part 2 of "Building a Geospatial App."

When I follow the instructions to create a StaticMap, and then open the map in Chrome or Firefox, the horizontal and vertical scrollbars start flickering rapidly on and off. Its as if the browser can't decide whether scroll bars are necessary.

I'm using Create-React-App as the starting point for this project. I've uploaded a demo to Surge.sh:
http://meek-language.surge.sh

Here's a video capture of the problem:
https://1drv.ms/v/s!AueUV7xVm3-qrtRL_oHj0ulmmo7IpA?e=kAXmrO

To reproduce:

1. Create a new application using create-react-app. Delete everything in the /src folder except for Index.js and App.js.

2. Open Index.js and replace its contents with the following:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

3. Open App.js and replace its contents with the following (which comes from Part 2 of the tutorial):

import React, { Component } from "react";
import { StaticMap } from "react-map-gl";
import DeckGL from "deck.gl";

const API_KEY = "...";

const INITIAL_VIEW_STATE = {
  longitude: -74,
  latitude: 40.7,
  zoom: 11,
  minZoom: 5,
  maxZoom: 16,
  pitch: 0,
  bearing: 0
};

export default class App extends Component {
  render() {
    return (
      <div>
        <DeckGL
          mapboxApiAccessToken={API_KEY}
          initialViewState={INITIAL_VIEW_STATE}
          controller
        >
          <StaticMap mapboxApiAccessToken={API_KEY} />
        </DeckGL>
      </div>
    );
  }
}

4. Npm install react-map-gl and deck.gl.

5. Run "npm start."

When the browser window opens, it will flicker many times per second. The horizontal and vertical scroll bars will appear, then disappear, and then reappear, all in rapid succession. The map center keeps shifting, which causes the map to "jiggle about" rapidly inside of the browser window.

This only happens when my browser window is at certain sizes. For example, it occurs when my browser is set to one-half of my display width, but not when my browser is set to full-width.

Would anyone have any clues about why this is happening or ways to prevent it?

[Rob Jacobson]

I found two additional clues:

1. This flickering does not occur with the original webpack-based demonstrations, like the "2-scatterplot-overlay" demo. It only occurs when I'm creating a new project from scratch using create-react-app.

2. In the create-react-app HTML, there's an extra HTML element called "#deck-tooltip" within "#deckgl-wrapper." The #deck-tooltip has a padding of 10 and a size of auto. This #deck-tooltip element isn't present when I'm running the webpack-based example. Could this element be the source of the problem?

[Rob Jacobson]

I realized that this is more of a technical issue with map.gl, not a training issue with vis-academy. I'll close this issue and open one on the map.gl site.