2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

REACT-MAP-GLのexampleを紹介します

Posted at

##概要
今、マップアプリをReactで作ろうとしています。
Uberが提供しているREACT-MAP-GLというライブラリを使おうと、色々試しています。
REACT-MAP-GLには色々なexampleが入ってますので、少し紹介します。

##表示方法
全てのexapleは以下の手順で使うことができます。

###MapboxからTokenを取得
MapboxのサイトからTokenを取得します。
Mapbox(リンク)

###app.jsを編集
exampleフォルダの下に様々なexapleのフォルダがあります。
使いたいexampleフォルダを開きsrc/app.jsを開きます

以下の一文を編集します。

const MAPBOX_TOKEN = ''; // Set your mapbox token here

この「' '」にMapboxのTokenを入れます。

npm install
npm run start-local

これで表示されます。

##exampleの紹介
###controls
このexampleではポップアップを表示させることができます。
町のポップアップとWikipediaのリンクが確認できるかと思います。

Image from Gyazo

###geojson-animation
json情報を元にmap上に描画を行います。
Image from Gyazo

###draggable-markers
こちらはドラックできるマーカーを描画することができます。
Image from Gyazo

###heatmap
こちらはヒートマップを描画します。
デフォルトでは地震の回数をもとにヒートマップを描いています。
Image from Gyazo

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?