react-map-gl：地図が表示されない

Question

私はUberのreact-map-glパッケージを使用していますが、数日間試しても動作させることができませんでした。

私は何も気にしないようにしようとしていません。今のところ、自分のページにマップを表示したいだけです。私は一歩踏み込んだら、もっと先進的なものを試すことができると思いました。

任意の提案：

残念ながら、これは私が見るすべてのですか？

ここで（.jsxのファイルから）自分のコードの該当部分です：

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) 

それ以外はすべて私のサイトの作品には、行方不明の唯一の事は、地図が実際には現れないということです。 ご協力いただきありがとうございます。

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 

ここでの唯一の特定には、私の知る限りreact-map-glと箱から出して互換性の最後のバージョンであるwebworkify-のWebPACKのv1.0.6デベロッパーです。

次に、適切な設定ディレクティブをwebpack.config.dev.jsファイルのWebpackに追加する必要があります。

まず、我々は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です。唯一の修正は私のMapbox APIアクセストークンです。

私の野生の推測では、あなたはどちらかWebpackまたは別のバンドラと、あなたのアプリケーションをバンドルしている方法といくつかの問題を抱えているということでしょう。

Answer 2

表示されていないマップの症状は、APIアクセストークンのようなのような臭いがあります。

Readme.mdには、アクセストークンをチェックするbashコマンドが記載されています。

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

Github sourceはmapboxApiAccessTokenを使用していますが、test sampleはr()を使用して、あなたが投稿したものよりわずかに異なる使用方法を示しています。

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