React leaflet draw - marker icon and drag handler is missing

Question

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>

Richardo

Please, create a code snippet that demonstrates your problem – Amalgamate

There is a lot of dependencies and I am unable to make code snippet. I need to include a leaflet, react-leaflet, leaflet-draw, react-leaflet-draw. I was unable to do so. Can you help me by edit my question? – Richardo

Answer 1

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

Richardo