{% if PROFILE.mapping %}
{% if geo_item.point_2d or geo_item.multi_polygon %}
{% load ids_display_geo_items %}
<div class="col-12 col-lg-6 flex-wrap">
<div class="window-map" id="map-{{window_id}}-{{geo_item.SLUG}}-{{geo_item.pk}}">
</div>
<div id="map-content-{{window_id}}-{{geo_item.SLUG}}-{{geo_item.pk}}"></div>
</div>
<script type="text/javascript">
const disp_map = function() {
    const html = render_map("map-{{window_id}}-{{geo_item.SLUG}}-{{geo_item.pk}}", false, true);
    $("#map-content-{{window_id}}-{{geo_item.SLUG}}-{{geo_item.pk}}").html(html);
    {% if geo_item.most_precise_geo == 'point' %}
    const {{geo_item.SLUG}}{{geo_item.pk}} = {{geo_item.point_2d_geojson|safe}};
    display_map("map-{{window_id}}-{{geo_item.SLUG}}-{{geo_item.pk}}", {{geo_item.SLUG}}{{geo_item.pk}});
    {% else %}
    const {{geo_item.SLUG}}{{geo_item.pk}} = {{geo_item.multi_polygon_geojson|safe}};
    display_map("map-{{window_id}}-{{geo_item.SLUG}}-{{geo_item.pk}}", null, {{geo_item.SLUG}}{{geo_item.pk}});
    {% endif %}
}
disp_map();

{% if geo_item.SLUG == "operation" or geo_item.SLUG == "contextrecord" %}
const disp_geo_items = function(disp_cr, disp_bf, get_polygons) {
    if (disp_cr || disp_bf) {
        const get_poly = (get_polygons === "polygons");
        let url = null;
        if (get_poly) {
            url = "{% url 'api-get-geo-polygons' %}";
        }
        else {
            url = "{% url 'api-get-geo-points' %}";
        }
        display_geo_items("map-{{window_id}}-{{geo_item.SLUG}}-{{geo_item.pk}}", url, "{{geo_item.SLUG}}",
                       "{{geo_item.pk}}", disp_cr, disp_bf, get_poly);
    }
}
let geo_items_displayed_once = false;
const disp_bf = $("#disp-bf-for-{{geo_item.SLUG}}-{{geo_item.pk}}");
const get_polygons = $("#get-poly-for-{{geo_item.SLUG}}-{{geo_item.pk}}");

{% if geo_item.SLUG == "operation" %}
const disp_cr = $("#disp-cr-for-{{geo_item.SLUG}}-{{geo_item.pk}}");
const event_func_disp_geo_items = function () {
    if (geo_items_displayed_once) {
        disp_map();
    }
    else { geo_items_displayed_once = true; }
    disp_geo_items(disp_cr.prop('checked'), disp_bf.prop('checked'), get_polygons.val());
}
disp_cr.change( event_func_disp_geo_items );
disp_bf.change( event_func_disp_geo_items );
get_polygons.change( function () {
    disp_map();
    disp_geo_items(disp_cr.prop('checked'), disp_bf.prop('checked'), get_polygons.val());
})
{% else %}
const event_func_disp_geo_items = function () {
    if (geo_items_displayed_once) {
        disp_map();
    }
    else { geo_items_displayed_once = true; }
    disp_geo_items(false, disp_bf.prop('checked'), get_polygons.val());
}
disp_bf.change( event_func_disp_geo_items );
get_polygons.change( function () {
    disp_map();
    disp_geo_items(false, disp_bf.prop('checked'), get_polygons.val());
})
{% endif %}
{% endif %}
</script>
{% endif %}
{% endif %}