Source: maps/MapMarkerCenterMapOqt.js

import React, { useMemo, useRef, useEffect, useState } from "react";
import { Marker, Popup, useMap } from 'react-leaflet';
import icon from "./Marker1.svg";
import L from 'leaflet';

/**
 * Componente que renderiza una marca en el centro de un mapa, devolviendo la unicacion especificada por el usuario
 * @name Reactor.Components.Maps.MapMarkerCenterMapOqt
 * @param {string!} name Nombre del input
 * @param {string?} text 
 *    Un texto que aparece en un popup
 * @param {"true"|"false"} [use_change = "true"] 
 *    Si es true, al modificarse su valor desencadena el evento change del form que lo contiene
 * @class 
 * @returns {MapMarkerOqtResult}
 * @example 
<map zoom="17" lat="-34.8059017139164" lng="-418.27796995639807" map_style='{"width":"100%", "height": 300}'>
    <map_marker_center_map name="mapa1" text="marca1" icon='
      <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_marker_center_map>
</map> 
*/

const defaultPoint = { lat: 0, lng: 0 };

export const MapMarkerCenterMapOqt = ({ name, text, use_change, icon }) => {

  const map = useMap();
  const [ state, setState ] = useState(defaultPoint);
  const markerRef = useRef(null);

  const handleChangeLocation = (latLng = defaultPoint) => {
    setState(state => ({...state, ...latLng }))
  }

  useEffect(()=>{
    map.addEventListener("move", mapLoaded)
    markerRef.current.innerHTML = icon;
    return () => {
      map.removeEventListener("move", mapLoaded);
    }
  }, [])

  const mapLoaded = ()=>{
    const center = map.getCenter()
    handleChangeLocation(center);
  }

  return (
    <>
      <input type="hidden" value={state.lat} name={`${name}.lat`} use_change={use_change}/>
      <input type="hidden" value={state.lng} name={`${name}.lng`} use_change={use_change}/>
      <div ref={markerRef} style={{
        zIndex: 1000,
        position: "absolute",
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)"
      }}></div> 
    </>
  )

}


/**
 * @typedef {Object} MapMarkerOqtResult
 * @property {number} lat Latitud
 * @property {number} lng Longitud
 */