react-map-gl: Map Does Not Appear

Question

I'm using the react-map-gl package from Uber, but even after trying it for a few days, haven't been able to get it to work.

I'm not trying to do anything fancy (yet) - for now, I simply want a map to appear on my page. I figured that once I got that step to work, I can try more advanced things.

Unfortunately, this is all I see:

Any suggestions?

Here's the relevant section of my code (from the .jsx file):

import React from 'react'
import { connect } from 'react-redux'
import MapGL from 'react-map-gl'

const App = React.createClass({

  render: function () {
    const map = (
        <div>
          <MapGL
            width={700}
            height={450}
            latitude={37.78}
            longitude={-122.45}
            zoom={11}
            mapStyle={'mapbox://styles/mapbox/basic-v9'}
            mapboxApiAccessToken={'pk.ey...<removed for privacy>...'}
          />
        </div>
      )

    return (
      <div>
        =======Map should be below=======
        <br/>
        { map }
        <br/>
        =======Map should be above=======
      </div>
    )
  }
})

export default connect()(App)

Everything else on my site works; the only thing missing is that the map does not actually appear. Thanks in advance for any help provided.

@LucasWojciechowski - I do have a "React attempted to reuse markup in a container but the checksum was invalid.." warning but I'm reasonably certain that's from a different area of the code, since that appears even when I replace the element with a simple
Hello!
element. Otherwise no errors. — m81, Jun 29 '16 at 23:17
Can you post a runnable example of your broken code? It is hard for me to debug with the information provided. — Lucas Wojciechowski, Jun 30 '16 at 23:45
I have no problem running the exact same code so I don't think that's the problem. Are you using Webpack ? Any warning or error on this end ? — HiDeoo, Jul 02 '16 at 09:31
@HiDeo Based on how few other people have this problem, I'm starting to wonder if perhaps I have an outdated module or something similar. That said, I'd feel a lot better if I had a working example written in React's .jsx notation which I knew worked for someone else, as I could use that example as a way to check if my modules are outdated. If you (or someone else) writes such an example and verify it works, I'll give you (or someone else) the bounty! — m81, Jul 07 '16 at 18:51
I have added an answer containing a simple walkthrough to get your exact same JSX code tested and working, the result is the correct map displayed by react-map-gl. — HiDeoo, Jul 07 '16 at 22:52

score 7 · Accepted Answer · answered Jul 07 '16 at 22:51

As per your request in the comments, I've put up a simple walkthrough to test your code.

I've chosen a random react boilerplate to save some time. I clone it and install all its dependencies.

git clone https://github.com/coryhouse/react-slingshot
cd react-slingshot
npm install

Then, I install react-map-gl.

npm install react-map-gl --save

We now need to install some dependencies required for react-map-gl to work correctly.

npm install json-loader transform-loader webworkify-webpack@1.0.6 --save-dev

The only specific here is the v1.0.6 of webworkify-webpack which is to my knowledge the last version compatible out of the box with react-map-gl.

Next, we need add proper configuration directives to Webpack in the webpack.config.dev.js file for example.

First, we add a resolve block

resolve: {
  extensions: ['', '.js', '.jsx'],
  alias: {
    webworkify: 'webworkify-webpack',
  }
},

And we simply add the loaders we need to the existing ones.

/** ... Previous loaders ... **/
{test: /\.json$/, loader: 'json-loader'},
{test: /\.js$/, include: path.resolve(__dirname, 'node_modules/webworkify/index.js'), loader: 'worker'},
{test: /mapbox-gl.+\.js$/, loader: 'transform/cacheable?brfs'},

The last step is to simply put your code in a component to got it displayed (src/components/HomePage.js).

import MapGL from 'react-map-gl';

/** ... **/

return (
  <div>
    <MapGL
      width={700}
      height={450}
      latitude={37.78}
      longitude={-122.45}
      zoom={11}
      mapboxApiAccessToken={'pk.eyJ1IjoiMW0yMno1Nmw3N2sifQ.YNkaLBJBc4lNXa5A'}
      mapStyle={'mapbox://styles/mapbox/basic-v9'}
    />
  </div>
);

To test the app, we use

npm start

A browser will open with the following content. It's the JSX code you provided, the only modification is my Mapbox API access token.

My wild guess would be that you have some problem with the way you're bundling your app, either with Webpack or another bundler.

you turned out to be right, I had a line `devtool: 'eval'` in my webpack config that was causing issues. — m81, Aug 25 '16 at 22:54

score 3 · Answer 2 · edited May 30 '18 at 18:24

3

The symptom of no visible map smells like an API access token issue.

The Readme.md describes a bash command to check your access token.

echo $MapboxAccessToken
npm start &
open "http://localhost:9966/?access_token=$MapboxAccessToken"

The Github source makes use of mapboxApiAccessToken, but the test sample show the usage slightly different than what you posted, using r().

  var map = r(MapGL, {
    width: 500,
    height: 500,
    longitude: -122,
    latitude: 37,
    zoom: 14,
    mapboxApiAccessToken: mapboxApiAccessToken
  });
  React.render(map, document.body);

edited May 30 '18 at 18:24

SergeyB

9,478
4
33
47

answered Jun 29 '16 at 23:35

RobLabs

2,257
2
18
20

Thanks for the answer! I've used the bash command to verify that my mapbox access token is working correctly. So unfortunately, I don't think that's the issue. – m81 Jun 29 '16 at 23:37
I saw the test sample as well, but wasn't quite sure how to adapt it to the .jsx notation – m81 Jun 29 '16 at 23:40

score 0 · Answer 3 · answered Apr 17 '23 at 18:39

0

Well, this worked when I ejected the app

answered Apr 17 '23 at 18:39

hongdeshuai

49
1
4

react-map-gl: Map Does Not Appear

3 Answers3

Linked