Response-map-gl: Map not showing

Question

I use the react-map-gl package from Uber, but even after trying it for several days, it was not possible to get it working.

I'm not trying to do anything interesting (for now) - for now I just want a map to appear on my page. I thought that as soon as I have such a step to work, I can try more complex things.

Unfortunately, this is all I see:

Any suggestions?

Here's the relevant section of my code (from a .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 card does not actually appear. Thanks in advance for your help.

Answer 1

, .

, . .

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

react-map-gl.

npm install react-map-gl --save

, react-map-gl .

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

v1.0.6 webworkify-webpack, , , , react-map-gl.

, Webpack webpack.config.dev.js, .

resolve

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

, , .

/** ... 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'},

- , (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>
);

,

npm start

. JSX , , - API- Mapbox.

, , Webpack .

Answer 2

API.

Readme.md bash .

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

Github mapboxApiAccessToken, , , , r().

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