3 of 3
added 180 characters in body

geodjango leaflet map not showing

SOLVED :It comes from the STATIC_ROOT and STATIC_URL definitions in the settings.py. It seems the leaflet flags point to those folders for the JS and CSS components of leaflet.

I'm playing with Django and leaflet since a short time. It's fun, most the time, but frustrating, sometimes... Right now I'm having trouble displaying a leaflet map on my django front-end website, using a detailView and a template only. I've been looking for a solution since days and I couldn't manage it by my own, so here I am.

I have no error, the container just shows blank, as if it couldn't call one of the embeded scripts properly :

site without a map

Here are the installed apps in my settings.py :

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'leaflet',
    'django.contrib.gis',
]

Here is my base.html :

<!DOCTYPE html>
{% load leaflet_tags %}
<html lang=fr>
<head>
        <title>{% block head_title %}titre{% endblock head_title %}</title>
        {% include 'snippets/css.html' %}
{% leaflet_css %}
{% leaflet_js %}
</head>
<body>
{% include 'snippets/nav.html' %}
<div class='container'>
{% block content %}
{% endblock content %}
</div>
        {% include 'snippets/js.html' %}
</body>
</html>

then my template :

{% extends "base.html" %}
{% block head_title %}{{ block.super }} | {{ object.nom }}{% endblock head_title %}
{% block content %}
<h1>{{ object.nom }}</h1>
<table class="table table-sm">
        <tr>
                <th>Catégorie</th>
                <td>{{ object.categorie }}</td>
        </tr>
        <tr>
                <th>Localisation</th>
                <td>{% leaflet_map "main" callback="map_init" %}
                        <script type="text/javascript">
                                function map_init(map, options) {
                                // get point lat and lon
                                var lon = "{{ object.location.x }}";
                                var lat = "{{ object.location.y }}";
                                // zoom to point & add it to map
                                map.setView([lat, lon], 12);
                                L.marker([lat, lon]).addTo(map);
                                }
                        </script>
                </td>
        </tr>
        <tr>
                <th>Questionnaire</th>
                <td></td>
        </tr>
{% endif %}
</table>
{% endblock %}

And my models.py, in case it could give any hint :

class MembreReseau(models.Model):
        nom             = models.CharField(max_length=120, blank=False, null=False)
        categorie       = models.ForeignKey(Categorie, on_delete=models.DO_NOTHING)
        ...
        location        = models.PointField("Location", blank=True, null=True)

        def __str__(self):
                return self.nom

        def get_absolute_url(self):
                return reverse('ELIEN_DIRECTORY:detail', kwargs={'pk': self.pk})

And my views.py, most simple

from django.shortcuts import render
from django.views.generic import DetailView
from .models import MembreReseau

class ELIEN_DIRECTORYDetailView(DetailView):
        model = MembreReseau

Oh ! And I use bootstrap for the rendering. I don't know if it could have some conflicts with leaflet.

Any help would be highly appreciated (joking... mental health saving actually) ! I will keep on searching and I promise to post the answer if I manage to solve it by myself.

Thanks friends !