Source: maps/MapOqt.js

import React, { useEffect, useMemo, useRef } from "react";
import { MapContainer, TileLayer } from 'react-leaflet'
import { processOptions } from "../..";

/**
 * Componente que renderiza un mapa react-leaflet
 * @name Reactor.Components.Maps.MapOqt
 * @param {string} [id = "map"] 
 *    Identificador único del mapa
 * @param {string?} lat 
 *    Latitud inicial del mapa
 * @param {string?} lng 
 *    Longitud inicial del mapa
 * @param {string} [zoom = "13"] 
 *    Zoom inicial del mapa
 * @param {string} [map_style = '{"width":"100%", "height": 500}'] 
 *    Estilos en formato react que se aplican al div contenedor del mapa
 * @param {("true"|"false")} [dragging = "true"] 
 *    Establece si se puede arrastrar el mapa a otra ubicación 
 *    Es util cuando se quiere mostrar un mapa estático, 
 *    o cuando se quiere hacer seguimiento de la ubicación del dispositivo
 * @class 
 * @example 
<map lat="38.2111" lng="54.0121" zoom="13">
  <map_marker name="marca" lat="38.2111" lng="54.0121" text="una marca" readonly="false" use_change="true"></map_marker>
</map>
 */

export const MapOqt = ({ key, id = "map", lat, lng, zoom = "13", map_style = '{"width":"100%", "height": 500}', dragging = "true", children }) => {
  
  const mapRef = useRef();
  
  const handleWhenCreated = (map) => {
    mapRef.current = map;
    map.invalidateSize();
  }

  useEffect(()=>{
    return ()=> {
      mapRef.current?.remove();
    }
  }, []);

  return (
    <>
      <MapContainer 
        key={key}
        center={lat && lng ? [ lat, lng ] : [0, 0]}
        zoom={zoom} 
        scrollWheelZoom={false} 
        id={id}
        style={processOptions(map_style)}
        dragging={dragging === "true"}
        doubleClickZoom={dragging === "true"}
        whenCreated={handleWhenCreated}
      >
        {children}
        <TileLayer
          attribution='&copy; <a href="#" >OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
      </MapContainer>
    </>
  )
}