How to change the map center position to top place using Leaflet open street map in angular

Question

In my angular application I have created the leaflet map and over the leaflet map I have created two more panels data in overlapping manner And I have created the circle of 5 km radius on the map. But my problem is the panels are covering the circle on the leaflet map

So my requirement is to move the center position of the map i.e circle to top position(top middle) than only the circle will be visible otherwise it will be covered by the panels on the map.

component.ts

 map = L.map('map').setView([13.0827, 80.2707], 12);
   
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);


    L.control.zoom({
      position: 'bottomright',
  }).addTo(map);

I am new to leaflet map Can anyone help me regarding this.

Answer 1

You can let the map fit the circle bounds, like:

var circle = L.circle() // Your circle

map.fitBounds(circle.getBounds())

To show the circle on the left side of the map:

map.setView(circle.getLatLng(),map.getZoom(),{animate: false})

sw = map.getBounds().getSouthWest();
psw = map.latLngToContainerPoint(sw);
center = map.getCenter();

pc = map.latLngToContainerPoint(center);
dis = pc.x - psw.x;
middle = dis / 2

pnewCenter = L.point(pc.x+middle,pc.y)
center2 = map.containerPointToLatLng(pnewCenter);
map.setView(center2,map.getZoom(),{animate: true})