react-map-glの導入

1.react-map-glをインストール
npm i --save react-map-gl

2.react内で使う
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ReactMapGL from ‘react-map-gl’;

class Map extends React.Component{
constructor(props){
super(props);

this.state = {
viewport:{
width :400,
height :400,
latitude :37.7577,
longitude :-122.4376,
zoom :8
}
};
}

render(){
const {viewport} = this.state;
return (

<ReactMapGL

mapStyle=”mapbox:~~~”

{…viewport}

onViewportChange={

viewport => this.setState(viewport);

}

>

</ReactMapGL>

);

}

3.webpackに以下を追加

process.env[‘MapboxAccessToken’]= “~~~~”;

以下略———————–>>

plugins:[

new webpack.EnviromentPlugin([‘MapboxAccessToken’])

]

<<——————–以下略