CODEWITHSUNDEEP
leafletleaflet.draw
kwn
kwn

Reputation: 919

Leaflet-draw control's toolbar not displaying

I'm trying to use Leaflet-draw in VueJS, after calling it

import LeafletDraw from 'leaflet-draw'

But when I'm trying to use it

    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

    var drawControl = new L.Control.Draw({
        edit: {
            featureGroup: drawnItems
        }
    });

    map.addControl(drawControl);

I only have a partial control's toolbar

enter image description here

Am I missing a CSS file to include ?

Upvotes: 2

Views: 3361

Answers (2)

Tamir Gilany
Tamir Gilany

Reputation: 584

If someone is still looking for a solution so inside the vue component for example Map.vue you need to add this:

<script>
import "leaflet-draw/dist/leaflet.draw.css";
.
.
.
</script>

Upvotes: 6

kwn
kwn

Reputation: 919

The issue was related to this one https://github.com/Leaflet/Leaflet.draw/issues/617

Importing the CSS file directly in my component and overriding the CSS property did the trick (with a valid path to the sprite; in Vue case, the static folder)

.leaflet-draw-toolbar a {
    background-image: url('/static/spritesheet.png');
}

Upvotes: 0

Related Questions