{% extends "mapsapp/map2d_base.html" %}
{% load static %}
{% block title %}Вынос точек{% endblock title %}

{% block extra_js %}
<script>
    // Цвета для стандартных маркеров (из leaflet-color-markers)
    var markerColors = ['red', 'green', 'orange', 'violet', 'grey', 'black', 'blue'];
    var getColorIcon = function(color) {
        return L.icon({
            iconUrl: '{% static "leaflet-markers/img/marker-icon-" %}' + color + '.png',
            shadowUrl: '{% static "leaflet-markers/img/marker-shadow.png" %}',
            iconSize: [25, 41],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34],
            shadowSize: [41, 41]
        });
    };

    var overlays = [];

    {% for group in groups %}
        var groupIndex = {{ forloop.counter0 }};
        var colorName = markerColors[groupIndex % markerColors.length];
        var groupIcon = getColorIcon(colorName);

        var groupLayer = L.layerGroup();

        var subgroup = [];
        {% for point_data in group.points %}
            var pointName = "{{ group.name|escapejs }}";

            var marker = L.marker([{{ point_data.point.1|safe }}, {{ point_data.point.0|safe }}], {
                icon: groupIcon
            }).bindPopup(pointName);

            groupLayer.addLayer(marker);

            subgroup.push({
                label: "{{ forloop.counter }} - {{ point_data.frequency }}",
                layer: marker
            });
        {% endfor %}

        overlays.push({
            label: '{{ group.name|escapejs }}',
            selectAllCheckbox: true,
            children: subgroup,
            layer: groupLayer
        });
    {% endfor %}


    // Используем именно tree-контрол
    L.control.layers.tree(baseLayers, overlays, {
        collapsed: false,
        autoZIndex: true
    }).addTo(map);
</script>
{% endblock extra_js %}