0
  • I am using marker cluster group.
  • using that I am able to show two markers.
  • when you click number two which is in red color you will see two markers.
  • after that when I click one marker I need to zoom in two levels to see the location
  • I wrote a marker click for that and in that i added zoom and tried to use fitbounds too, but its not zooming in.
  • we used mapcenter then also it did not work `
  • can you tell me how to fix it.
  • providing my code snippet and sandbox below.

https://codesandbox.io/s/20756jrz8p

MarkerClick = e => {
console.log("e----->", e);
this.setState({
  viewport: { center: [20, 6], zoom: 7 }
});
//this.refs.mymap.leafletElement.setZoom(8);
//let bounds = this.refs.mymap.leafletElement.fitBounds();
//console.log("bounds----->", bounds);

console.log(
  "after setting state zoomlevel bounds showCard--->",
  this.state.zoom
);

// this.setState({ zoom: 18 });

//this.setState({ zoomLevel: 7 });

};

Improve this question

1 Answer 1

Reset to default
0

The Zoom value you have used in MarkerClick() is lower than the current zoom value (zoom = 8). Hence you are not getting proper zoom. Use Zoom = 14 or 16 and a different set of co-ordinates instead of [20,6].

For Example: 

MarkerClick = e => {
...
    this.setState({
          viewport: { center: [43.39528702235596, 6.294845731267186], zoom: 16 }
    });
...
}
Improve this answer