Django leaflet marker icon doesn't appear on Heroku

Question

I have deployed my Django app to Heroku but when I want to fill the location field, the marker icon doesn't appear even though I have used whitenoise to serve the static files. It is working locally though. This is the

Here's how I set my whitenoise

INSTALLED_APPS = [
    ...,
    'whitenoise.runserver_nostatic'
]

MIDDLEWARE = [
    ...,
    'whitenoise.middleware.WhiteNoiseMiddleware'
]

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR,'static')

STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

MEDIA_ROOT = os.path.join(BASE_DIR,'media')

MEDIA_URL = '/media/'

Note:

The circle marker works fine

Please can you show me you root project files? I'm looking for certain tell tale signs. — Swift, Dec 11 '21 at 10:04

score 0 · Answer 1 · answered Dec 11 '21 at 10:06

0

Have you been through this section of the django heroku tutorials?

https://devcenter.heroku.com/articles/django-app-configuration

You need to specify certain files so that heroku automatically tried to collectstatic files

answered Dec 11 '21 at 10:06

Swift

1,663
1
10
21

for some reason it broke my server when I tried it – Agung Dec 11 '21 at 10:33
Did you check the heroku logs? Can you also post them? – Swift Dec 11 '21 at 11:19
nothing particular, it just gave status=500. It was also occurred to me back when I didn't use whitenoise to serve static files – Agung Dec 11 '21 at 15:27
when I inspect on the browser, the source of the marker icon is kinda weird. It get it from src=http://cvrp-bandung.herokuapp.com/static/leaflet/images/marker-icon.2273e3d8ad92.png")marker-icon.png – Agung Dec 11 '21 at 15:37
Ok then maybe its your js/jquery initialisation of the map then? – Swift Dec 11 '21 at 18:17

score 0 · Answer 2 · answered Jun 04 '23 at 14:22

I had the same issue, except I deployed on DigitalOcean. I couldn't find any info on that matter, so I came up quick and dirty solution: I just created those images, that Leaflet was trying to get (see screenshot below).

I know, that it's not a good solution, but I just needed some quick fix, so I'm OK with that. I also noticed, that in my dev env (which is Windows, btw), not only everything worked, but python manage.py collectstatic collected much more leaflets' images, than it did in my prod env (which is Ubuntu). I'm using the same versions of django-leaflet (0.29.0) and in the same virtual env (conda with Python3.9). Very strange.

Django leaflet marker icon doesn't appear on Heroku

2 Answers2