I'm using third party js libraries in my Laravel 5.5 project (leaflet and leaflet-draw). I installed the libraries using npm:
npm install leaflet
npm install leaflet-draw
I added the folowing lines in resources/assets/js/app.js:
require('leaflet');
require('leaflet-draw');
and in resources/assets/sass/app.scss:
@import "~leaflet/dist/leaflet.css";
@import "~leaflet-draw/dist/leaflet.draw.css";
after that, I run:
npm run dev
Assets compile and my application works, but I get a weird graphical error. When I draw a marker on map, it is drawn normally but the same marker image is drawn instead of shadow:
If I use CDNs for these libraries, everything looks fine. What am I doing wrong? Also, I checked node_modules\leaflet-draw\dist\images and there is marker-shadow.png inside. After compiling assets, I checked public\images\vendor\leaflet-draw\dist and there are some spritesheets inside, but other images are not there. What am I doing wrong?
Most of the times when using third-party packages you have to copy over the images and fonts to the correct location in your public directory.
Do you get any errors in your console? That might be a good starting place for fixing this issue.
Images and fonts folders copied automatically to public folder and there are no errors in console. Other sprites and icons from library work fine. Could be library specific error...
I tried deploying this application to server. I deployed it to a subfolder, so the address is: https://mysite.com/laravelapplication
I followed this instruction: https://www.digitalocean.com/community/tutorials/how-to-deploy-a-laravel-application-with-nginx-on-ubuntu-16-04
All routes and urls work fine. I don't get any code errors. But, leaflet and leaflet draw libraries have trouble fetching their icons and fonts. I get these errors:
GET https://mysite.com/fonts/vendor/leaflet-draw/dist/images/spritesheet.svg?fd5728f... 404 (Not found)
GET https://mysite.com/images/vendor/leaflet/dist/images/layers.png?a613745... 404 (Not found)
Looks like the library is searching for fonts and icons in the wrong place. It should look in https://mysite.com/laravelapplication instead of https://mysite.com
Or is it using localhost as fallback defined in config/app.php under "Application URL"?
'url' => env('APP_URL', 'http://localhost'),
I think it's using the mysite.com/ domain. By default when you use the asset helper it will use the url of the current domain. So your html will look like this I guess
/fonts/vendor/leaflet-draw/dist/images/spritesheet.svg?fd572823423423
However you run your website in a different directory on the server, but the asset will be fetched from the start of the url because of the / at the start. If you want to use this you either need to use a subdomain or prefix all includes using the directory.
I had the same issue today.
I went into the node_modules/leaflet/dist/leaflet.css and on line 392 you will see
background-image: url(images/marker-icon.png);
// Changed to
background-image: url(/images/marker-icon.png);
Also made sure the images are in the images folder.
Sorted the issue for me anyway...
Hi there,
Was this issue ever resolved? I'm using leaflet v1.7.1 with laravel 7. I am also getting that exact issue. None of the above information has helped me.
So if anyone has a solution. Please and Thank you in advanced :D
Please or to participate in this conversation.
