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:
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).