Peta Pelatihan Militer Indonesia<\/title>\n\n \n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" \/>\n \n <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Inter', sans-serif;\n overflow: hidden;\n background-color: #0a0e27;\n }\n\n \/* ===== HALAMAN PEMBUKA ===== *\/\n #landing-page {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 40%, #2d1b3d 100%);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n transition: opacity 0.8s ease, visibility 0.8s ease;\n }\n\n #landing-page.hidden {\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n }\n\n .landing-content {\n text-align: center;\n padding: 40px;\n max-width: 600px;\n }\n\n .landing-icon {\n font-size: 80px;\n margin-bottom: 24px;\n display: block;\n }\n\n .landing-content h1 {\n font-size: 2.2rem;\n font-weight: 700;\n color: #ffffff;\n margin-bottom: 12px;\n letter-spacing: 1px;\n }\n\n .landing-content .subtitle {\n font-size: 1rem;\n color: #8899bb;\n margin-bottom: 40px;\n line-height: 1.6;\n }\n\n .btn-mulai {\n background: linear-gradient(135deg, #e63946, #c1121f);\n color: white;\n border: none;\n padding: 18px 48px;\n font-size: 1.15rem;\n font-weight: 600;\n border-radius: 50px;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 8px 32px rgba(230, 57, 70, 0.35);\n font-family: 'Inter', sans-serif;\n letter-spacing: 0.5px;\n }\n\n .btn-mulai:hover {\n transform: translateY(-3px);\n box-shadow: 0 12px 40px rgba(230, 57, 70, 0.5);\n }\n\n .btn-mulai:active {\n transform: translateY(-1px);\n }\n\n \/* ===== HALAMAN PETA ===== *\/\n #map-container {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: 1;\n }\n\n #map {\n width: 100%;\n height: 100%;\n background: #0a0e27;\n }\n\n \/* Tombol Kembali *\/\n .btn-back {\n position: absolute;\n top: 20px;\n left: 20px;\n z-index: 999;\n background: rgba(10, 14, 39, 0.85);\n color: white;\n border: 1px solid rgba(255,255,255,0.15);\n padding: 12px 24px;\n border-radius: 12px;\n cursor: pointer;\n font-family: 'Inter', sans-serif;\n font-size: 0.9rem;\n font-weight: 600;\n backdrop-filter: blur(10px);\n transition: all 0.3s ease;\n }\n\n .btn-back:hover {\n background: rgba(230, 57, 70, 0.9);\n border-color: #e63946;\n }\n\n \/* Kustomisasi popup *\/\n .custom-popup .leaflet-popup-content-wrapper {\n background: #0f1535;\n color: #e0e6f0;\n border-radius: 14px;\n border: 1px solid rgba(255,255,255,0.1);\n box-shadow: 0 10px 40px rgba(0,0,0,0.5);\n font-family: 'Inter', sans-serif;\n }\n\n .custom-popup .leaflet-popup-tip {\n background: #0f1535;\n border: 1px solid rgba(255,255,255,0.1);\n }\n\n .custom-popup .leaflet-popup-content {\n margin: 0;\n padding: 0;\n }\n\n .popup-header {\n padding: 16px 20px 12px;\n border-bottom: 1px solid rgba(255,255,255,0.08);\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .popup-header .pin-icon {\n color: #e63946;\n font-size: 1.2rem;\n }\n\n .popup-header h3 {\n font-size: 1rem;\n font-weight: 700;\n color: #ffffff;\n margin: 0;\n }\n\n .popup-body {\n padding: 14px 20px 18px;\n }\n\n .popup-body p {\n font-size: 0.85rem;\n color: #a0b0cc;\n line-height: 1.6;\n margin: 0 0 8px 0;\n }\n\n .popup-body .label {\n display: inline-block;\n background: rgba(230, 57, 70, 0.15);\n color: #e63946;\n font-size: 0.7rem;\n font-weight: 600;\n padding: 3px 10px;\n border-radius: 20px;\n margin-bottom: 10px;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n }\n\n \/* Kustomisasi kontrol zoom Leaflet *\/\n .leaflet-control-zoom {\n border: none !important;\n box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;\n border-radius: 12px !important;\n overflow: hidden;\n }\n\n .leaflet-control-zoom a {\n background: rgba(10, 14, 39, 0.9) !important;\n color: #e0e6f0 !important;\n border-bottom: 1px solid rgba(255,255,255,0.1) !important;\n font-size: 18px !important;\n line-height: 34px !important;\n width: 38px !important;\n height: 38px !important;\n }\n\n .leaflet-control-zoom a:hover {\n background: rgba(230, 57, 70, 0.9) !important;\n color: white !important;\n }\n\n \/* Atribusi peta *\/\n .leaflet-control-attribution {\n background: rgba(10, 14, 39, 0.7) !important;\n color: #667799 !important;\n font-size: 10px !important;\n backdrop-filter: blur(5px);\n }\n\n .leaflet-control-attribution a {\n color: #8899bb !important;\n }\n\n \/* Rotasi globe untuk efek 3D *\/\n .globe-container {\n perspective: 1200px;\n }\n\n #map {\n transition: transform 0.1s ease-out;\n transform-style: preserve-3d;\n }\n\n \/* Loading overlay *\/\n .loading-overlay {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 998;\n color: #e63946;\n font-size: 1rem;\n font-weight: 600;\n display: none;\n }\n <\/style>\n<\/head>\n<body>\n\n \n <div id=\"landing-page\">\n <div class=\"landing-content\">\n <span class=\"landing-icon\">🗺️<\/span>\n <h1>Peta Pelatihan Militer Indonesia<\/h1>\n <p class=\"subtitle\">\n Jelajahi lokasi-lokasi pelatihan militer strategis di seluruh Indonesia.<br>\n Visualisasi bumi interaktif dengan informasi lengkap setiap lokasi.\n <\/p>\n <button class=\"btn-mulai\" onclick=\"masukPeta()\">🌏 Lihat Peta<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"map-container\" class=\"globe-container\">\n <div id=\"map\"><\/div>\n <div class=\"loading-overlay\" id=\"loading\">Memuat peta…<\/div>\n <button class=\"btn-back\" onclick=\"kembaliKeAwal()\">\u2190 Kembali<\/button>\n <\/div>\n\n <script>\n \/\/ Data lokasi pelatihan militer Indonesia (terverifikasi dari sumber)\n const lokasiMiliter = [\n {\n nama: \"Puslatpur Baturaja\",\n lat: -4.1167,\n lng: 104.1667,\n provinsi: \"Sumatera Selatan\",\n tipe: \"Pusat Latihan Tempur TNI AD\",\n deskripsi: \"Pusat latihan tempur terbesar milik TNI AD dengan luas sekitar 32.782 hektare, hampir setara luas Kota Surabaya. Lokasi utama latihan gabungan multinasional Super Garuda Shield.\"\n },\n {\n nama: \"Puslatpur Banongan Situbondo\",\n lat: -7.7333,\n lng: 114.0500,\n provinsi: \"Jawa Timur\",\n tipe: \"Pusat Latihan Militer Tiga Matra\",\n deskripsi: \"Diproyeksikan sebagai pusat latihan militer skala internasional pertama di Indonesia. Meliputi latihan TNI AD, AL, dan AU di lahan seluas 306 hektare.\"\n },\n {\n nama: \"Pusdikarmed \/ Pusdikbekang\",\n lat: -6.8667,\n lng: 107.5000,\n provinsi: \"Cimahi, Jawa Barat\",\n tipe: \"Pusat Pendidikan TNI AD\",\n deskripsi: \"Pusat pendidikan kecabangan senjata dan pembekalan TNI AD. Fasilitas pendidikan utama untuk pembentukan prajurit profesional.\"\n },\n {\n nama: \"Pusdiklatpassus Kopassus\",\n lat: -6.9167,\n lng: 107.6167,\n provinsi: \"Bandung, Jawa Barat\",\n tipe: \"Pusat Pendidikan Pasukan Khusus\",\n deskripsi: \"Pusat pendidikan dan latihan Pasukan Khusus (Kopassus). Dilengkapi fasilitas latihan fisik modern dan Wira Yudha Fitness Centre.\"\n },\n {\n nama: \"Lanud Roesmin Nurjadin\",\n lat: 0.4667,\n lng: 101.4500,\n provinsi: \"Pekanbaru, Riau\",\n tipe: \"Pangkalan TNI AU\",\n deskripsi: \"Pangkalan udara TNI AU yang menjadi homebase pesawat tempur Rafale. Dilengkapi simulator dan hanggar smart building.\"\n },\n {\n nama: \"Lanud Raden Sadjad\",\n lat: 3.9500,\n lng: 108.3833,\n provinsi: \"Natuna, Kepulauan Riau\",\n tipe: \"Forward Operating Base (FOB)\",\n deskripsi: \"Pangkalan udara terdepan di utara Indonesia. Dilengkapi radar dan skuadron drone CH-4 untuk pertahanan udara.\"\n },\n {\n nama: \"Lanud Leo Wattimena\",\n lat: 2.0500,\n lng: 128.3000,\n provinsi: \"Morotai, Maluku Utara\",\n tipe: \"Forward Operating Base (FOB)\",\n deskripsi: \"Pangkalan udara strategis di wilayah timur Indonesia. Berperan sebagai titik pertahanan udara di kawasan Pasifik.\"\n },\n {\n nama: \"Lanud Manuhua\",\n lat: -1.1833,\n lng: 136.0833,\n provinsi: \"Biak, Papua\",\n tipe: \"Forward Operating Base (FOB)\",\n deskripsi: \"Pangkalan udara terdepan di Papua. Memiliki Skuadron Udara 27 dengan pesawat angkut CN-235 untuk logistik dan pertahanan.\"\n }\n ];\n\n let map;\n let markers = [];\n let globeInterval;\n\n \/\/ Inisialisasi peta\n function initMap() {\n \/\/ Buat peta dengan tile layer satelit untuk tampilan bumi yang nyata\n map = L.map('map', {\n center: [-2.5, 118.0],\n zoom: 5,\n zoomControl: true,\n attributionControl: true,\n worldCopyJump: true,\n maxBounds: [[-15, 90], [10, 150]],\n maxBoundsViscosity: 0.8\n });\n\n \/\/ Tile layer satelit (Esri World Imagery) - tampilan bumi asli\n L.tileLayer('https:\/\/server.arcgisonline.com\/ArcGIS\/rest\/services\/World_Imagery\/MapServer\/tile\/{z}\/{y}\/{x}', {\n attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',\n maxZoom: 18,\n minZoom: 3\n }).addTo(map);\n\n \/\/ Tambahkan layer batas negara (opsional, untuk estetika)\n fetch('https:\/\/raw.githubusercontent.com\/johan\/world.geo.json\/master\/countries\/IDN.geo.json')\n .then(response => response.json())\n .then(data => {\n L.geoJSON(data, {\n style: {\n color: '#e63946',\n weight: 2,\n opacity: 0.6,\n fillOpacity: 0.05\n }\n }).addTo(map);\n })\n .catch(() => {});\n\n \/\/ Tambahkan marker untuk setiap lokasi\n lokasiMiliter.forEach((lokasi, index) => {\n const marker = L.marker([lokasi.lat, lokasi.lng], {\n icon: L.divIcon({\n className: 'custom-pin',\n html: `<div style=\"\n width: 28px;\n height: 28px;\n background: #e63946;\n border: 3px solid white;\n border-radius: 50% 50% 50% 0;\n transform: rotate(-45deg);\n box-shadow: 0 4px 12px rgba(230,57,70,0.5);\n position: relative;\n \"><\/div>`,\n iconSize: [28, 28],\n iconAnchor: [14, 28],\n popupAnchor: [0, -30]\n })\n });\n\n \/\/ Konten popup detail\n const popupContent = `\n <div class=\"popup-header\">\n <span class=\"pin-icon\">📍<\/span>\n <h3>${lokasi.nama}<\/h3>\n <\/div>\n <div class=\"popup-body\">\n <span class=\"label\">${lokasi.tipe}<\/span>\n <p><strong style=\"color:#e0e6f0;\">Provinsi:<\/strong> ${lokasi.provinsi}<\/p>\n <p>${lokasi.deskripsi}<\/p>\n <\/div>\n `;\n\n marker.bindPopup(popupContent, {\n className: 'custom-popup',\n maxWidth: 300,\n closeButton: true,\n autoPanPadding: [50, 50]\n });\n\n marker.addTo(map);\n markers.push(marker);\n });\n\n \/\/ Animasi rotasi halus (efek globe bergerak)\n startGlobeRotation();\n }\n\n \/\/ Efek rotasi globe halus\n function startGlobeRotation() {\n const mapEl = document.getElementById('map');\n let angle = 0;\n\n globeInterval = setInterval(() => {\n \/\/ Rotasi sangat halus pada sumbu Y\n angle += 0.05;\n if (angle > 2) angle = 0;\n \/\/ Efek sangat halus untuk kesan globe 3D\n mapEl.style.transform = `rotateY(${Math.sin(angle) * 0.15}deg)`;\n }, 50);\n }\n\n function stopGlobeRotation() {\n if (globeInterval) {\n clearInterval(globeInterval);\n document.getElementById('map').style.transform = 'rotateY(0deg)';\n }\n }\n\n \/\/ Transisi dari landing page ke peta\n function masukPeta() {\n const landing = document.getElementById('landing-page');\n landing.classList.add('hidden');\n\n \/\/ Tampilkan loading sementara\n document.getElementById('loading').style.display = 'block';\n\n \/\/ Inisialisasi peta setelah sedikit delay untuk transisi\n setTimeout(() => {\n if (!map) {\n initMap();\n }\n document.getElementById('loading').style.display = 'none';\n }, 600);\n }\n\n \/\/ Kembali ke landing page\n function kembaliKeAwal() {\n stopGlobeRotation();\n const landing = document.getElementById('landing-page');\n landing.classList.remove('hidden');\n\n \/\/ Hapus peta setelah transisi\n setTimeout(() => {\n if (map) {\n map.remove();\n map = null;\n markers = [];\n }\n }, 800);\n }\n\n \/\/ Inisialisasi peta saat halaman dimuat (pre-load)\n window.addEventListener('load', () => {\n \/\/ Pre-inisialisasi peta di background untuk loading lebih cepat\n \/\/ tapi tetap tersembunyi di belakang landing page\n });\n\n \/\/ Handle resize\n window.addEventListener('resize', () => {\n if (map) {\n map.invalidateSize();\n }\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Peta Pelatihan Militer Indonesia 🗺️ Peta Pelatihan Militer Indonesia Jelajahi lokasi-lokasi pelatihan militer strategis di seluruh Indonesia. Visualisasi bumi interaktif dengan informasi lengkap setiap lokasi. 🌏 Lihat Peta Memuat peta… \u2190 Kembali<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.olahyudha.id\/index.php?rest_route=\/wp\/v2\/posts\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.olahyudha.id\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.olahyudha.id\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.olahyudha.id\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.olahyudha.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":3,"href":"https:\/\/www.olahyudha.id\/index.php?rest_route=\/wp\/v2\/posts\/10\/revisions"}],"predecessor-version":[{"id":13,"href":"https:\/\/www.olahyudha.id\/index.php?rest_route=\/wp\/v2\/posts\/10\/revisions\/13"}],"wp:attachment":[{"href":"https:\/\/www.olahyudha.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.olahyudha.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=10"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.olahyudha.id\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":10,"date":"2026-10-06T16:00:35","date_gmt":"2026-10-06T16:00:35","guid":{"rendered":"http:\/\/www.olahyudha.id\/?p=10"},"modified":"2026-10-06T16:01:11","modified_gmt":"2026-10-06T16:01:11","slug":"10","status":"publish","type":"post","link":"https:\/\/www.olahyudha.id\/?p=10","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n \n Peta Pelatihan Militer Indonesia<\/title>\n\n \n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" \/>\n \n <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Inter', sans-serif;\n overflow: hidden;\n background-color: #0a0e27;\n }\n\n \/* ===== HALAMAN PEMBUKA ===== *\/\n #landing-page {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 40%, #2d1b3d 100%);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n transition: opacity 0.8s ease, visibility 0.8s ease;\n }\n\n #landing-page.hidden {\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n }\n\n .landing-content {\n text-align: center;\n padding: 40px;\n max-width: 600px;\n }\n\n .landing-icon {\n font-size: 80px;\n margin-bottom: 24px;\n display: block;\n }\n\n .landing-content h1 {\n font-size: 2.2rem;\n font-weight: 700;\n color: #ffffff;\n margin-bottom: 12px;\n letter-spacing: 1px;\n }\n\n .landing-content .subtitle {\n font-size: 1rem;\n color: #8899bb;\n margin-bottom: 40px;\n line-height: 1.6;\n }\n\n .btn-mulai {\n background: linear-gradient(135deg, #e63946, #c1121f);\n color: white;\n border: none;\n padding: 18px 48px;\n font-size: 1.15rem;\n font-weight: 600;\n border-radius: 50px;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 8px 32px rgba(230, 57, 70, 0.35);\n font-family: 'Inter', sans-serif;\n letter-spacing: 0.5px;\n }\n\n .btn-mulai:hover {\n transform: translateY(-3px);\n box-shadow: 0 12px 40px rgba(230, 57, 70, 0.5);\n }\n\n .btn-mulai:active {\n transform: translateY(-1px);\n }\n\n \/* ===== HALAMAN PETA ===== *\/\n #map-container {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: 1;\n }\n\n #map {\n width: 100%;\n height: 100%;\n background: #0a0e27;\n }\n\n \/* Tombol Kembali *\/\n .btn-back {\n position: absolute;\n top: 20px;\n left: 20px;\n z-index: 999;\n background: rgba(10, 14, 39, 0.85);\n color: white;\n border: 1px solid rgba(255,255,255,0.15);\n padding: 12px 24px;\n border-radius: 12px;\n cursor: pointer;\n font-family: 'Inter', sans-serif;\n font-size: 0.9rem;\n font-weight: 600;\n backdrop-filter: blur(10px);\n transition: all 0.3s ease;\n }\n\n .btn-back:hover {\n background: rgba(230, 57, 70, 0.9);\n border-color: #e63946;\n }\n\n \/* Kustomisasi popup *\/\n .custom-popup .leaflet-popup-content-wrapper {\n background: #0f1535;\n color: #e0e6f0;\n border-radius: 14px;\n border: 1px solid rgba(255,255,255,0.1);\n box-shadow: 0 10px 40px rgba(0,0,0,0.5);\n font-family: 'Inter', sans-serif;\n }\n\n .custom-popup .leaflet-popup-tip {\n background: #0f1535;\n border: 1px solid rgba(255,255,255,0.1);\n }\n\n .custom-popup .leaflet-popup-content {\n margin: 0;\n padding: 0;\n }\n\n .popup-header {\n padding: 16px 20px 12px;\n border-bottom: 1px solid rgba(255,255,255,0.08);\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .popup-header .pin-icon {\n color: #e63946;\n font-size: 1.2rem;\n }\n\n .popup-header h3 {\n font-size: 1rem;\n font-weight: 700;\n color: #ffffff;\n margin: 0;\n }\n\n .popup-body {\n padding: 14px 20px 18px;\n }\n\n .popup-body p {\n font-size: 0.85rem;\n color: #a0b0cc;\n line-height: 1.6;\n margin: 0 0 8px 0;\n }\n\n .popup-body .label {\n display: inline-block;\n background: rgba(230, 57, 70, 0.15);\n color: #e63946;\n font-size: 0.7rem;\n font-weight: 600;\n padding: 3px 10px;\n border-radius: 20px;\n margin-bottom: 10px;\n letter-spacing: 0.5px;\n text-transform: uppercase;\n }\n\n \/* Kustomisasi kontrol zoom Leaflet *\/\n .leaflet-control-zoom {\n border: none !important;\n box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;\n border-radius: 12px !important;\n overflow: hidden;\n }\n\n .leaflet-control-zoom a {\n background: rgba(10, 14, 39, 0.9) !important;\n color: #e0e6f0 !important;\n border-bottom: 1px solid rgba(255,255,255,0.1) !important;\n font-size: 18px !important;\n line-height: 34px !important;\n width: 38px !important;\n height: 38px !important;\n }\n\n .leaflet-control-zoom a:hover {\n background: rgba(230, 57, 70, 0.9) !important;\n color: white !important;\n }\n\n \/* Atribusi peta *\/\n .leaflet-control-attribution {\n background: rgba(10, 14, 39, 0.7) !important;\n color: #667799 !important;\n font-size: 10px !important;\n backdrop-filter: blur(5px);\n }\n\n .leaflet-control-attribution a {\n color: #8899bb !important;\n }\n\n \/* Rotasi globe untuk efek 3D *\/\n .globe-container {\n perspective: 1200px;\n }\n\n #map {\n transition: transform 0.1s ease-out;\n transform-style: preserve-3d;\n }\n\n \/* Loading overlay *\/\n .loading-overlay {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 998;\n color: #e63946;\n font-size: 1rem;\n font-weight: 600;\n display: none;\n }\n <\/style>\n<\/head>\n<body>\n\n \n <div id=\"landing-page\">\n <div class=\"landing-content\">\n <span class=\"landing-icon\">🗺️<\/span>\n <h1>Peta Pelatihan Militer Indonesia<\/h1>\n <p class=\"subtitle\">\n Jelajahi lokasi-lokasi pelatihan militer strategis di seluruh Indonesia.<br>\n Visualisasi bumi interaktif dengan informasi lengkap setiap lokasi.\n <\/p>\n <button class=\"btn-mulai\" onclick=\"masukPeta()\">🌏 Lihat Peta<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"map-container\" class=\"globe-container\">\n <div id=\"map\"><\/div>\n <div class=\"loading-overlay\" id=\"loading\">Memuat peta…<\/div>\n <button class=\"btn-back\" onclick=\"kembaliKeAwal()\">\u2190 Kembali<\/button>\n <\/div>\n\n <script>\n \/\/ Data lokasi pelatihan militer Indonesia (terverifikasi dari sumber)\n const lokasiMiliter = [\n {\n nama: \"Puslatpur Baturaja\",\n lat: -4.1167,\n lng: 104.1667,\n provinsi: \"Sumatera Selatan\",\n tipe: \"Pusat Latihan Tempur TNI AD\",\n deskripsi: \"Pusat latihan tempur terbesar milik TNI AD dengan luas sekitar 32.782 hektare, hampir setara luas Kota Surabaya. Lokasi utama latihan gabungan multinasional Super Garuda Shield.\"\n },\n {\n nama: \"Puslatpur Banongan Situbondo\",\n lat: -7.7333,\n lng: 114.0500,\n provinsi: \"Jawa Timur\",\n tipe: \"Pusat Latihan Militer Tiga Matra\",\n deskripsi: \"Diproyeksikan sebagai pusat latihan militer skala internasional pertama di Indonesia. Meliputi latihan TNI AD, AL, dan AU di lahan seluas 306 hektare.\"\n },\n {\n nama: \"Pusdikarmed \/ Pusdikbekang\",\n lat: -6.8667,\n lng: 107.5000,\n provinsi: \"Cimahi, Jawa Barat\",\n tipe: \"Pusat Pendidikan TNI AD\",\n deskripsi: \"Pusat pendidikan kecabangan senjata dan pembekalan TNI AD. Fasilitas pendidikan utama untuk pembentukan prajurit profesional.\"\n },\n {\n nama: \"Pusdiklatpassus Kopassus\",\n lat: -6.9167,\n lng: 107.6167,\n provinsi: \"Bandung, Jawa Barat\",\n tipe: \"Pusat Pendidikan Pasukan Khusus\",\n deskripsi: \"Pusat pendidikan dan latihan Pasukan Khusus (Kopassus). Dilengkapi fasilitas latihan fisik modern dan Wira Yudha Fitness Centre.\"\n },\n {\n nama: \"Lanud Roesmin Nurjadin\",\n lat: 0.4667,\n lng: 101.4500,\n provinsi: \"Pekanbaru, Riau\",\n tipe: \"Pangkalan TNI AU\",\n deskripsi: \"Pangkalan udara TNI AU yang menjadi homebase pesawat tempur Rafale. Dilengkapi simulator dan hanggar smart building.\"\n },\n {\n nama: \"Lanud Raden Sadjad\",\n lat: 3.9500,\n lng: 108.3833,\n provinsi: \"Natuna, Kepulauan Riau\",\n tipe: \"Forward Operating Base (FOB)\",\n deskripsi: \"Pangkalan udara terdepan di utara Indonesia. Dilengkapi radar dan skuadron drone CH-4 untuk pertahanan udara.\"\n },\n {\n nama: \"Lanud Leo Wattimena\",\n lat: 2.0500,\n lng: 128.3000,\n provinsi: \"Morotai, Maluku Utara\",\n tipe: \"Forward Operating Base (FOB)\",\n deskripsi: \"Pangkalan udara strategis di wilayah timur Indonesia. Berperan sebagai titik pertahanan udara di kawasan Pasifik.\"\n },\n {\n nama: \"Lanud Manuhua\",\n lat: -1.1833,\n lng: 136.0833,\n provinsi: \"Biak, Papua\",\n tipe: \"Forward Operating Base (FOB)\",\n deskripsi: \"Pangkalan udara terdepan di Papua. Memiliki Skuadron Udara 27 dengan pesawat angkut CN-235 untuk logistik dan pertahanan.\"\n }\n ];\n\n let map;\n let markers = [];\n let globeInterval;\n\n \/\/ Inisialisasi peta\n function initMap() {\n \/\/ Buat peta dengan tile layer satelit untuk tampilan bumi yang nyata\n map = L.map('map', {\n center: [-2.5, 118.0],\n zoom: 5,\n zoomControl: true,\n attributionControl: true,\n worldCopyJump: true,\n maxBounds: [[-15, 90], [10, 150]],\n maxBoundsViscosity: 0.8\n });\n\n \/\/ Tile layer satelit (Esri World Imagery) - tampilan bumi asli\n L.tileLayer('https:\/\/server.arcgisonline.com\/ArcGIS\/rest\/services\/World_Imagery\/MapServer\/tile\/{z}\/{y}\/{x}', {\n attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',\n maxZoom: 18,\n minZoom: 3\n }).addTo(map);\n\n \/\/ Tambahkan layer batas negara (opsional, untuk estetika)\n fetch('https:\/\/raw.githubusercontent.com\/johan\/world.geo.json\/master\/countries\/IDN.geo.json')\n .then(response => response.json())\n .then(data => {\n L.geoJSON(data, {\n style: {\n color: '#e63946',\n weight: 2,\n opacity: 0.6,\n fillOpacity: 0.05\n }\n }).addTo(map);\n })\n .catch(() => {});\n\n \/\/ Tambahkan marker untuk setiap lokasi\n lokasiMiliter.forEach((lokasi, index) => {\n const marker = L.marker([lokasi.lat, lokasi.lng], {\n icon: L.divIcon({\n className: 'custom-pin',\n html: `<div style=\"\n width: 28px;\n height: 28px;\n background: #e63946;\n border: 3px solid white;\n border-radius: 50% 50% 50% 0;\n transform: rotate(-45deg);\n box-shadow: 0 4px 12px rgba(230,57,70,0.5);\n position: relative;\n \"><\/div>`,\n iconSize: [28, 28],\n iconAnchor: [14, 28],\n popupAnchor: [0, -30]\n })\n });\n\n \/\/ Konten popup detail\n const popupContent = `\n <div class=\"popup-header\">\n <span class=\"pin-icon\">📍<\/span>\n <h3>${lokasi.nama}<\/h3>\n <\/div>\n <div class=\"popup-body\">\n <span class=\"label\">${lokasi.tipe}<\/span>\n <p><strong style=\"color:#e0e6f0;\">Provinsi:<\/strong> ${lokasi.provinsi}<\/p>\n <p>${lokasi.deskripsi}<\/p>\n <\/div>\n `;\n\n marker.bindPopup(popupContent, {\n className: 'custom-popup',\n maxWidth: 300,\n closeButton: true,\n autoPanPadding: [50, 50]\n });\n\n marker.addTo(map);\n markers.push(marker);\n });\n\n \/\/ Animasi rotasi halus (efek globe bergerak)\n startGlobeRotation();\n }\n\n \/\/ Efek rotasi globe halus\n function startGlobeRotation() {\n const mapEl = document.getElementById('map');\n let angle = 0;\n\n globeInterval = setInterval(() => {\n \/\/ Rotasi sangat halus pada sumbu Y\n angle += 0.05;\n if (angle > 2) angle = 0;\n \/\/ Efek sangat halus untuk kesan globe 3D\n mapEl.style.transform = `rotateY(${Math.sin(angle) * 0.15}deg)`;\n }, 50);\n }\n\n function stopGlobeRotation() {\n if (globeInterval) {\n clearInterval(globeInterval);\n document.getElementById('map').style.transform = 'rotateY(0deg)';\n }\n }\n\n \/\/ Transisi dari landing page ke peta\n function masukPeta() {\n const landing = document.getElementById('landing-page');\n landing.classList.add('hidden');\n\n \/\/ Tampilkan loading sementara\n document.getElementById('loading').style.display = 'block';\n\n \/\/ Inisialisasi peta setelah sedikit delay untuk transisi\n setTimeout(() => {\n if (!map) {\n initMap();\n }\n document.getElementById('loading').style.display = 'none';\n }, 600);\n }\n\n \/\/ Kembali ke landing page\n function kembaliKeAwal() {\n stopGlobeRotation();\n const landing = document.getElementById('landing-page');\n landing.classList.remove('hidden');\n\n \/\/ Hapus peta setelah transisi\n setTimeout(() => {\n if (map) {\n map.remove();\n map = null;\n markers = [];\n }\n }, 800);\n }\n\n \/\/ Inisialisasi peta saat halaman dimuat (pre-load)\n window.addEventListener('load', () => {\n \/\/ Pre-inisialisasi peta di background untuk loading lebih cepat\n \/\/ tapi tetap tersembunyi di belakang landing page\n });\n\n \/\/ Handle resize\n window.addEventListener('resize', () => {\n if (map) {\n map.invalidateSize();\n }\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Peta Pelatihan Militer Indonesia 🗺️ Peta Pelatihan Militer Indonesia Jelajahi lokasi-lokasi pelatihan militer strategis di seluruh Indonesia. Visualisasi bumi interaktif dengan informasi lengkap setiap lokasi. 🌏 Lihat Peta Memuat peta… \u2190 Kembali<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.olahyudha.id\/index.php?rest_route=\/wp\/v2\/posts\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.olahyudha.id\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.olahyudha.id\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.olahyudha.id\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.olahyudha.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":3,"href":"https:\/\/www.olahyudha.id\/index.php?rest_route=\/wp\/v2\/posts\/10\/revisions"}],"predecessor-version":[{"id":13,"href":"https:\/\/www.olahyudha.id\/index.php?rest_route=\/wp\/v2\/posts\/10\/revisions\/13"}],"wp:attachment":[{"href":"https:\/\/www.olahyudha.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.olahyudha.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=10"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.olahyudha.id\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}