<LayersControl.BaseLayer checked name="Google Map Satellite">
<LayerGroup>
<TileLayer
attribution="Google Maps Satellite"
url="https://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
/>
<TileLayer url="https://www.google.cn/maps/vt?lyrs=y@189&gl=cn&x={x}&y={y}&z={z}" />
</LayerGroup>
</LayersControl.BaseLayer>
</LayersControl>
<FeatureGroup ref={drawnPolygonsRef} >
<EditControl
position="topright"
onCreated={(e) => {
if (e.layerType === "polygon") {
handlePolygonCreated(e);
} else if (e.layerType === "polyline") {
handleLineCreated(e);
} else if (e.layerType === "circle") {
handleCircleCreated(e);
}
}}
onEdited={handleEditedPolygons}
onEditStart={handleEditStart}
onDeleted={handleDeleteFeatures}
draw={{
rectangle: false,
circle: true,
circlemarker: false,
polyline: true,
polygon: true,
marker: false,
}}
edit={{ edit: true }}
/>
{drawnPolygon?.map((a: any, i: number) => (
<Polygon
key={i}
positions={a.coordinates[0].map((row: any) => [row[1], row[0]])}
pathOptions={{ color: "green" }}
eventHandlers={{
click: onClickPolygon,
mouseover: onMouseOverPolygon,
mouseout: onMouseOutPolygon,
}}
>
<Popup>
<div style={{ display: "flex" }}>
<div>icon</div>
<div>
<p>Area</p>
<p>{calculatePolygonArea(turf.polygon(a.coordinates)).toFixed(4)} Ha</p>
</div>
<div>Edit icon</div>
</div>
</Popup>
</Polygon>
))}
</FeatureGroup>
</MapContainer>
</div>
one item is getting drawn from the map itself and one item is overlapping from my state.
here is my code
return (
<MapContainer
style={{
height: "100vh",
width: "100vw",
}}
center={[13.008164257208236, 77.75066171174294]}
zoom={20}
scrollWheelZoom={true}
ref={mapRef}
doubleClickZoom={false}
>
{/* */}
<LayersControl.BaseLayer name="Open Street Map">
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name="Google Map">
</LayersControl.BaseLayer>
);