Toolbar icon not loaded when using npm

[mvaivre]

It seems that the path used in the css to set the background-image for the toolbar icons is incorrect.
In fact, it searches for a file situated at ${myCurrentURL}/images/spritesheet.svg instead of looking for the file in the node module.

Is there something special to do while "requiring" the package?

[ddproxy]

Some build systems will include these files automatically.

Alternatively (and I've been thinking about doing this) you can add the svg directly to the css as a base64 data path.

In the meantime, what build system are you using and are you able to pull the images into a public directory in the meantime?

[jbccollins]

Yeah I have this issue too. I'm using rollup/babel and I am installing leaflet-draw via npm. I'm not sure what you mean by "you can add the svg directly to the css as a base64 data path." I can't really just add it to the library css because this won't work on other people's machines since I'm adding leaflet-draw as a dependency in my package.json file. Also if I ever want to clean my own npm installations I'll have to remember to go back and update leaflet.draw.css.

Edit: To add a little more clarity to the issue. Right now my js files live in /js/src. When rollup executes it puts resulting js file(s) in /js/dist. Since leaflet.draw-src.css defines 'images/spritesheet.svg' in a relative way it looks for the file in /js/dist/images/spritesheet.svg
Hope that helps.

[ddproxy]

Okay, labeling as bug.

@jbccollins If you have a smallish amount of code to reproduce the package dependency issue (or a repository would be great) Then I can use that as a base to work this out.

[jbccollins]

@ddproxy thanks for the quick reply! I'll try to get a smallish working example up soon. I'll need to create a standalone rollup app so it might not be ready today.

[ddproxy]

@jbccollins No rush, I'm asking so much from you because I'm not as familiar with that process. :D This helps a lot.

If you need/want a faster form of communication (or I disappear) let me know in gitter.

[jbccollins]

Ok. TLDR: I found a hacky solution for my use case but I don't think this is actually an issue that leaflet-draw should be handling. I have the same issue with image URLs for every npm package (this one was just particularly noticeable). It would be nice if you converted the images to base64 dataURI's but that's entirely your prerogative as this is not really a problem with leaflet-draw.

For my use case it was sufficient to override the ".leaflet-draw-toolbar a" css rule with a path to my own images directory in which I put a copy of the sprite from the leaflet-draw repo. I was able to do this by leveraging how django (which is serving up my static files) interprets URLs. By adding

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

django knows where to find the image I want. If you aren't familiar with django all you need to know is that django lets you define a 'static' directory that is kinda like the 'single source of truth for all your static files' and you can access it like an absolute path.

However, I realize this solution probably won't work for most people as using npm/node/rollup/babel/django is a somewhat weird setup (legacy stuff not my decision). Also ithis "solution" is pretty horrible. This means that anytime any npm library uses an image in css I have to copy that image to my own static directory and override the class which isn't really maintainable. If a library ever updates the css with new images that require styles to change then bad things could happen. I'm still looking for a better solution with rollup or something. If I find anything better I'll comment with an update.

I also tried converting the spritesheet.svg to a dataURI and modifying the library css which worked great. If you are looking for a bulletproof easy way fix then that'll work for anyone using npm regardless of rollup/django nonsense.

I've seen other npm libraries (rc-tree for example) use external urls (like http://some/image.png) but If you go that route then people will probably run into CORS issues and other annoying things. Plus no one working on proprietary stuff will feel comfortable relying on externally provided images that could be taken down without notice.

[jbccollins]

Ok update for the sake of... updating....
I feel like this conversation is no longer relevant to leaflet-draw so I'd like to close this. For anyone who has this issue in the future and is using rollup I believe that discussion on that project will be more appropriate and fruitful. @ddproxy sorry for bothering you about this :(

elycruz/rollup-plugin-sass#23

[wishinghand]

Sorry to reawaken this, but I think it may still be relevant. I'm running into the same issue with:

Leaflet.draw 1.0.4
Leaflet: 1.3.1
Vue: 2.5.22

I import like so in Vue: import LeafletDraw from 'leaflet-draw' and then I also copied both PNG spritesheets and the SVG one to my project's images folder. The controls show up after I attach the layers to the Leaflet map instance I have. No errors, but also no icons in the controls.

My controls look like the ones pictured here: https://stackoverflow.com/questions/43638679/leaflet-draw-controls-toolbar-not-displaying

[miko866]

The same issue here.

[DonQueso89]

Same issue here

[filipkroca]

For me helped manually import css:

import '../node_modules/leaflet-draw/dist/leaflet.draw.css';

[Anexo]

If you are using Angular (v11 in my case), you can solved this issue by importing the css in the style.css file:

@import "~leaflet-draw/dist/leaflet.draw.css";

[raulfb]

If you are using vue.js:
import 'leaflet-draw/dist/leaflet.draw.css'

[xlcrr]

import 'leaflet-draw/dist/leaflet.draw.css' works for me, issue could be closed