import React, { useEffect, useRef, useState } from 'react'
import L from 'leaflet'
import "leaflet/dist/leaflet.css";

export default function MapCircleFixed() {

    const mapRef = useRef();

    useEffect(() => {

        const map = L.map(
	    mapRef.current,
	    {attributionControl: true}
	).setView( [42.69751, 23.32415], 16 );

	//add layer
	L.tileLayer(
	    "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
	    {
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
		maxZoom: 18,
		scrollWheelZoom: false,
	    }).addTo(map);

	//add circle marker
	var circle = L.circleMarker(map.getCenter(), {
	    radius: 50,
	    color: 'red',
	    fillOpacity: 0.2,
	    alt: 'popup marker name: ' + 'circle fixed to center'}
				   ).addTo(map);

	map.on('move', function(e){
	    circle.setLatLng(map.getCenter());
	    map._renderer._update();
	});
	
	// unmount map function
	//You should unmount the function in react.js to remove the existing map.
	return () => map.remove();
    }, []);    

    return (
            <>
		<p>MapCircleFixed</p>
		<div
		    style={{padding: 0, margin: 0, width: "75%", height: "23vh",}}
		    ref={el => mapRef.current = el}>
		</div>
            </>
    );
};
//https://jsfiddle.net/falkedesign/q2mdow5c/
//https://github.com/azaharyan/react-leaflet-example
//https://stackoverflow.com/questions/61159376/how-to-draw-a-circle-that-stays-in-the-center-of-a-leaflet-js-map
