Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

takf
January 13, 2018

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

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

takf

January 13, 2018
Tweet

More Decks by takf

Other Decks in Programming

Transcript

  1. //親コンポーネント 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;
  2. 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’>にマウントする
  3. 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) }