{"id":3012,"date":"2025-12-08T15:01:47","date_gmt":"2025-12-08T13:01:47","guid":{"rendered":"https:\/\/spasitelen.club\/drone\/"},"modified":"2025-12-08T15:01:47","modified_gmt":"2025-12-08T13:01:47","slug":"drone","status":"publish","type":"page","link":"https:\/\/spasitelenclub.com\/en\/drone\/","title":{"rendered":"\u0417\u0430\u0431\u0440\u0430\u043d\u0435\u043d\u0438 \u0437\u043e\u043d\u0438 \u043d\u0430 \u0413\u0412\u0410"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3012\" class=\"elementor elementor-3012 elementor-2860\">\n\t\t\t\t<div class=\"elementor-element elementor-element-360ac03f e-con-full e-flex e-con e-parent\" data-id=\"360ac03f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-19b0d02 elementor-widget__width-inherit elementor-widget elementor-widget-shortcode\" data-id=\"19b0d02\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <style>\r\n        #dm-wrapper {\r\n            position: relative; width: 100%; height: 85vh; min-height: 500px;\r\n            overflow: hidden; font-family: sans-serif;\r\n            border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);\r\n        }\r\n        #drone-map { width: 100%; height: 100%; z-index: 1; }\r\n        \r\n        .dm-toast {\r\n            position: absolute; top: 10px; left: 50%; transform: translateX(-50%);\r\n            background: rgba(30, 30, 30, 0.9); color: white;\r\n            padding: 8px 16px; border-radius: 20px; font-size: 12px;\r\n            z-index: 1000; pointer-events: none;\r\n            transition: opacity 0.5s ease; opacity: 1; white-space: nowrap;\r\n        }\r\n        .dm-toast.hidden { opacity: 0; }\r\n\r\n        .dm-fab-container {\r\n            position: absolute; top: 10px; left: 10px; z-index: 999;\r\n            display: flex; flex-direction: column; gap: 10px;\r\n        }\r\n        .dm-fab {\r\n            width: 44px; height: 44px; background: white;\r\n            border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\r\n            display: flex; align-items: center; justify-content: center;\r\n            cursor: pointer; border: none; padding: 0;\r\n        }\r\n        .dm-fab:active { background: #f0f0f0; }\r\n        .dm-fab svg { width: 24px; height: 24px; fill: #444; }\r\n\r\n        \/* Bottom Sheet & Legend styles *\/\r\n        .dm-bottom-sheet {\r\n            position: absolute; left: 0; right: 0; bottom: 0;\r\n            background: white; z-index: 1001;\r\n            border-top-left-radius: 16px; border-top-right-radius: 16px;\r\n            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);\r\n            transform: translateY(105%); transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n            max-height: 60%; display: flex; flex-direction: column;\r\n        }\r\n        .dm-bottom-sheet.active { transform: translateY(0); }\r\n        .dm-sheet-header { padding: 10px 0; display: flex; justify-content: center; cursor: pointer; }\r\n        .dm-sheet-handle { width: 40px; height: 5px; background: #ddd; border-radius: 5px; }\r\n        .dm-sheet-content { padding: 0 20px 20px 20px; overflow-y: auto; color: #333; }\r\n        .dm-sheet-title { font-size: 18px; font-weight: bold; margin-bottom: 5px; color:#222; }\r\n        .dm-sheet-meta { font-size: 13px; color: #666; margin-bottom: 15px; }\r\n        .dm-sheet-info { font-size: 14px; line-height: 1.5; background: #f9f9f9; padding: 10px; border-radius: 8px; margin-bottom: 15px;}\r\n        .dm-btn-hide { width: 100%; padding: 12px; background: #ff3b30; color: white; border: none; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; }\r\n        .dm-btn-close { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 28px; color: #999; cursor: pointer; line-height: 1; padding: 0; }\r\n        \r\n        .dm-legend-panel {\r\n            position: absolute; bottom: 20px; left: 10px;\r\n            background: white; padding: 12px; border-radius: 8px;\r\n            box-shadow: 0 2px 10px rgba(0,0,0,0.2); z-index: 1000;\r\n            display: none; font-size: 12px;\r\n        }\r\n        .dm-legend-panel.show { display: block; animation: fadeIn 0.2s; }\r\n        .dm-legend-item { display: flex; align-items: center; margin-bottom: 6px; color: #333; }\r\n        .dm-legend-item i { width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; flex-shrink: 0; }\r\n        @keyframes fadeIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }\r\n        .leaflet-control-zoom { display: none; }\r\n    <\/style>\r\n\r\n    <div id=\"dm-wrapper\">\r\n        <div id=\"dm-status\" class=\"dm-toast\">\r\n            \u23f3 \u0414\u0430\u043d\u043d\u0438 \u043e\u0442: 01:19 18.10.2026        <\/div>\r\n\r\n        <div class=\"dm-fab-container\">\r\n            <button class=\"dm-fab\" id=\"btn-locate\" title=\"\u041c\u043e\u044f\u0442\u0430 \u043b\u043e\u043a\u0430\u0446\u0438\u044f\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z\"\/><\/svg><\/button>\r\n            <button class=\"dm-fab\" id=\"btn-legend\" title=\"\u041b\u0435\u0433\u0435\u043d\u0434\u0430\"><svg viewBox=\"0 0 24 24\"><path d=\"M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z\"\/><\/svg><\/button>\r\n            <button class=\"dm-fab\" id=\"btn-zoom-in\"><svg viewBox=\"0 0 24 24\"><path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"\/><\/svg><\/button>\r\n            <button class=\"dm-fab\" id=\"btn-zoom-out\"><svg viewBox=\"0 0 24 24\"><path d=\"M19 13H5v-2h14v2z\"\/><\/svg><\/button>\r\n        <\/div>\r\n\r\n        <div id=\"dm-legend\" class=\"dm-legend-panel\">\r\n            <div style=\"font-weight:bold; margin-bottom:8px;\">\u041b\u0435\u0433\u0435\u043d\u0434\u0430<\/div>\r\n            <div class=\"dm-legend-item\"><i style=\"background:#ff0000\"><\/i> \u0417\u0430\u0431\u0440\u0430\u043d\u0435\u043d\u0430<\/div>\r\n            <div class=\"dm-legend-item\"><i style=\"background:#ffae00\"><\/i> \u0420\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435<\/div>\r\n            <div class=\"dm-legend-item\"><i style=\"background:#800080\"><\/i> \u0423\u0441\u043b\u043e\u0432\u043d\u0430<\/div>\r\n            <div class=\"dm-legend-item\"><i style=\"background:#3388ff\"><\/i> \u0414\u0440\u0443\u0433\u0438<\/div>\r\n        <\/div>\r\n\r\n        <div id=\"dm-sheet\" class=\"dm-bottom-sheet\">\r\n            <div class=\"dm-sheet-header\" id=\"dm-sheet-close-handle\"><div class=\"dm-sheet-handle\"><\/div><\/div>\r\n            <button class=\"dm-btn-close\" id=\"dm-sheet-close-btn\">&times;<\/button>\r\n            <div class=\"dm-sheet-content\">\r\n                <div id=\"sheet-title\" class=\"dm-sheet-title\">Zone<\/div>\r\n                <div id=\"sheet-meta\" class=\"dm-sheet-meta\"><\/div>\r\n                <div id=\"sheet-body\" class=\"dm-sheet-info\"><\/div>\r\n                <button id=\"btn-hide-zone\" class=\"dm-btn-hide\">\u0421\u043a\u0440\u0438\u0439 \u0442\u0430\u0437\u0438 \u0437\u043e\u043d\u0430<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div id=\"drone-map\"><\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        var map = L.map('drone-map', { zoomControl: false }).setView([42.7339, 25.4858], 7);\r\n        var layerGroup = L.layerGroup().addTo(map);\r\n        var myLocationLayer = L.layerGroup().addTo(map);\r\n        var activeLayerId = null;\r\n\r\n        L.tileLayer('https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png', { maxZoom: 19, attribution: '&copy; OpenStreetMap' }).addTo(map);\r\n\r\n        var sheet = document.getElementById('dm-sheet');\r\n        var legendPanel = document.getElementById('dm-legend');\r\n        var statusToast = document.getElementById('dm-status');\r\n        setTimeout(() => { statusToast.classList.add('hidden'); }, 5000);\r\n\r\n        document.getElementById('btn-legend').onclick = function() { legendPanel.classList.toggle('show'); };\r\n        document.getElementById('btn-zoom-in').onclick = function() { map.zoomIn(); };\r\n        document.getElementById('btn-zoom-out').onclick = function() { map.zoomOut(); };\r\n        document.getElementById('btn-locate').onclick = function() { map.locate({setView: true, maxZoom: 14, enableHighAccuracy: true}); };\r\n\r\n        map.on('locationfound', function(e) {\r\n            myLocationLayer.clearLayers();\r\n            var radius = e.accuracy \/ 2;\r\n            L.marker(e.latlng).addTo(myLocationLayer);\r\n            L.circle(e.latlng, radius, {color: '#1e88e5', weight: 1, fillOpacity: 0.1}).addTo(myLocationLayer);\r\n            statusToast.innerText = \"\u0412\u0438\u0435 \u0441\u0442\u0435 \u0442\u0443\u043a\";\r\n            statusToast.classList.remove('hidden');\r\n            setTimeout(() => statusToast.classList.add('hidden'), 3000);\r\n        });\r\n\r\n        \/\/ Bottom Sheet & Logic\r\n        function openSheet(properties, layerId) {\r\n            activeLayerId = layerId;\r\n            document.getElementById('sheet-title').innerText = properties.name;\r\n            document.getElementById('sheet-meta').innerText = `ID: ${properties.identifier} | ${properties.restriction}`;\r\n            \r\n            var contact = \"\u041d\u044f\u043c\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f\";\r\n            if (properties.zoneAuthority && properties.zoneAuthority.length > 0) {\r\n                var auth = properties.zoneAuthority[0];\r\n                contact = `<b>${auth.contactName || ''}<\/b><br><a href=\"tel:${auth.phone}\" style=\"color:#007bff\">${auth.phone || ''}<\/a>`;\r\n            }\r\n            var message = properties.message ? `<i>${properties.message}<\/i><br><br>` : '';\r\n            var geo = properties.geometry[0];\r\n            var heightInfo = `<b>\u0412\u0438\u0441\u043e\u0447\u0438\u043d\u0430:<\/b> ${geo.lowerLimit}-${geo.upperLimit} ${geo.upperVerticalReference}`;\r\n            document.getElementById('sheet-body').innerHTML = `${message}${heightInfo}<br><br>\u041a\u043e\u043d\u0442\u0430\u043a\u0442:<br>${contact}`;\r\n            sheet.classList.add('active');\r\n        }\r\n\r\n        function closeSheet() { sheet.classList.remove('active'); activeLayerId = null; }\r\n        document.getElementById('dm-sheet-close-btn').onclick = closeSheet;\r\n        document.getElementById('dm-sheet-close-handle').onclick = closeSheet;\r\n        map.on('click', closeSheet);\r\n\r\n        document.getElementById('btn-hide-zone').onclick = function() {\r\n            if (activeLayerId) {\r\n                var layer = layerGroup.getLayer(activeLayerId);\r\n                if (layer) { layerGroup.removeLayer(layer); closeSheet(); }\r\n            }\r\n        };\r\n\r\n        function getZoneColor(res) {\r\n            if(!res) return '#3388ff';\r\n            res = res.toUpperCase();\r\n            if(res.includes('PROHIBITED')) return '#ff0000';\r\n            if(res.includes('REQ_AUTHORISATION') || res.includes('AUTHORIZATION')) return '#ffae00';\r\n            if(res.includes('CONDITIONAL')) return '#800080';\r\n            return '#3388ff';\r\n        }\r\n\r\n        var jsonUrl = 'https:\/\/spasitelenclub.com\/wp-content\/uploads\/drone-map\/drone_zones.json';\r\n        fetch(jsonUrl + '?t=' + new Date().getTime())\r\n            .then(r => r.json())\r\n            .then(data => {\r\n                if (!data.features) return;\r\n                data.features.forEach(function(f) {\r\n                    if (!f.geometry || f.geometry.length === 0) return;\r\n                    var geo = f.geometry[0];\r\n                    var proj = geo.horizontalProjection;\r\n                    var color = getZoneColor(f.restriction);\r\n                    var layer = null;\r\n                    var style = { color: color, fillColor: color, fillOpacity: 0.35, weight: 2 };\r\n\r\n                    if (proj.type === 'Circle') {\r\n                        var center = [proj.center[1], proj.center[0]];\r\n                        layer = L.circle(center, Object.assign(style, { radius: proj.radius }));\r\n                    } else if (proj.type === 'Polygon') {\r\n                        var coords = proj.coordinates[0].map(c => [c[1], c[0]]);\r\n                        layer = L.polygon(coords, style);\r\n                    }\r\n\r\n                    if (layer) {\r\n                        layer.featureProperties = f;\r\n                        layerGroup.addLayer(layer);\r\n                        layer.on('click', function(e) {\r\n                            L.DomEvent.stopPropagation(e);\r\n                            openSheet(f, layer._leaflet_id);\r\n                            layer.setStyle({ fillOpacity: 0.7 });\r\n                            setTimeout(() => { layer.setStyle({ fillOpacity: 0.35 }); }, 1000);\r\n                        });\r\n                    }\r\n                });\r\n            })\r\n            .catch(err => console.error(err));\r\n    });\r\n    <\/script>\r\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1f79baa elementor-widget elementor-widget-html\" data-id=\"1f79baa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n    \/* 1. \u041d\u0443\u043b\u0438\u0440\u0430\u043d\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u0438\u0442\u0435 \u043e\u0442\u0441\u0442\u044a\u043f\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0442\u0430 *\/\r\n    html, body {\r\n        margin: 0 !important;\r\n        padding: 0 !important;\r\n        width: 100%;\r\n        height: 100%;\r\n        overflow: hidden; \r\n    }\r\n\r\n    \/* 2. \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0437\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043d\u0430 Elementor *\/\r\n    .elementor-section, .elementor-column, .elementor-widget-shortcode, .elementor-widget-html {\r\n        height: 100% !important;\r\n        margin: 0 !important;\r\n        padding: 0 !important;\r\n    }\r\n\r\n    \/* 3. \u0420\u0430\u0437\u043f\u044a\u0432\u0430\u043d\u0435 \u043d\u0430 \u043a\u0430\u0440\u0442\u0430\u0442\u0430 *\/\r\n    #dm-wrapper {\r\n        height: 100vh !important; \r\n        width: 100vw !important;  \r\n        margin: 0 !important;\r\n        border: none !important;\r\n        border-radius: 0 !important;\r\n        position: fixed; \r\n        top: 0;\r\n        left: 0;\r\n        z-index: 10; \r\n    }\r\n\r\n    \/* 4. \u0421\u043a\u0440\u0438\u0432\u0430\u043d\u0435 \u043d\u0430 \u0431\u0443\u0442\u043e\u043d\u0430 \u0437\u0430 \u0441\u044a\u0433\u043b\u0430\u0441\u0438\u0435 (Complianz) *\/\r\n    #cmplz-manage-consent, .cmplz-manage-consent {\r\n        display: none !important;\r\n        visibility: hidden !important;\r\n    }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-3012","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spasitelenclub.com\/en\/wp-json\/wp\/v2\/pages\/3012","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spasitelenclub.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spasitelenclub.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spasitelenclub.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spasitelenclub.com\/en\/wp-json\/wp\/v2\/comments?post=3012"}],"version-history":[{"count":0,"href":"https:\/\/spasitelenclub.com\/en\/wp-json\/wp\/v2\/pages\/3012\/revisions"}],"wp:attachment":[{"href":"https:\/\/spasitelenclub.com\/en\/wp-json\/wp\/v2\/media?parent=3012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}