I am using react leaflet draw for drawing polygons and circles.
But when I chose edit polygon there is no drag handler for a move and resize.
How to solve this issue if any one have the same?
This is code
<Map
style={this.leafletMapService.getMapStyle()}
selectArea={true}
onAreaSelected={(event) => this.handleAreaSelection(event)}
boxZoom={false}
ref={map => {this.map = map}}
center={this.props.center}
zoom={this.props.zoom}
minZoom={this.props.minZoom}
maxZoom={this.props.maxZoom}
attributionControl={false}
doubleClickZoom={false}
zoomControl={false}
editable={true}
onZoomEnd={this.handleZoomEnd}
bounceAtZoomLimits={false}
crs={this.leafletMapService.getNonGeographicMapCRS()}
dragging={!!this.props.selectedSection}
scrollWheelZoom={false}>
<FeatureGroup>
<EditControl
position='topright'
onCreated={(event) => this.onCreatedHandler(event)}
/>
{this.props.children}
</FeatureGroup>
</Map>
There were multiple problems.
First, you must be sure that a simple marker is visible which was not in my case. I have in my CSS some style which hides markers at all.
So be sure that that you can show a marker on the map.
Mandatory styles are both leaflet.css
and leaflet.draw.css
so in component add those lines:
import 'leaflet/dist/leaflet.css';
import 'leaflet-draw/dist/leaflet.draw.css'
Then if you have marker icon error just replace icons by adding this lines below
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/images/marker-icon.png',
iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/images/marker-icon.png',
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/images/marker-shadow.png',
});
or as described in this question answer
React-Leaflet marker files not found
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With