0

I'm trying to use Leaflet.draw on my project, however Leaflet.draw is not able to find the marker icon when I click on 'Draw a marker' on my toolbar. I send the error message below:

enter image description here

I've installed both Leaflet (^1.5.1) and Leaflet.draw (^1.0.4) by npm on my Vue project (^2.6.7).

I've tried to follow the full example on Github.

Would anyone know what can be happening?

Thank you in advance.

My code is as follows:

<script>
import 'leaflet/dist/leaflet.css'
import L from 'leaflet'

import 'leaflet-draw/dist/leaflet.draw.css'
import 'leaflet-draw/dist/leaflet.draw.js'

export default {
  data () {
    return {
      // leaflet map
      llmap: {},
      view: {
        center: [ -10.505, -55.09 ],
        zoom: 5
      }
    }
  },
  methods: {
    initMap () {
      this.llmap = L.map('map-id', {
        center: this.view.center,
        zoom: this.view.zoom
      })
      
      // draw control
      var drawnItems = L.featureGroup().addTo(this.llmap)

      this.llmap.addControl(new L.Control.Draw({
        position: 'topright',
          edit: {
              featureGroup: drawnItems,
              poly: {
                  allowIntersection: false
              }
          },
          draw: {
              polygon: {
                  allowIntersection: false,
                  showArea: true
              }
          }
      }))

      this.llmap.on(L.Draw.Event.CREATED, event => {
          var layer = event.layer
          drawnItems.addLayer(layer)
      })
    }
  }
}
</script>

EDIT: 1

The solution can be found here. I've added manually the marker icon paths (i.e. the second solution).

rmmariano
  • 896
  • 1
  • 18
  • 32

0 Answers0