StreamField : Add Map block - wagtail

Question

I'm working on a leaflet wagtail block integration.
https://github.com/frague59/wagtail-leaflet
I've difficulties with the widget rendering when I add the new block into the stream : nothing displays. The widget, from django-leaflet / django-geojson, involves the setting of geojson parameters 'window wide', which is not reflected in template instanciation.
In my leaflet/widget.html:
<script type="text/javascript">
{% block vars %}var {{ module }} = {};
{{ module }}.fieldid = '{{ id_css }}';
{{ module }}.modifiable = {{ modifiable|yesno:"true,false" }};
{{ module }}.geom_type = '{{ geom_type }}';
{{ module }}.srid = {{ map_srid }};
{% endblock vars %}
function {{ id_map_callback }}(map, options) {
window.LEAFLET_DATA['{{ module }}'].store_class = {{ field_store_class }};
(new {{ geometry_field_class}}(window.LEAFLET_DATA['{{ module }}'])).addTo(map);
{% block callback %}{% endblock callback %}
};
{% if target_map %}
window.addEventListener('map:init', function (e) {
var target_map = e.detail.map;
target_map.on('map:loadfield', function (me) {
if (me.fieldid == 'id_{{ target_map }}') {
setTimeout(function () {
{{ id_map_callback }}(target_map, e.detail.options);
}, 0);
}
});
}, false);
{% endif %}
</script>
From text/template element:
<script type="text/javascript">
var geodjango___prefix___value = {};
geodjango___prefix___value.fieldid = '__prefix__-value';
geodjango___prefix___value.modifiable = true;
geodjango___prefix___value.geom_type = 'Geometry';
geodjango___prefix___value.srid = 4326;
function __prefix___value_map_callback(map, options) {
geodjango___prefix___value.store_class = L.FieldStore;
(new L.GeometryField(geodjango___prefix___value)).addTo(map);
};
</script>
The Streamfield block API does not mention clearly this use case.
Do you have a working block example with this kind of block ?
Thanks !

Answer 1

Requirements:
django-leaflet
django-geosjon
jsonfield
The block definition: uses the leaflet widget from django-leaflet / django-geosjon
class GeoJSONBlock(FieldBlock):
geom_type = 'POINT'
def __init__(self, required=True, help_text=None, max_length=None, min_length=None, **kwargs):
if self.geom_type is None:
raise NotImplemented('You are attempting to use ``GeoJSONBlock`` directly, which *WILL* not work !')
self.field = GeoJSONFormField(required=required,
help_text=help_text,
max_length=max_length,
min_length=min_length,
geom_type=self.geom_type)
super(GeoJSONBlock, self).__init__(**kwargs)
def render_form(self, value, prefix='', errors=None):
"""
Renders ``edit`` form
:param value: current value
:param prefix: prefix of the form item
:param errors: Validations errors
:returns: HTML Fragment
"""
logger.debug('MapBlock::render_form() value = %s', value)
rendered = super(GeoJSONBlock, self).render_form(value=value, prefix=prefix, errors=errors)
return rendered
def render(self, value, context=None):
"""
Renders the widget in the web site
:param value: current value
:param context: Additional render context
:returns: HTML Fragment
"""
logger.debug('MapBlock::render() value = %s', value)
rendered = super(GeoJSONBlock, self).render(value=value, context=context)
return rendered
#property
def media(self):
return forms.Media(
js=['wagtailleaflet/leaflet_init.js', ]
)
def js_initializer(self):
"""
JS function to launch on start'up
:returns: JS function name, from ``wagtailleaflet/leaflet_init.js``
"""
output = 'drawMap'
logger.debug('MapBlock::js_initializer() output = %s', output)
return output
def html_declarations(self):
output = render_to_string('wagtailleaflet/leaflet_forms.html')
return output
Usage:
from wagtail.wagtailadmin.edit_handlers import StreamFieldPanel
from wagtail.wagtailcore.fields import StreamField
from wagtail.wagtailcore.models import Page
from wagtail.wagtailcore import blocks
from wagtailleaflet.blocks import GeoJSONPointBlock
class DemoPage(Page):
"""
Simple demo page
"""
body = StreamField([('text', blocks.RichTextBlock()),
('map', GeoJSONPointBlock()), ])
content_panels = Page.content_panels + [StreamFieldPanel('body')]
I've found that the problem comes from the leaflet implementation, which uses slugify (set the id to lower) to create the id, which breaks the __PREFIX__ replacement in sequence.js on block initialization.
It's a bit complicated to re-produce, that's why I did put the link to my repo with a demo wagtail project.