diff --git a/src/ButtonPanel.js b/src/ButtonPanel.js
index bde9e43..aadcf99 100644
--- a/src/ButtonPanel.js
+++ b/src/ButtonPanel.js
@@ -1,17 +1,36 @@
 /* The ButtonPanel component */
-import './style.css';
+import './style.css'
+import log from 'loglevel'
 
 export default class ButtonPanel {
-  constructor() {}
-
+  constructor(onNext, onPrev) {
+    this.onNext = onNext
+    this.onPrev = onPrev
+  }
   mount(element) {
     // create a div and mount to the element
-    this.buttonPanel = document.createElement('div');
+    this.buttonPanel = document.createElement('div')
     this.buttonPanel.innerHTML = `
-        <span id="left-arrow">&#9668;</span>
-        <span id="right-arrow">&#9658;</span>
-      `;
-    this.buttonPanel.className = 'buttonPanel';
-    element.appendChild(this.buttonPanel);
+    <span id="left-arrow">&#9668;</span>
+    <span id="right-arrow">&#9658;</span>
+    `
+    this.buttonPanel.className = 'buttonPanel'
+    element.appendChild(this.buttonPanel)
+
+    this.buttonPanel.addEventListener('click', (e) => {
+      if (e.target.id === 'right-arrow') {
+        try {
+          this.onNext()
+        } catch (e) {
+          log.warn('go next failed', e)
+        }
+      } else if (e.target.id === 'left-arrow') {
+        try {
+          this.onPrev()
+        } catch (e) {
+          log.warn('go prev failed', e)
+        }
+      }
+    })
   }
 }
diff --git a/src/Map.js b/src/Map.js
index 6a3c840..d417bdc 100644
--- a/src/Map.js
+++ b/src/Map.js
@@ -155,28 +155,29 @@ export default class Map {
     this.spin.mount(mountSpinTarget)
     this.alert = new Alert()
     this.alert.mount(mountAlertTarget)
-    this.buttonPanel = new ButtonPanel()
+    this.buttonPanel = new ButtonPanel(this.goNextPoint, this.goPrevPoint)
+    console.log(this.buttonPanel)
     this.buttonPanel.mount(mountButtonPanelTarget)
 
     this.map = this.L.map(mountTarget, mapOptions)
     this.map.setView(this.initialCenter, this.minZoom)
     this.map.attributionControl.setPrefix('')
 
-    mountButtonPanelTarget.addEventListener('click', (e) => {
-      if (e.target.id === 'right-arrow') {
-        try {
-          this.goNextPoint()
-        } catch (e) {
-          log.warn('go next failed', e)
-        }
-      } else if (e.target.id === 'left-arrow') {
-        try {
-          this.goPrevPoint()
-        } catch (e) {
-          log.warn('go prev failed', e)
-        }
-      }
-    })
+    // mountButtonPanelTarget.addEventListener('click', (e) => {
+    //   if (e.target.id === 'right-arrow') {
+    //     try {
+    //       this.goNextPoint()
+    //     } catch (e) {
+    //       log.warn('go next failed', e)
+    //     }
+    //   } else if (e.target.id === 'left-arrow') {
+    //     try {
+    //       this.goPrevPoint()
+    //     } catch (e) {
+    //       log.warn('go prev failed', e)
+    //     }
+    //   }
+    // })
 
     // load google map
     await this.loadGoogleSatellite()