diff --git a/src/App.js b/src/App.js
index 7c9cc1b8b..92dc5a421 100644
--- a/src/App.js
+++ b/src/App.js
@@ -258,25 +258,17 @@ function App() {
   const [timelineEnabled, setTimelineEnabled] = React.useState(true);
 
   function showPanel(tree){
+    expect(tree).match({
+      lat: expect.any(Number),
+      lon: expect.any(Number),
+    });
     log.log("show panel...");
     setSidePanelState("show");
     setTree(tree);
     //consider the visible of the point
     const {map} = mapRef.current;
-    const mapLeaflet = map.getMap();
-    let left,top;
-    if(map.checkUsingTile()){
-      const point = map.getPoints()[map.getCurrentIndex()];
-      log.warn("current point:", point);
-      const {x, y} = mapLeaflet.latLngToContainerPoint([point.lat, point.lon]);
-      left = x;
-      top = y;
-    }else{
-      const marker = map.getMarkerByPointId()[tree.id]
-      const {x, y} = mapLeaflet.latLngToContainerPoint(marker.getLatLng());
-      left = x;
-      top =y;
-    }
+    const leafletMap = map.getLeafletMap();
+    const {x: left , y: top} = leafletMap.latLngToContainerPoint([tree.lat, tree.lon]);
     log.log("top:", top, "left:", left);
     expect(top).number();
     expect(left).number();
@@ -316,13 +308,13 @@ function App() {
         const x = left - leftCenter;
         const y = top - topCenter;
         log.log("pant by x,y:", x, y);
-        map.getMap().panBy(window.L.point(x,y));
+        leafletMap.panBy([x,y]);
       }
     }else{
       log.info("there is no marker");
     }
-    setHasNext(map.hasNextPoint());
-    setHasPrev(map.hasPrevPoint());
+    setHasNext(true);
+    setHasPrev(true);
   }
 
   function showPanelWithoutTree(){
@@ -459,6 +451,7 @@ function App() {
       {};
     const map = new Map({
       onLoad: loaded,
+      onClickTree: showPanel,
       ...parameters,
     });
     map.mount(mapRef.current);
diff --git a/src/models/Map.js b/src/models/Map.js
index e061cfc95..ed8efbd5a 100644
--- a/src/models/Map.js
+++ b/src/models/Map.js
@@ -113,7 +113,8 @@ export default class Map{
         const [southWestLng, southWestLat, northEastLng, northEastLat] = 
           this.bounds.split(",");
         log.warn("fly to bounds:", this.bounds);
-        this.map.flyToBounds([
+//        this.map.flyToBounds([
+        this.map.fitBounds([
           [southWestLat, southWestLng],
           [northEastLat, northEastLng]
         ]);
@@ -152,8 +153,8 @@ export default class Map{
         minZoom: this.minZoom,
         maxZoom: this.maxZoom,
         //close to avoid too many requests
-        updateWhenZooming: false,
-        updateWhenIdle: false,
+        updateWhenZooming: true,
+        updateWhenIdle: true,
       }
     );
     this.layerTile.addTo(this.map);
@@ -171,7 +172,12 @@ export default class Map{
     this.layerUtfGrid.on('click', (e) => {
       log.warn("click:", e);
       if (e.data) {
-        this.clickMarker(e.data);
+        const [lon, lat] = JSON.parse(e.data.latlon).coordinates;
+        this.clickMarker({
+          ...e.data,
+          lat,
+          lon,
+        });
       }
     });
 
@@ -261,6 +267,7 @@ export default class Map{
     this.unHighlightMarker();
     const [lon, lat] = JSON.parse(data.latlon).coordinates;
     if(data.type === "point"){
+      this.onClickTree && this.onClickTree(data);
     }else if(data.type === "cluster"){
       if(data.zoom_to){
         log.info("found zoom to:", data.zoom_to);