{"id":15,"date":"2025-03-08T06:29:02","date_gmt":"2025-03-08T06:29:02","guid":{"rendered":"https:\/\/cctv.zitline.net.id\/?page_id=15"},"modified":"2025-03-11T07:30:19","modified_gmt":"2025-03-11T07:30:19","slug":"home","status":"publish","type":"page","link":"https:\/\/cctv.zitline.net.id\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"15\" class=\"elementor elementor-15\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7058ea6 e-con-full e-flex e-con e-parent\" data-id=\"7058ea6\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-48a1269 elementor-widget elementor-widget-shortcode\" data-id=\"48a1269\" data-element_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\">    <div id=\"map\" style=\"height: 900px;\"><\/div>\n    <script>\n        document.addEventListener(\"DOMContentLoaded\", function () {\nvar map = L.map('map', {\n    center: [-5.376416868665917, 105.20835805900451], \/\/ Lokasi awal (lampung)\n    zoom: 14,\n    scrollWheelZoom: true,\n    doubleClickZoom: false\n});\n\nL.tileLayer('http:\/\/{s}.google.com\/vt\/lyrs=m&x={x}&y={y}&z={z}', {\n    maxZoom: 18,\n    subdomains: ['mt0', 'mt1', 'mt2', 'mt3']\n}).addTo(map);\n\n            fetch(\"https:\/\/cctv.zitline.net.id\/wp-admin\/admin-ajax.php?action=get_cctv_data\")\n                .then(response => response.json())\n                .then(data => {\n                    data.forEach(cctv => {\n                        var marker = L.marker([cctv.lat, cctv.lng], {\n                            icon: L.icon({\n                                iconUrl: 'http:\/\/cctv.zitline.net.id\/wp-content\/uploads\/2025\/03\/cctviconz-1.png',\n                                iconSize: [40, 48],\n                                iconAnchor: [15, 30],\n                                popupAnchor: [0, -30]\n                            })\n                        }).addTo(map);\n\t\t\t\t\t\t\n\t\t\t\t\t\t  \/\/ Tambahin tooltip buat hover\n                    marker.bindTooltip(cctv.name, {\n                    permanent: false, \n                    direction: \"top\",\n                    className: \"cctv-tooltip\" \/\/ Bisa ditambah styling via CSS kalau mau custom tampilan\n                });\n                        \n                        marker.bindPopup(`<b>${cctv.name}<\/b>`);\n                        marker.on('click', function() {\n                            openModal(cctv.name, cctv.link);\n                        });\n                    });\n                });\n\n            window.openModal = function(name, link) {\n                var modal = document.createElement(\"div\");\n                modal.id = \"cctvModal\";\n                modal.style.cssText = `\n                    display: flex; \n                    align-items: center; \n                    justify-content: center;\n\t\t\t\t\tpadding : 0;\n\t\t\t\t\tmargin : 0;\n                    position: fixed; \n                    left: 0; \n                    top: 0; \n                    width: 100%; \n                    height: 100%; \n                    background: rgba(0,0,0,0.7); \n                    z-index: 9999;\n                `;\n\n                modal.innerHTML = `\n                    <div style=\"\n                        background: white; \n                        padding: 15px 5px; \n                        border-radius: 5px; \n                        box-shadow: 0px 0px 10px rgba(0,0,0,0.2); \n                        position: relative; \n                        width: 800px; \n                        max-width: 95%;\n                        z-index: 10000;\n                    \">\n                        <h5 style=\"text-align:center; margin-top:0;\">${name}<\/h3>\n                        <div style=\"position: relative;\">\n\t\t\t\t\t\t\t<iframe id=\"cctvIframe\" src=\"${link}\" width=\"100%\" height=\"450px\" style=\"border: none; pointer-events: none;\" allowfullscreen><\/iframe>\n                            <div style=\"\n                                position: absolute;\n                                bottom: 10px;\n                                left: 10px;\n                                background: rgba(0, 0, 0, 0.5);\n                                padding: 5px 20px;\n                                border-radius: 5px;\n                                color: white;\n                                font-size: 14px;\n                            \">\n                                <div style=\"text-align: center; font-weight: bold;\">Support By:<\/div>\n                                <img decoding=\"async\" src=\"http:\/\/cctv.zitline.net.id\/wp-content\/uploads\/2025\/03\/zitline-sigertel.png\" \n                                    style=\"width: 100px; height: auto; margin-top: 10px;\" \n                                    alt=\"Zitline Logo\">\n                            <\/div>\n                        <\/div>\n                        <div style=\"text-align: center; margin-top: 10px;\">\n\t\t\t\t\t\t\t<button onclick=\"toggleFullscreen()\" \n\t\t\t\t\t\t\t\tstyle=\"\n\t\t\t\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\t\t\t\tbottom: 0;\n\t\t\t\t\t\t\t\t\tleft: 0;\n\t\t\t\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\t\t\t\tjustify-content: right;\n\t\t\t\t\t\t\t\t\tgap: 5px;\n\t\t\t\t\t\t\t\t\tbackground: white;\n\t\t\t\t\t\t\t\t\tpadding: 12px 12;\n\t\t\t\t\t\t\t\t\tborder: none;\n\t\t\t\t\t\t\t\t\tborder-top: 1px solid #ddd;\n\t\t\t\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t\t\t\t\tcolor: #666;\n\t\t\t\t\t\t\t\t\tfont-size: 14px;\n\t\t\t\t\t\t\t\t\">\n\t\t\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" width=\"20\" height=\"20\">\n\t\t\t\t\t\t\t\t\t<path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4 8V4h4M16 4h4v4M4 16v4h4m12-4v4h-4\" \/>\n\t\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t\t\t<span>Fullscreen<\/span>\n\t\t\t\t\t\t\t<\/button>\n\n                            <button onclick=\"document.getElementById('cctvModal').remove()\" \n\t\t\t\t\t\t\t\tstyle=\"\n\t\t\t\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\t\t\t\ttop: 10px;\n\t\t\t\t\t\t\t\t\tright: 10px;\n\t\t\t\t\t\t\t\t\tbackground: none;\n\t\t\t\t\t\t\t\t\tborder: none;\n\t\t\t\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t\t\t\t\">\n\t\t\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" width=\"24\" height=\"24\">\n\t\t\t\t\t\t\t\t\t<path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" \/>\n\t\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t\t<\/button>\n                        <\/div>                    <\/div>\n\n                `;\n                document.body.appendChild(modal);\n            };\n\n            window.toggleFullscreen = function() {\n                var iframe = document.getElementById(\"cctvIframe\");\n                iframe.style.pointerEvents = \"auto\";\n                if (iframe.requestFullscreen) {\n                    iframe.requestFullscreen();\n                } else if (iframe.mozRequestFullScreen) { \n                    iframe.mozRequestFullScreen();\n                } else if (iframe.webkitRequestFullscreen) { \n                    iframe.webkitRequestFullscreen();\n                } else if (iframe.msRequestFullscreen) { \n                    iframe.msRequestFullscreen();\n                }\n            };\n        });\n    <\/script>\n    <\/div>\n\t\t\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_header_footer","meta":{"_acf_changed":false,"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"class_list":["post-15","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/cctv.zitline.net.id\/index.php?rest_route=\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cctv.zitline.net.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cctv.zitline.net.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cctv.zitline.net.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cctv.zitline.net.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15"}],"version-history":[{"count":26,"href":"https:\/\/cctv.zitline.net.id\/index.php?rest_route=\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":106,"href":"https:\/\/cctv.zitline.net.id\/index.php?rest_route=\/wp\/v2\/pages\/15\/revisions\/106"}],"wp:attachment":[{"href":"https:\/\/cctv.zitline.net.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}