{"id":658,"date":"2025-12-03T20:51:20","date_gmt":"2025-12-03T20:51:20","guid":{"rendered":"https:\/\/ceaelsol.com.co\/?page_id=658"},"modified":"2025-12-03T22:19:02","modified_gmt":"2025-12-03T22:19:02","slug":"seguimiento","status":"publish","type":"page","link":"https:\/\/ceaelsol.com.co\/index.php\/seguimiento\/","title":{"rendered":"Seguimiento"},"content":{"rendered":"\n<!-- ===================== MAPA CON MARCO VERDE \u2014 C\u00d3DIGO FUNCIONAL ===================== -->\n\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\"\/>\n\n<style>\n  .wp-block, .entry-content {\n    margin: 0 !important;\n    padding: 0 !important;\n  }\n\n  \/* ======= CONTENEDOR PRINCIPAL (MARCO VERDE) ======= *\/\n  #map-container {\n    width: 100%;\n    height: calc(100vh - 170px);\n    margin-top: 20px;\n    border: 6px solid #1faa00;\n    border-radius: 12px;\n    background: #dfffe0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  \/* ======= MAPA ======= *\/\n  #map {\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n  }\n\n  \/* ======= BOT\u00d3N HAMBURGUESA ======= *\/\n  .hamburger {\n    position: absolute;\n    top: 15px;\n    right: 15px;\n    z-index: 9999;\n    width: 45px;\n    height: 45px;\n    border-radius: 10px;\n    background: rgba(255,255,255,0.95);\n    box-shadow: 0 6px 18px rgba(0,0,0,0.15);\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    cursor:pointer;\n  }\n  .hamburger .bar { width:22px; height:2px; background:#222; position:relative; }\n  .hamburger .bar::before,\n  .hamburger .bar::after {\n    content:\"\"; position:absolute; left:0; right:0; height:2px; background:#222;\n  }\n  .hamburger .bar::before { top:-7px; }\n  .hamburger .bar::after  { top: 7px; }\n\n  \/* ======= PANEL DEL MEN\u00da ======= *\/\n  .menu-panel {\n    position: absolute;\n    top: 70px;\n    right: 15px;\n    z-index: 9999;\n    width: 300px;\n    background: rgba(255,255,255,0.98);\n    border-radius: 12px;\n    box-shadow: 0 10px 30px rgba(0,0,0,0.2);\n    padding:16px;\n    opacity:1;\n    transition: all .25s ease;\n  }\n  .menu-panel.hidden {\n    opacity:0;\n    transform: translateY(-10px);\n    pointer-events:none;\n  }\n\n  .controls {\n    display:flex;\n    gap:8px;\n    margin-bottom:10px;\n  }\n\n  .btn-on {\n    background:#097a57;\n    color:white;\n  }\n\n  .btn-off {\n    background:#ffeb3b;\n    color:#000;\n  }\n\n  .vehicle-item {\n    display:flex;\n    align-items:center;\n    gap:8px;\n    padding:6px 4px;\n  }\n\n  .emoji { font-size: 22px; width: 26px; }\n\n  \/* ======= SCROLL SOLO A LA LISTA DE VEH\u00cdCULOS ======= *\/\n  #vehicleList {\n    max-height: 260px;       \/* \u2190 altura m\u00e1x. para mostrar scroll *\/\n    overflow-y: auto;        \/* \u2190 scroll vertical *\/\n    padding-right: 6px;\n  }\n\n  \/* Scroll bonito *\/\n  #vehicleList::-webkit-scrollbar {\n    width: 8px;\n  }\n  #vehicleList::-webkit-scrollbar-thumb {\n    background: #888;\n    border-radius: 4px;\n  }\n<\/style>\n\n\n<!-- ======= CONTENEDOR DEL MAPA ======= -->\n<div id=\"map-container\">\n\n  <!-- Mapa -->\n  <div id=\"map\"><\/div>\n\n  <!-- Bot\u00f3n hamburguesa -->\n  <div class=\"hamburger\" id=\"hamburger\">\n    <div class=\"bar\"><\/div>\n  <\/div>\n\n  <!-- Panel -->\n  <div class=\"menu-panel hidden\" id=\"menuPanel\">\n    <h3>Veh\u00edculos<\/h3>\n\n    <div class=\"controls\">\n      <button id=\"activateAll\" class=\"btn-on\">Activar<\/button>\n      <button id=\"deactivateAll\" class=\"btn-off\">Desactivar<\/button>\n    <\/div>\n\n    <div id=\"vehicleList\"><\/div>\n  <\/div>\n\n<\/div>\n\n\n<script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n  \/* ===================== COORDENADAS BASE ===================== *\/\n  const centerLat = 5.715030;\n  const centerLng = -72.928980;\n\n  \/* ===================== VEH\u00cdCULOS ===================== *\/\n  const types = [\"\ud83d\ude9b\", \"\ud83d\ude97\", \"\ud83c\udfcd\ufe0f\"];\n  const vehicles = [];\n\n  for (let i = 1; i <= 20; i++) {\n    vehicles.push({\n      id: \"v\" + i,\n      emoji: types[(i - 1) % 3],\n      name: `Veh\u00edculo ${i}`,\n      lat: centerLat + (Math.random() - 0.5) * 0.001,\n      lng: centerLng + (Math.random() - 0.5) * 0.001\n    });\n  }\n\n  \/* ===================== MAPA ===================== *\/\n  const map = L.map('map', { zoomControl: true }).setView([centerLat, centerLng], 15);\n\n  L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n    maxZoom:19\n  }).addTo(map);\n\n  \/* ===================== ICONOS PERSONALIZADOS ===================== *\/\n  const markers = {};\n\n  vehicles.forEach(v => {\n    const customIcon = L.divIcon({\n      html: `<div style=\"font-size:30px;\">${v.emoji}<\/div>`,\n      className: \"\",\n      iconSize: [30, 30],\n      iconAnchor: [15, 15]\n    });\n\n    const m = L.marker([v.lat, v.lng], { icon: customIcon }).addTo(map);\n    m.bindPopup(`<strong>${v.emoji} ${v.name}<\/strong>`);\n    markers[v.id] = m;\n  });\n\n  \/* ===================== LISTA DE VEH\u00cdCULOS ===================== *\/\n  const list = document.getElementById(\"vehicleList\");\n\n  vehicles.forEach(v => {\n    const item = document.createElement(\"div\");\n    item.className = \"vehicle-item\";\n\n    item.innerHTML = `\n      <input type=\"checkbox\" id=\"chk-${v.id}\" data-id=\"${v.id}\" checked>\n      <span class=\"emoji\">${v.emoji}<\/span> ${v.name}\n    `;\n\n    list.appendChild(item);\n\n    item.querySelector(\"input\").addEventListener(\"change\", e => {\n      const id = e.target.dataset.id;\n      if (e.target.checked) markers[id].addTo(map);\n      else map.removeLayer(markers[id]);\n    });\n  });\n\n  \/* ===================== BOTONES ===================== *\/\n  document.getElementById(\"activateAll\").onclick = () => {\n    vehicles.forEach(v => {\n      document.getElementById(\"chk-\" + v.id).checked = true;\n      markers[v.id].addTo(map);\n    });\n  };\n\n  document.getElementById(\"deactivateAll\").onclick = () => {\n    vehicles.forEach(v => {\n      document.getElementById(\"chk-\" + v.id).checked = false;\n      map.removeLayer(markers[v.id]);\n    });\n  };\n\n  \/* ===================== HAMBURGUESA ===================== *\/\n  document.getElementById(\"hamburger\").onclick = () => {\n    document.getElementById(\"menuPanel\").classList.toggle(\"hidden\");\n  };\n\n}); \/* FIN DOMContentLoaded *\/\n<\/script>\n\n<!-- ===================== FIN DEL C\u00d3DIGO ===================== -->\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Veh\u00edculos Activar Desactivar<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-pagebuilder.php","meta":{"footnotes":""},"class_list":["post-658","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ceaelsol.com.co\/index.php\/wp-json\/wp\/v2\/pages\/658"}],"collection":[{"href":"https:\/\/ceaelsol.com.co\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ceaelsol.com.co\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ceaelsol.com.co\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ceaelsol.com.co\/index.php\/wp-json\/wp\/v2\/comments?post=658"}],"version-history":[{"count":21,"href":"https:\/\/ceaelsol.com.co\/index.php\/wp-json\/wp\/v2\/pages\/658\/revisions"}],"predecessor-version":[{"id":683,"href":"https:\/\/ceaelsol.com.co\/index.php\/wp-json\/wp\/v2\/pages\/658\/revisions\/683"}],"wp:attachment":[{"href":"https:\/\/ceaelsol.com.co\/index.php\/wp-json\/wp\/v2\/media?parent=658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}