// Ú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: '', 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 sborEl = document.getElementById('sbor-data'); if (sborEl && sborEl.textContent && sborEl.textContent.trim() !== 'null') { try { var sbor = L.geoJSON(JSON.parse(sborEl.textContent), { interactive: false, style: { color: '#8a3b12', weight: 4, opacity: 1, fillColor: '#f4d7b0', fillOpacity: 0.2, }, }).addTo(map); sbor.bringToBack(); } catch (e) { // hranice sboru zůstane nezobrazená } } 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(); }); })();