{% load static leaflet_tags %}

<style type="text/css">{% block map_css %}
    {% if map_width and map_height %}#{{ id_map }} { width: {{ map_width }}; height: {{ map_height }}; }{% endif %}
    {% if not display_raw %}#{{ id }} { display: none; }{% endif %}
    {% endblock map_css %}
</style>

<script type="text/javascript">
    {% block vars %}var {{ module }} = {};
    {{ module }}.fieldid = '{{ id }}';
    {{ module }}.modifiable = {{ modifiable|yesno:"true,false" }};
    {{ module }}.geom_type = '{{ geom_type }}';
    {{ module }}.srid = {{ map_srid }};
    {% endblock vars %}

    function {{ id_map_callback }}(map, options) {
        {{ module }}.store_class = {{ field_store_class }};
        (new {{ geometry_field_class}}({{ module }})).addTo(map);
        {% block callback %}{% endblock callback %}
    };
</script>

{% block map %}
    {% leaflet_map id_map callback=id_map_callback %}
{% endblock map %}

{% if display_raw %}<p> Geometry:</p>{% endif %}
<textarea id="{{ id }}" class="required" cols="150" rows="10" name="{{ name }}">{{ serialized }}</textarea>