{"id":1955,"date":"2023-07-26T12:27:55","date_gmt":"2023-07-26T17:27:55","guid":{"rendered":"https:\/\/proyectosysolucionesti.com\/?page_id=1955"},"modified":"2025-03-13T13:34:35","modified_gmt":"2025-03-13T18:34:35","slug":"agendamiento","status":"publish","type":"page","link":"https:\/\/proyectosysolucionesti.com\/index.php\/agendamiento\/","title":{"rendered":"Agendamiento"},"content":{"rendered":"\n\n\n\n<p class=\"wp-block-paragraph\"><div class=\"vc_row wpb_row vc_row-fluid bg-image-ps-inherit\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><\/div><\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n<div id=\"mapa-colombia\" style=\"width: 100%; height: 600px;\"><\/div>\r\n\r\n<!-- Incluir Leaflet.js -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" \/>\r\n<script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    var map = L.map('mapa-colombia').setView([4.5709, -74.2973], 6); \/\/ Centrar en Colombia con zoom 6\r\n\r\n    \/\/ Agregar mapa base\r\n    L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\r\n        attribution: '&copy; OpenStreetMap contributors'\r\n    }).addTo(map);\r\n\r\n    \/\/ Definir \u00edcono de ubicaci\u00f3n (Pin)\r\n    var pinIcon = L.icon({\r\n        iconUrl: 'https:\/\/cdn-icons-png.flaticon.com\/512\/535\/535239.png', \/\/ Icono de geolocalizaci\u00f3n\r\n        iconSize: [30, 30], \/\/ Tama\u00f1o del \u00edcono\r\n        iconAnchor: [15, 30], \/\/ Punto de anclaje\r\n        popupAnchor: [0, -30] \/\/ Desplazamiento del popup\r\n    });\r\n\r\n    \/\/ Lista de ciudades principales con coordenadas\r\n    var ciudades = [\r\n        { nombre: \"Bogot\u00e1\", coord: [4.60971, -74.08175], info: \"Capital de Colombia, centro financiero y cultural.\" },\r\n        { nombre: \"Medell\u00edn\", coord: [6.2442, -75.5812], info: \"Ciudad de la eterna primavera e innovaci\u00f3n.\" },\r\n        { nombre: \"Cali\", coord: [3.4516, -76.5320], info: \"Capital de la salsa y epicentro deportivo.\" },\r\n        { nombre: \"Barranquilla\", coord: [10.9639, -74.7964], info: \"Puerta de Oro de Colombia y sede del Carnaval.\" },\r\n        { nombre: \"Cartagena\", coord: [10.3910, -75.4794], info: \"Ciudad hist\u00f3rica y tur\u00edstica, patrimonio de la humanidad.\" },\r\n        { nombre: \"Bucaramanga\", coord: [7.1254, -73.1198], info: \"La Ciudad Bonita, con alto desarrollo en educaci\u00f3n y econom\u00eda.\" },\r\n        { nombre: \"Pereira\", coord: [4.8087, -75.6906], info: \"Eje cafetero y ciudad de progreso e innovaci\u00f3n.\" }\r\n    ];\r\n\r\n    \/\/ Agregar ciudades al mapa con interactividad y pins\r\n    var markers = [];\r\n    ciudades.forEach(ciudad => {\r\n        var marker = L.marker(ciudad.coord, { icon: pinIcon }).addTo(map);\r\n        marker.bindPopup(`<b>${ciudad.nombre}<\/b><br>${ciudad.info}`);\r\n        \r\n        marker.on(\"mouseover\", function() { this.openPopup(); });\r\n        marker.on(\"mouseout\", function() { this.closePopup(); });\r\n\r\n        markers.push(marker);\r\n    });\r\n\r\n    \/\/ Colores vibrantes de fibra \u00f3ptica\r\n    var colores = ['#00ffff', '#ff00ff', '#ff4500', '#00ff00', '#ffcc00']; \/\/ Azul ne\u00f3n, morado, naranja, verde, amarillo\r\n\r\n    \/\/ Crear l\u00edneas animadas entre ciudades\r\n    function crearLineaAnimada(start, end, color, delay) {\r\n        var polyline = L.polyline([start, end], {\r\n            color: color,\r\n            weight: 4,\r\n            opacity: 0.8,\r\n            dashArray: '10, 20', \/\/ Patr\u00f3n punteado para simular movimiento\r\n            dashOffset: '0'\r\n        }).addTo(map);\r\n\r\n        \/\/ Animaci\u00f3n m\u00e1s r\u00e1pida y fluida\r\n        var offset = 0;\r\n        setInterval(function() {\r\n            offset = (offset + 3) % 30; \/\/ Aumenta la velocidad de movimiento\r\n            polyline.setStyle({ dashOffset: offset.toString() });\r\n        }, 50 + delay); \/\/ Disminuye el intervalo para hacer el efecto m\u00e1s r\u00e1pido\r\n    }\r\n\r\n    \/\/ Crear conexiones animadas\r\n    for (var i = 0; i < markers.length - 1; i++) {\r\n        var start = markers[i].getLatLng();\r\n        var end = markers[i + 1].getLatLng();\r\n        var color = colores[i % colores.length];\r\n        crearLineaAnimada(start, end, color, i * 100); \/\/ Diferente delay para cada l\u00ednea\r\n    }\r\n});\r\n<\/script>\r\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1955","page","type-page","status-publish","hentry"],"ams_acf":[],"jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/proyectosysolucionesti.com\/index.php\/wp-json\/wp\/v2\/pages\/1955","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/proyectosysolucionesti.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/proyectosysolucionesti.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/proyectosysolucionesti.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/proyectosysolucionesti.com\/index.php\/wp-json\/wp\/v2\/comments?post=1955"}],"version-history":[{"count":17,"href":"https:\/\/proyectosysolucionesti.com\/index.php\/wp-json\/wp\/v2\/pages\/1955\/revisions"}],"predecessor-version":[{"id":2054,"href":"https:\/\/proyectosysolucionesti.com\/index.php\/wp-json\/wp\/v2\/pages\/1955\/revisions\/2054"}],"wp:attachment":[{"href":"https:\/\/proyectosysolucionesti.com\/index.php\/wp-json\/wp\/v2\/media?parent=1955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}