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.

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.

• javascript
• mapbox
• reactjs
• mapbox-gl-js

• Do you see any errors in your console? – Lucas Wojciechowski Commented Jun 29, 2016 at 22:58
• @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 <MapGL /> element with a simple <div>Hello!</div> element. Otherwise no errors. – m81 Commented Jun 29, 2016 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 Commented Jun 30, 2016 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 Commented Jul 2, 2016 at 9: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 Commented Jul 7, 2016 at 18:51

3 Answers 3

As per your request in the ments, 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./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 [email protected] --save-dev

The only specific here is the v1.0.6 of webworkify-webpack which is to my knowledge the last version patible 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 ponent to got it displayed (src/ponents/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.

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

The Readme.md describes a bash mand 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);

Well, this worked when I ejected the app