React + Firebase でヒートマップを実装する

2018.01.12 まぼろしのJS勉強会 #2 「細かすぎて伝わらないUI実装選手権」

Transcript

1. React + Firebase で ヒートマップを実装する 2018.01.12 まぼろしのJS勉強会 #2 「細かすぎて伝わらないUI 実装選手権」
2. 今日発表する事・つかうもの Reactをベースにヒートマップを実装します ・データベース：Firebase Realtime Database ・Firebase CLI ・地図API：Leaflet.JS ・↑のヒートマップ用ライブラリ：leaflet-heatmap + heatmap.js ・ジオコーディング用ライブラリ：leaflet-geosearch
3. Leaflet.JSについて(http://leafletjs.com/) JSで動く軽量なオープンソースの地図ライブラリ OpenStreetMapをベースにしている (https://www.openstreetmap.org/) GoogleMapsAPIなどと同様にマーカー、ポップアップを実装可能 MapTilerというアプリを使えばオリジナル地図を実地図に重ね合わせることもできる (https://www.maptiler.com/)
4. 江ノ電の各駅の利用者数を地図上で可視化したい！
5. データ取得の流れ(理想形) JSON ・駅名 ・平均乗降客数 / 日 Realtime Database 地図APIにプッシュ Geocoding (駅名から 緯度・経度を取得)
6. 実際の実装は・・・ JSON Realtime Database 再びDBにプッシュ Geocoding (駅名から 緯度・経度を取得) 緯度・経度を取得、 データを加工
7. Firebaseへの接続方法
9. //親コンポーネント 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;
10. Reactにおける地図の実装 ・地図用の<div>を親コンポーネントでrender() 　ｰ> componentDidMount() で地図の呼び出し 　-> 地図単体は実DOMとして扱う
11. 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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }) //ヒートマップのレイヤ const heatmapLayer = new HeatmapOverlay({ container: document.getElementById('map') })　//<div id=’map’>にマウントする
12. 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) }
13. なぜかこうなってしまった
14. 地図APIの難しい点 ・Reactは仮想DOMを扱うのに対し、地図は実DOMである -> Reactのコンポーネントと地図上のデータを連携させるにはやや苦労がある ・React-Leaflet というライブラリがある程度吸収してくれるけど・・・ -> 実DOMをReactコンポーネントっぽく書けるが痒いところには手が届かない ・地図の操作で意図しないライフサイクルが動く場合があり、注意が必要 -> render()の中になるべくコールバックを記述しないように
15. だけど地図は面白い！