How we calculate the center point from the given coordinate? React-Leaflet

Question

This is my JSON ARRAY

[
    {
      "northEast": "60.22352998843195,24.94705001539827",
      "southWest": "60.13500641212243,24.66432372755647",
      "_comment": "First of bigger views, this is just comment, don't use it in code"
    },
    {
      "northEast": "60.25583006469535,25.052094025408156",
      "southWest": "60.16739368515819,24.76936773756636"
    },
    {
      "northEast": "60.259833395882744,25.196786999980585",
      "southWest": "60.17140782564092,24.914060712138788"
    },
    {
      "northEast": "60.212448009374754,25.00376734695335",
      "southWest": "60.16820109990049,24.862404203032455",
      "_comment": "First of medium views, this is just comment, don't use it in code"
    },
    {
      "northEast": "60.21163769386681,25.0439312331336",
      "southWest": "60.16738969143272,24.9025680892127",
      "_comment": "Last of medium views, this is just comment, don't use it in code"
    },
    {
      "northEast": "60.190268017659626,24.972029980829788",
      "southWest": "60.17920440537793,24.936689194849563",
      "_comment": "First of small views, this is just comment, don't use it in code"
    },
    
        {
      "northEast": "60.18471960429552,24.95630341642265",
      "southWest": "60.17365412217261,24.920962630442425"
    },
    {
      "northEast": "60.17386547757727,24.972094346031998",
      "southWest": "60.162796337863156,24.936753560051773",
      "_comment": "Last of small views, this is just comment, don't use it in code"
    },
    {
      "northEast": "60.170494436844166,24.96379079865687",
      "southWest": "60.16495976522987,24.946120405666758",
      "_comment": "One really small"
    }
  ]

Now I want to Calculate the center point. When I click on any Coordinates It will get the Center point. Below is my code. I want to get the center point when i click any of the map area it will zoom in and show the center point. I also Attach the reference code given below.

const setTupleArray =()=>{
        var tupleArray: Array<LatLngTuple[]> = [];
        data.map((item)=> {
            const northEast =  item.northEast.split(",");
            const southWest = item.southWest.split(",")
            tupleArray.push([
                [+northEast[0], +northEast[1]],
                [+southWest[0], +southWest[1]]
            ])
        })
        let tupleAreaCalculateArray: any = [];
        tupleArray.forEach( (item: number[][]) => {
            const area =  calculateArea(item)
            tupleAreaCalculateArray.push([...item, [area] ])
        })
        const calculate = tupleAreaCalculateArray;
        setLatLngTupleArray(calculate);
    }

     // Calculate the distance area of layer 
     const calculateArea = (item: number[][]) => {
        var p = 0.017453292519943295;    // Math.PI / 180
        var c = Math.cos;
        var a = 0.5 - c((item[1][0] - item[0][0]) * p) / 2 + c(item[0][0] * p) * c(item[1][0] * p) * (1 - c((item[1][1] - item[0][1]) * p)) / 2;
        return 12742 * Math.asin(Math.sqrt(a)); // 2 * R; R = 6371 km

    }

Answer 1

You can use L.LatLngBounds and use the built in getCenter() function: Docu

var bounds = L.LatLngBounds([60.22352998843195,24.94705001539827],[60.13500641212243,24.66432372755647]);
var center = bounds.getCenter();