Using leaflet / geojson with wagtail

[frague59]

Hi, I'd like to use Leaflet in a Wagtail app.

I've created a geom ( djgeojson ) PointField into a snippet (a simple model with ad hoc registration ) and I've declared the field "panel" as editor :

panels = [
    ...
    handlers.FieldPanel('geom', classname='full', widget=LeafletWidget()), 
    ...
]

The map does not displays : the template tags {% leaflet_css %} and {% leaflet_js %}a are not loaded.

I've tried to load them through some hooks, but it does not work...

Have you any ideas or proposals ? Thank !

[Gagaro]

You need to set include_media to True on your widget. You can do that by creating your own widget:

class LeafletWidgetWithMedia(LeafletWidget):
    include_media = True

This should do the trick.

[frague59]

I've the reason of the bug :

from wagtail.wagtailcore import hooks

...
@hooks.register('insert_editor_css')
def leaflet_editor_css():
    return format_html(render_to_string('publications/leaflet/leaflet_css.html', {"debug": settings.DEBUG}))


@hooks.register('insert_editor_js')
def leaflet_editor_js():
    return format_html(render_to_string('publications/leaflet/leaflet_js.html', {"debug": settings.DEBUG}))

In the string output by the {% leaflet_css %}, I've have a row:

<style>.leaflet-container-default {min-height: 300px;}</style>

which contains a {min-height: 300px;}, and the format_html() django function tries (and fails) to format it... I've used a mark_safe() instead of format_html(), an it works 🏆

[frague59]

... but without point selector ...

[Jean-Zombie]

I had the same problem. I'd suggest Wagtail hooks to add some extra css to the editor panel – in addition to include_media = True 😄 .

# wagtail_hooks.py

from django.templatetags.static import static
from django.utils.html import format_html

from wagtail.core import hooks


@hooks.register('insert_editor_css')
def editor_css():
    return format_html(
        '<link rel="stylesheet" href="{}">',
        static('css/leaflet_wagtail_editor.css')
    )

And then simply add to the css file

.leaflet-container {
    min-height: 350px;
}