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

export default function Map1kCircleFixed() {

    const mapRef = useRef();

    useEffect(() => {

	//base layer
	const baseLayerOsm = 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,
	    });
	const baseLayerOsmHot = L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
	    maxZoom: 19,
	    attribution: '© OpenStreetMap contributors, Tiles style by Humanitarian OpenStreetMap Team hosted by OpenStreetMap France'});

	//overlay
	const littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
    denver    = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
    aurora    = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
	      golden    = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');
	const overlayCity = L.layerGroup([littleton, denver, aurora, golden]);

	//map
        const map = L.map(
	    mapRef.current,
	    {attributionControl: true,
	     layers: [baseLayerOsm, overlayCity]}
	).setView( [42.69751, 23.32415], 13 );

	//layer control
	var baseMaps = {
	    "OpenStreetMap": baseLayerOsm,
	    "<span style='color: red'>OpenStreetMap.HOT</span>": baseLayerOsmHot
	};
	var overlayMaps = {
	    "Cities": overlayCity
	};
	var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);

	//dynamic adding of base and overlay layers
	var crownHill = L.marker([39.75, -105.09]).bindPopup('This is Crown Hill Park.'),
	    rubyHill = L.marker([39.68, -105.00]).bindPopup('This is Ruby Hill Park.');
	var parks = L.layerGroup([crownHill, rubyHill]);
	var openTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
	    maxZoom: 19,
	    attribution: 'Map data: © OpenStreetMap contributors, SRTM | Map style: © OpenTopoMap (CC-BY-SA)'
	});
	layerControl.addBaseLayer(openTopoMap, "OpenTopoMap");
	layerControl.addOverlay(parks, "Parks");
	
	//add circle with a radius of X m
	//https://leafletjs.com/reference.html#circle
	var circle = L.circle(map.getCenter(), {
	    radius: 500
	});
	var layerCircles = L.layerGroup([circle]);
	layerControl.addOverlay(layerCircles, "Circles");

	//https://jsfiddle.net/falkedesign/q2mdow5c/
	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>Map1kCircleFixed</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
