Obvody/www/js/hranice.js

// Úprava hranice jednoho obvodu. Ostatní obvody jsou jen na pozadí.
(function () {
    var mapaEl = document.getElementById('map');
    var form = document.getElementById('frm-hraniceForm');
    var geoInput = form ? form.querySelector('[name="geo"]') : null;
    var odebrat = document.getElementById('hranice-odebrat');
    var ulozit = form ? form.querySelector('[name="send"]') : null;
    if (!mapaEl || !form || !geoInput || typeof L === 'undefined') {
        return;
    }

    var obvodId = mapaEl.getAttribute('data-obvod');
    var geojsonUrl = mapaEl.getAttribute('data-geojson');
    var podklady = MapovePodklady.vytvor();
    var map = L.map(mapaEl, {
        center: [50.853501146, 14.8425],
        zoom: 14,
        layers: [MapovePodklady.vychozi(podklady)],
        doubleClickZoom: false,
    });
    L.control.layers(MapovePodklady.popisky(podklady)).addTo(map);
    MapovePodklady.logo(map, podklady);

    var seda = {
        fillColor: '#d5d5d5',
        color: '#757575',
        weight: 1.5,
        opacity: 1,
        fillOpacity: 0.35,
    };
    var modra = {
        fillColor: '#c5ddf6',
        color: '#1d4f91',
        weight: 3,
        opacity: 1,
        fillOpacity: 0.4,
    };

    var body = [];
    var vybrany = null;
    var polygon = L.polygon([], modra).addTo(map);
    var vrcholy = L.layerGroup().addTo(map);
    var prostredky = L.layerGroup().addTo(map);

    function stejne(a, b) {
        return Math.abs(a[0] - b[0]) < 1e-9 && Math.abs(a[1] - b[1]) < 1e-9;
    }

    function nactiKruh(geometrie) {
        if (!geometrie || geometrie.type !== 'Polygon' || !geometrie.coordinates || !geometrie.coordinates[0]) {
            return [];
        }
        var kruh = geometrie.coordinates[0].map(function (bod) {
            return [Number(bod[0]), Number(bod[1])];
        });
        if (kruh.length > 1 && stejne(kruh[0], kruh[kruh.length - 1])) {
            kruh.pop();
        }
        return kruh;
    }

    function latlng(kruh) {
        return kruh.map(function (bod) {
            return [bod[1], bod[0]];
        });
    }

    function zapisPole() {
        var kruh = body.map(function (bod) {
            return [bod[0], bod[1]];
        });
        if (kruh.length) {
            kruh.push(kruh[0]);
        }
        geoInput.value = JSON.stringify({
            type: 'Polygon',
            coordinates: [kruh],
        });
    }

    function nastavOdebrat() {
        if (!odebrat) {
            return;
        }
        odebrat.disabled = vybrany === null || body.length <= 3;
    }

    function ikona(trida, velikost) {
        return L.divIcon({
            className: trida,
            html: '<span></span>',
            iconSize: [velikost, velikost],
            iconAnchor: [velikost / 2, velikost / 2],
        });
    }

    function prekresli() {
        polygon.setLatLngs(latlng(body));
        vrcholy.clearLayers();
        prostredky.clearLayers();

        body.forEach(function (bod, i) {
            var marker = L.marker([bod[1], bod[0]], {
                draggable: true,
                icon: ikona('hranice-bod', 22),
                zIndexOffset: 1000,
                keyboard: false,
            });
            marker.poradi = i;
            marker.on('add', function () {
                var el = marker.getElement();
                if (!el) {
                    return;
                }
                el.title = 'Táhni pro posun. Kliknutím bod vybereš.';
                el.setAttribute('role', 'button');
                el.setAttribute('aria-label', 'Bod hranice ' + (i + 1));
                el.classList.toggle('is-vybrany', i === vybrany);
            });
            marker.on('click', function (e) {
                L.DomEvent.stop(e);
                vybrany = i;
                oznacVyber();
                nastavOdebrat();
            });
            marker.on('drag', function (e) {
                var ll = e.target.getLatLng();
                body[i] = [ll.lng, ll.lat];
                polygon.setLatLngs(latlng(body));
            });
            marker.on('dragend', function () {
                vybrany = i;
                prekresli();
            });
            marker.on('dblclick', function (e) {
                L.DomEvent.stop(e);
                odeber(i);
            });
            vrcholy.addLayer(marker);
        });

        body.forEach(function (bod, i) {
            var dalsi = body[(i + 1) % body.length];
            var stred = [(bod[0] + dalsi[0]) / 2, (bod[1] + dalsi[1]) / 2];
            var marker = L.marker([stred[1], stred[0]], {
                icon: ikona('hranice-vlozit', 16),
                zIndexOffset: 500,
                keyboard: false,
            });
            marker.on('add', function () {
                var el = marker.getElement();
                if (el) {
                    el.title = 'Přidat bod';
                    el.setAttribute('role', 'button');
                    el.setAttribute('aria-label', 'Přidat bod');
                }
            });
            marker.on('click', function (e) {
                L.DomEvent.stop(e);
                body.splice(i + 1, 0, stred);
                vybrany = i + 1;
                prekresli();
            });
            prostredky.addLayer(marker);
        });

        zapisPole();
        nastavOdebrat();
    }

    function oznacVyber() {
        vrcholy.eachLayer(function (marker) {
            var el = marker.getElement();
            if (el) {
                el.classList.toggle('is-vybrany', marker.poradi === vybrany);
            }
        });
    }

    function odeber(index) {
        if (body.length <= 3 || index < 0 || index >= body.length) {
            return;
        }
        body.splice(index, 1);
        vybrany = null;
        prekresli();
    }

    if (odebrat) {
        odebrat.addEventListener('click', function () {
            if (vybrany !== null) {
                odeber(vybrany);
            }
        });
    }

    form.addEventListener('submit', function () {
        zapisPole();
    });

    $.getJSON(geojsonUrl, function (data) {
        var ulozena = null;
        if (geoInput.value) {
            try {
                ulozena = JSON.parse(geoInput.value);
            } catch (e) {
                ulozena = null;
            }
        }

        L.geoJSON(data, {
            interactive: false,
            style: seda,
            filter: function (feature) {
                return feature.properties && String(feature.properties.number) !== String(obvodId);
            },
        }).addTo(map);

        var vlastni = null;
        (data.features || []).some(function (feature) {
            if (feature.properties && String(feature.properties.number) === String(obvodId)) {
                vlastni = feature.geometry;
                return true;
            }
            return false;
        });

        body = nactiKruh(ulozena || vlastni);
        if (!body.length) {
            return;
        }
        prekresli();
        polygon.bringToFront();
        map.fitBounds(polygon.getBounds(), { padding: [80, 80], maxZoom: 17 });
        if (ulozit) {
            ulozit.disabled = false;
        }
        map.invalidateSize();
    });
})();