I think this problem is to use Popup or eventHandler. But when i used Popup, The circle is created but not removed. And I have no idea how to make a circle using eventHandlers. This First Code is use popup about this porblem.

            <MapContainer
                center={[48.864716, 2.349]}
                zoom={2}
                scrollWheelZoom={true}
                zoomControl={false}
                style={{ width: "100%", height: "100%" }}
                minZoom={2}
                maxZoom={5}
                doubleClickZoom={false}>
                <TileLayer
                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                <Polygon positions={overline} />
                <Marker position={[36.5, 130]} >
                    <Popup >Korea
                        <Circle center={[36.5, 130]} radius={1000000} />
                    </Popup>
                </Marker>
            </MapContainer>

Here is how it looks

The Code with eventHandler.

<MapContainer
                center={[48.864716, 2.349]}
                zoom={2}
                scrollWheelZoom={true}
                zoomControl={false}
                style={{ width: "100%", height: "100%" }}
                minZoom={2}
                maxZoom={5}
                doubleClickZoom={false}>
                <TileLayer
                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                <Polygon positions={overline} />
                <Marker position={[36.5, 130]} eventHandlers ={{click : (e) => drawCircle(e.latlng)}}>
                    <Popup >Korea</Popup>
                </Marker>
            </MapContainer>

How it looks with event handler

Please help me

I used both EventHandler and popup. But I don't know how to fix it.

CodePudding user response：

import React from 'react';
import { MapContainer, TileLayer, Marker, Popup, Circle } from 'react-leaflet';
import "./test.css"

function Test_full_map() {

    const drawCircle = (position) => {
        console.log(position)
        return (<Circle center={position} radius={10000} />)
    }

    return (
        <div id='map'>
            <MapContainer
                center={[48.864716, 2.349]}
                zoom={2}
                scrollWheelZoom={true}
                zoomControl={false}
                style={{ width: "100%", height: "100%" }}
                minZoom={2}
                maxZoom={5}
                doubleClickZoom={false}>
                <TileLayer
                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                <Marker position={[36.5, 130]}
                //eventHandlers ={{click : (e) => drawCircle(e.latlng)}} //use eventHandler
                >
                    <Popup closeButton={true}>Korea
                        <Circle center={[36.5, 130]} radius={1000000} //use Popup
                        /> 
                    </Popup>
                </Marker>
            </MapContainer>
        </div>
    );
}

export default Test_full_map;

This Code is total Code. Thank you for your interest.

CodePudding user response：

This can work

     // set initial value for circle
     const [showCircle, setShowCircle] = useState(false);

     const onMarkerClick = (r) => {
       // e.preventDefault();
       console.log('marker click')
       // toggle circle
       setShowCircle(s => !s) 
     }


        <MapContainer
            center={[48.864716, 2.349]}
            zoom={2}
            scrollWheelZoom={true}
            zoomControl={false}
            style={{ width: "100%", height: "100%" }}
            minZoom={2}
            maxZoom={5}
            doubleClickZoom={false}>
            <TileLayer
                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <Polygon positions={overline} />
            <Marker 
               position={[36.5, 130]} 
               // add event handler here
               eventHandlers={{ click: onMarkerClick }}
             >
                <Popup >Korea
                    // show circle conditionally when marker is clicked
                   { showCircle && <Circle center={[36.5, 130]} radius={1000000} />}
                </Popup>
            </Marker>
        </MapContainer>

Few pointers name of drawCircle needs to be changed to DrawComponent needs to start with capital letter and needs to be outside the main component for performance reasons

Hope this helps yout to solve the problem