Source: maps/MapCenterOn.js

import React from "react";
import { useMap } from 'react-leaflet';

/**
 * Componente que renderiza un div que al hacerle click centra el mapa en un punto indicado
 * @name Reactor.Components.Maps.MapCenterOn
 * @class 
 * @example 
<map zoom="17" lat="-34.8059017139164" lng="-418.27796995639807" map_style='{"width":"100%", "height": 300}' >
    <map_center_on  lat="-34.9136927165106" lng="-417.9545599222184" right="70" bottom="20">
      <svg stroke-width="0" viewBox="0 0 24 24" height="40px" width="40px" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z"></path><path fill="#2ABA66" d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3A8.994 8.994 0 0013 3.06V1h-2v2.06A8.994 8.994 0 003.06 11H1v2h2.06A8.994 8.994 0 0011 20.94V23h2v-2.06A8.994 8.994 0 0020.94 13H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"></path></svg>
    </map_center_on>
</map> 
*/

export const MapCenterOn = ({ children, lat, lng, top, left, bottom, right }) => {

  const map = useMap();

  const handleClick = (event) => {
    event?.preventDefault && event.preventDefault();
    event?.stopPropagation && event.stopPropagation();
    map.setView({lat: parseFloat(lat), lng: parseFloat(lng)});
  }

  return (
    <>
      <div onClick={handleClick} style={{
        zIndex: 1000,
        position: "absolute",
        top: parseFloat(top),
        left: parseFloat(left),
        bottom: parseFloat(bottom),
        right: parseFloat(right),
      }}>{children}</div> 
    </>
  )

}