Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React + Firebase でヒートマップを実装する
Search
takf
January 13, 2018
Programming
1
1.8k
React + Firebase でヒートマップを実装する
2018.01.12 まぼろしのJS勉強会 #2 「細かすぎて伝わらないUI実装選手権」
takf
January 13, 2018
Tweet
Share
More Decks by takf
See All by takf
Denoに入門していきなりAleph.jsを触ってみた
takfjp
0
440
Atomic Design とテストの○○な話
takfjp
2
1.7k
Node.jsのアップグレードで気をつけたこと
takfjp
1
2.5k
FARM スタックに触れてみる
takfjp
0
1.2k
React Testing Library の Query について整理してみた
takfjp
0
420
React.js 消えるライフサイクルメソッドについて
takfjp
0
110
Laravel 初めての業務で遭遇したハマりポイント×2
takfjp
2
2.9k
React で Stateless Functional Component の書き方を盛大に間違えていた話
takfjp
0
390
職歴1年目のフロントエンドエンジニアが インプットとアウトプットに苦しんだ話
takfjp
0
290
Other Decks in Programming
See All in Programming
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
41
15k
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
GAEログのコスト削減
mot_techtalk
0
110
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.3k
AHC041解説
terryu16
0
590
Honoをフロントエンドで使う 3つのやり方
yusukebe
4
2.1k
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
Grafana Cloudとソラカメ
devoc
0
140
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
KATA
mclloyd
29
14k
Embracing the Ebb and Flow
colly
84
4.6k
How STYLIGHT went responsive
nonsquared
98
5.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Speed Design
sergeychernyshev
25
780
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Transcript
React + Firebase で ヒートマップを実装する 2018.01.12 まぼろしのJS勉強会 #2 「細かすぎて伝わらないUI 実装選手権」
今日発表する事・つかうもの Reactをベースにヒートマップを実装します ・データベース:Firebase Realtime Database ・Firebase CLI ・地図API:Leaflet.JS ・↑のヒートマップ用ライブラリ:leaflet-heatmap +
heatmap.js ・ジオコーディング用ライブラリ:leaflet-geosearch
Leaflet.JSについて(http://leafletjs.com/) JSで動く軽量なオープンソースの地図ライブラリ OpenStreetMapをベースにしている (https://www.openstreetmap.org/) GoogleMapsAPIなどと同様にマーカー、ポップアップを実装可能 MapTilerというアプリを使えばオリジナル地図を実地図に重ね合わせることもできる (https://www.maptiler.com/)
江ノ電の各駅の利用者数を地図上で可視化したい!
データ取得の流れ(理想形) JSON ・駅名 ・平均乗降客数 / 日 Realtime Database 地図APIにプッシュ Geocoding
(駅名から 緯度・経度を取得)
実際の実装は・・・ JSON Realtime Database 再びDBにプッシュ Geocoding (駅名から 緯度・経度を取得) 緯度・経度を取得、 データを加工
Firebaseへの接続方法
None
//親コンポーネント class App extends Component { componentDidMount(){ handleMap() //DOMがマウントされた後に Mapを扱う関数を呼び出し }
render() { return ( <div className="App"> <div id="map"></div> //Mapを扱うために空のdivを作る <Footer /> //「Footer」と表示するだけのコンポーネント </div> ); } } export default App;
Reactにおける地図の実装 ・地図用の<div>を親コンポーネントでrender() ー> componentDidMount() で地図の呼び出し -> 地図単体は実DOMとして扱う
import L from ‘leaflet’ let heatmapData = { max: 100000,
min: 0, data: [] } export const handleMap = () => { //表示範囲の固定 const bounds = new L.LatLngBounds( new L.LatLng(35.33862, 139.48608), new L.LatLng(35.30338, 139.55258)) //地図のタイルレイヤ const baseLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }) //ヒートマップのレイヤ const heatmapLayer = new HeatmapOverlay({ container: document.getElementById('map') }) //<div id=’map’>にマウントする
const heatmapRef = firebaseApp.database().ref('heatmapVal') //FirebaseのDBを購読 heatmapRef.once('value', (snapshot) => { //
snapshot で中身を引き抜くことができる if(snapshot) { const val = snapshot.val() Object.keys(val).forEach((key) => { let j = Math.random() heatmapData.data.push({lat: Number(val[key]['lat']), lng: Number(val[key]['lng']), count: val[key]['count']*10}) //緯度・経度・データ量を配列にプッシュ }) heatmapLayer.setData(heatmapData) //ヒートマップにデータをセット } }) //Mapの定義 let map = new L.map('map', { // import L from ‘leaflet’ center: {lat:35.31625, lng:139.51852}, zoom: 18, layers: [baseLayer, heatmapLayer] }) //地図のタイルレイヤとヒートマップのレイヤを重ねる .fitBounds(bounds) }
なぜかこうなってしまった
地図APIの難しい点 ・Reactは仮想DOMを扱うのに対し、地図は実DOMである -> Reactのコンポーネントと地図上のデータを連携させるにはやや苦労がある ・React-Leaflet というライブラリがある程度吸収してくれるけど・・・ -> 実DOMをReactコンポーネントっぽく書けるが痒いところには手が届かない ・地図の操作で意図しないライフサイクルが動く場合があり、注意が必要 ->
render()の中になるべくコールバックを記述しないように
だけど地図は面白い!