Search code examples
leafletstylesleaflet-draw

Leaflet.draw style messed up in react component

In my react project, I use the leaflet as the map library. And I didn't use the react-leaflet package, instead I use the original leaflet library.

Now I want to add the leaflet-draw plugin, I already install the leaflet-draw npm package, and my setup is as following:

import 'leaflet-draw'
import './leaflet-draw.less'

class GLMap extends Component {
  componentDidMount () {
    ...
    this.setUpLeafletDraw()
    this.map.on('draw:created', this.leafletDrawHandler)
  }

  leafletDrawHandler = (e) => {
    console.log('11111', e.layer._latlngs)
    const type = e.layerType
    const layer = e.layer

    if (type === 'marker') {
      layer.bindPopup('A popup!')
    }
    this.drawnItemsLayer.addLayer(layer)
  }

  setUpLeafletDraw = () => {
    // this.drawnItems is the layer contains the drawn features
    this.drawnItemsLayer = new L.FeatureGroup()
    this.map.addLayer(this.drawnItemsLayer)
    var drawControl = new L.Control.Draw({
      edit: {
        featureGroup: this.drawnItemsLayer
      }
    })
    this.map.addControl(drawControl)
  }
}

In the above code, this.map is the leaflet Dom instance. So far the functions of the leaflet draw can work well.

But the issue is the style of the toolbar is messed up as following:

enter image description here

So what's the problem?

Solution

  • Most likely leaflet-draw CSS file is missing which contains declarations for .leaflet-draw-toolbar.

    It could be imported from leaflet-draw package like this:

    import "leaflet-draw/dist/leaflet.draw-src.css";

    or referenced via public/index.html from CDN like this:

    <link rel="stylesheet" href="https://unpkg.com/leaflet-draw@latest/dist/leaflet.draw-src.css" />

    Here is a demo