Source: maps/MapCenterOnClient.js

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

/**
 * Componente que renderiza un div en el mapa, que al hacerle click centra el mapa en la ubicacion actual del cliente
 * @name Reactor.Components.Maps.MapCenterOnClient
 * @class 
 * @example 
<map zoom="17" lat="-34.8059017139164" lng="-418.27796995639807" map_style='{"width":"100%", "height": 300}' >
    <map_center_on_client left="20" 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_client>
</map> 
*/

export const MapCenterOnClient = ({ children, top, left, bottom, right }) => {

  const map = useMap();
  const geolocation = useGeolocation();

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

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

}