react-leaflet-draw
react-leaflet-draw copied to clipboard
Published
20 hours ago •
alex3165
alex3165
whenever drawing an polygon or circle or anything the drawn item is getting doubled
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}
>
{/* <TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/> */}
<TileLayer
attribution="Google Maps"
url="https://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
/>
<LayersControl>
<LayersControl.BaseLayer name="Open Street Map">
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name="Google Map">
<TileLayer
attribution="Google Maps"
url="https://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
/>
</LayersControl.BaseLayer>
<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>
);
