{"id":2546,"date":"2025-10-15T15:53:17","date_gmt":"2025-10-15T15:53:17","guid":{"rendered":"https:\/\/narino.gov.co\/lamejortaza\/?page_id=2546"},"modified":"2025-10-15T17:46:21","modified_gmt":"2025-10-15T17:46:21","slug":"mapa-cafe","status":"publish","type":"page","link":"https:\/\/narino.gov.co\/lamejortaza\/mapa-cafe\/","title":{"rendered":"Mapa Caf\u00e9"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Mapa Agr\u00edcola de Nari\u00f1o<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \r\n .main-container {\r\n max-width: 100vw;\r\n margin: 0 auto;\r\n \r\n min-height: 100vh;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .header {\r\n\r\n padding: 1.5rem;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 4px 20px rgba(143, 24, 36, 0.3);\r\n animation: slideDown 0.6s ease-out;\r\n }\r\n\r\n @keyframes slideDown {\r\n from {\r\n transform: translateY(-100%);\r\n opacity: 0;\r\n }\r\n to {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .header::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 200%;\r\n height: 100%;\r\n animation: shimmer 3s infinite;\r\n }\r\n\r\n @keyframes shimmer {\r\n 0% { left: -100%; }\r\n 100% { left: 100%; }\r\n }\r\n\r\n .header h1 {\r\n font-size: clamp(1.5rem, 3vw, 2.5rem);\r\n margin-bottom: 0.5rem;\r\n color: #fff;\r\n text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);\r\n position: relative;\r\n z-index: 2;\r\n font-weight: 800;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .header .subtitle {\r\n font-size: clamp(0.9rem, 1.5vw, 1.1rem);\r\n color: #f0e8d9;\r\n position: relative;\r\n z-index: 2;\r\n font-weight: 300;\r\n }\r\n\r\n .dashboard-stats {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\r\n gap: 1rem;\r\n padding: 1rem;\r\n box-shadow: 0 2px 10px rgba(143, 24, 36, 0.1);\r\n animation: fadeIn 0.8s ease-out 0.2s both;\r\n }\r\n\r\n @keyframes fadeIn {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .stat-card {\r\n background: linear-gradient(135deg, #f0e8d9 0%, #fdf6ed 100%);\r\n border: 2px solid #8f1824;\r\n border-radius: 12px;\r\n padding: 1rem;\r\n text-align: center;\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n cursor: pointer;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .stat-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: linear-gradient(135deg, #8f1824 0%, #a52030 100%);\r\n opacity: 0;\r\n transition: opacity 0.4s ease;\r\n z-index: 0;\r\n }\r\n\r\n .stat-card:hover {\r\n transform: translateY(-8px) scale(1.02);\r\n box-shadow: 0 15px 35px rgba(143, 24, 36, 0.3);\r\n border-color: #8f1824;\r\n }\r\n\r\n .stat-card:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .stat-card:hover .stat-value,\r\n .stat-card:hover .stat-label {\r\n color: #fff;\r\n }\r\n\r\n .stat-value {\r\n font-size: 1.8rem;\r\n font-weight: 800;\r\n color: #8f1824;\r\n margin-bottom: 0.25rem;\r\n position: relative;\r\n z-index: 1;\r\n transition: color 0.4s ease;\r\n }\r\n\r\n .stat-label {\r\n color: #522a1d;\r\n font-size: 0.75rem;\r\n font-weight: 500;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n position: relative;\r\n z-index: 1;\r\n transition: color 0.4s ease;\r\n }\r\n\r\n .main-content {\r\n display: grid;\r\n grid-template-columns: 1fr 380px;\r\n flex: 1;\r\n min-height: 0;\r\n gap: 1rem;\r\n padding: 1rem;\r\n animation: fadeIn 0.8s ease-out 0.4s both;\r\n }\r\n\r\n .map-section {\r\n display: flex;\r\n flex-direction: column;\r\n min-height: 0;\r\n max-height: calc(100vh - 300px);\r\n }\r\n\r\n .controls-panel {\r\n background: #fff;\r\n border-radius: 12px;\r\n padding: 1rem;\r\n margin-bottom: 1rem;\r\n border: 2px solid #8f1824;\r\n box-shadow: 0 4px 15px rgba(143, 24, 36, 0.15);\r\n animation: slideInLeft 0.6s ease-out;\r\n }\r\n\r\n @keyframes slideInLeft {\r\n from {\r\n transform: translateX(-50px);\r\n opacity: 0;\r\n }\r\n to {\r\n transform: translateX(0);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .control-group label {\r\n display: block;\r\n margin-bottom: 0.5rem;\r\n color: #522a1d;\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n }\r\n\r\n select {\r\n width: 100%;\r\n padding: 0.75rem;\r\n border: 2px solid #8f1824;\r\n border-radius: 8px;\r\n background: #fff;\r\n color: #522a1d;\r\n font-size: 0.9rem;\r\n font-family: 'Poppins', sans-serif;\r\n font-weight: 500;\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n }\r\n\r\n select:focus {\r\n outline: none;\r\n border-color: #8f1824;\r\n box-shadow: 0 0 0 3px rgba(143, 24, 36, 0.2);\r\n transform: translateY(-2px);\r\n }\r\n\r\n select:hover {\r\n border-color: #a52030;\r\n }\r\n\r\n .map-container {\r\n background: #fff;\r\n border-radius: 12px;\r\n border: 2px solid #8f1824;\r\n position: relative;\r\n overflow: hidden;\r\n flex: 1;\r\n min-height: 0;\r\n max-height: 90vh;\r\n box-shadow: 0 8px 30px rgba(143, 24, 36, 0.2);\r\n animation: zoomIn 0.8s ease-out;\r\n }\r\n\r\n @keyframes zoomIn {\r\n from {\r\n transform: scale(0.9);\r\n opacity: 0;\r\n }\r\n to {\r\n transform: scale(1);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n #map {\r\n height: 100%;\r\n width: 100%;\r\n border-radius: 10px;\r\n z-index: 1;\r\n }\r\n\r\n .details-panel {\r\n background: #fff;\r\n border-radius: 12px;\r\n border: 2px solid #8f1824;\r\n overflow-y: auto;\r\n padding: 1rem;\r\n max-height: calc(100vh - 300px);\r\n box-shadow: 0 8px 30px rgba(143, 24, 36, 0.2);\r\n animation: slideInRight 0.6s ease-out;\r\n }\r\n\r\n @keyframes slideInRight {\r\n from {\r\n transform: translateX(50px);\r\n opacity: 0;\r\n }\r\n to {\r\n transform: translateX(0);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .details-panel::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n\r\n .details-panel::-webkit-scrollbar-track {\r\n background: #f0e8d9;\r\n border-radius: 10px;\r\n }\r\n\r\n .details-panel::-webkit-scrollbar-thumb {\r\n background: #8f1824;\r\n border-radius: 10px;\r\n }\r\n\r\n .details-panel::-webkit-scrollbar-thumb:hover {\r\n background: #a52030;\r\n }\r\n\r\n .selected-municipality {\r\n background: linear-gradient(135deg, #8f1824 0%, #a52030 100%);\r\n border-radius: 12px;\r\n padding: 1.5rem;\r\n margin-bottom: 1.5rem;\r\n box-shadow: 0 8px 25px rgba(143, 24, 36, 0.3);\r\n animation: pulse 0.6s ease-out;\r\n }\r\n\r\n @keyframes pulse {\r\n 0%, 100% { transform: scale(1); }\r\n 50% { transform: scale(1.02); }\r\n }\r\n\r\n .municipality-title {\r\n font-size: 1.5rem;\r\n font-weight: 800;\r\n margin-bottom: 0.75rem;\r\n color: #fff;\r\n text-align: center;\r\n text-shadow: 2px 2px 4px rgba(0,0,0,0.2);\r\n }\r\n\r\n .data-section {\r\n background: #f0e8d9;\r\n border-radius: 10px;\r\n padding: 1rem;\r\n margin-bottom: 1rem;\r\n border-left: 4px solid var(--section-color, #8f1824);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n\r\n .data-section:hover {\r\n transform: translateX(5px);\r\n box-shadow: -5px 5px 15px rgba(143, 24, 36, 0.2);\r\n }\r\n\r\n .section-title {\r\n font-size: 1rem;\r\n font-weight: 700;\r\n margin-bottom: 0.75rem;\r\n color: var(--section-color, #8f1824);\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n }\r\n\r\n .data-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 0.75rem;\r\n }\r\n\r\n .data-item {\r\n background: #fff;\r\n border-radius: 8px;\r\n padding: 0.75rem;\r\n border: 1px solid rgba(143, 24, 36, 0.2);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .data-item:hover {\r\n transform: scale(1.05);\r\n border-color: #8f1824;\r\n box-shadow: 0 4px 12px rgba(143, 24, 36, 0.2);\r\n }\r\n\r\n .data-label {\r\n font-size: 0.75rem;\r\n color: #8f1824;\r\n margin-bottom: 0.25rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n font-weight: 600;\r\n }\r\n\r\n .data-value {\r\n font-size: 1rem;\r\n font-weight: 700;\r\n color: #522a1d;\r\n }\r\n\r\n .category-indicator {\r\n display: inline-block;\r\n padding: 0.35rem 1rem;\r\n border-radius: 20px;\r\n font-size: 0.7rem;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n margin-top: 0.5rem;\r\n letter-spacing: 0.5px;\r\n animation: bounceIn 0.6s ease-out;\r\n }\r\n\r\n @keyframes bounceIn {\r\n 0% { transform: scale(0); }\r\n 50% { transform: scale(1.1); }\r\n 100% { transform: scale(1); }\r\n }\r\n\r\n .cat-alto { background: #22c55e; color: #fff; }\r\n .cat-medio { background: #fb923c; color: #fff; }\r\n .cat-bajo { background: #ef4444; color: #fff; }\r\n .cat-sin { background: #94a3b8; color: #fff; }\r\n\r\n .leaflet-popup-content-wrapper {\r\n background: #fff !important;\r\n border: 2px solid #8f1824 !important;\r\n border-radius: 12px !important;\r\n box-shadow: 0 8px 25px rgba(143, 24, 36, 0.3) !important;\r\n }\r\n\r\n .leaflet-popup-content {\r\n color: #522a1d !important;\r\n margin: 1rem !important;\r\n font-family: 'Poppins', sans-serif !important;\r\n }\r\n\r\n .leaflet-popup-tip {\r\n background: #fff !important;\r\n border: 2px solid #8f1824 !important;\r\n }\r\n\r\n .map-loading {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n background: rgba(240, 232, 217, 0.95);\r\n padding: 2rem;\r\n border-radius: 16px;\r\n text-align: center;\r\n border: 2px solid #8f1824;\r\n z-index: 1000;\r\n box-shadow: 0 10px 40px rgba(143, 24, 36, 0.3);\r\n }\r\n\r\n .spinner {\r\n width: 50px;\r\n height: 50px;\r\n border: 5px solid #f0e8d9;\r\n border-left: 5px solid #8f1824;\r\n border-radius: 50%;\r\n animation: spin 1s linear infinite;\r\n margin: 0 auto 1rem auto;\r\n }\r\n\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n .legend-control {\r\n background: rgba(255, 255, 255, 0.95) !important;\r\n border: 2px solid #8f1824 !important;\r\n border-radius: 12px !important;\r\n padding: 1rem !important;\r\n color: #522a1d !important;\r\n box-shadow: 0 4px 15px rgba(143, 24, 36, 0.2) !important;\r\n }\r\n\r\n .legend-title {\r\n font-size: 0.9rem;\r\n font-weight: 700;\r\n margin-bottom: 0.5rem;\r\n color: #8f1824;\r\n }\r\n\r\n .legend-item {\r\n display: flex;\r\n align-items: center;\r\n margin-bottom: 0.4rem;\r\n }\r\n\r\n .legend-color {\r\n width: 20px;\r\n height: 14px;\r\n border-radius: 4px;\r\n margin-right: 0.5rem;\r\n border: 1px solid #522a1d;\r\n }\r\n\r\n .legend-text {\r\n font-size: 0.8rem;\r\n color: #522a1d;\r\n font-weight: 500;\r\n }\r\n\r\n .status-indicator {\r\n position: absolute;\r\n top: 10px;\r\n left: 10px;\r\n background: rgba(255, 255, 255, 0.95);\r\n padding: 0.5rem 1rem;\r\n border-radius: 8px;\r\n font-size: 0.8rem;\r\n border: 2px solid #8f1824;\r\n z-index: 1000;\r\n font-weight: 600;\r\n animation: slideInLeft 0.6s ease-out;\r\n }\r\n\r\n .status-success { border-color: #22c55e; color: #22c55e; }\r\n .status-warning { border-color: #fb923c; color: #fb923c; }\r\n\r\n .popup-button {\r\n width: 100%;\r\n padding: 0.6rem;\r\n background: linear-gradient(135deg, #8f1824, #a52030);\r\n color: #fff;\r\n border: none;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n font-weight: 700;\r\n font-family: 'Poppins', sans-serif;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 12px rgba(143, 24, 36, 0.3);\r\n }\r\n\r\n .popup-button:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 20px rgba(143, 24, 36, 0.4);\r\n }\r\n\r\n .popup-button:active {\r\n transform: translateY(0);\r\n }\r\n\r\n @media (max-width: 1200px) {\r\n .main-content {\r\n grid-template-columns: 1fr;\r\n grid-template-rows: auto auto;\r\n }\r\n \r\n .map-section {\r\n max-height: 60vh;\r\n }\r\n \r\n .details-panel {\r\n max-height: 400px;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .dashboard-stats {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n \r\n .data-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .main-content {\r\n padding: 0.5rem;\r\n }\r\n \r\n .stat-value {\r\n font-size: 1.5rem;\r\n }\r\n \r\n .stat-label {\r\n font-size: 0.7rem;\r\n }\r\n\r\n .map-section {\r\n max-height: 50vh;\r\n }\r\n\r\n .header h1 {\r\n font-size: 1.5rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .dashboard-stats {\r\n grid-template-columns: 1fr;\r\n gap: 0.75rem;\r\n }\r\n\r\n .header {\r\n padding: 1rem;\r\n }\r\n\r\n .stat-card {\r\n padding: 0.75rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"main-container\">\r\n <div class=\"header\">\r\n <h1>\ud83d\uddfa\ufe0f Mapa Agr\u00edcola de Nari\u00f1o<\/h1>\r\n <div class=\"subtitle\">Producci\u00f3n de Caf\u00e9 y Cacao por Municipio<\/div>\r\n <\/div>\r\n \r\n <div class=\"main-content\">\r\n <div class=\"map-section\">\r\n <div class=\"controls-panel\">\r\n <div class=\"control-group\">\r\n <label>Visualizar en mapa:<\/label>\r\n <select id=\"mapVisualization\">\r\n <option value=\"cafe_produccion\">Producci\u00f3n de Caf\u00e9 (Toneladas)<\/option>\r\n <option value=\"cafe_area\">\u00c1rea Sembrada de Caf\u00e9 (Hect\u00e1reas)<\/option>\r\n <option value=\"cacao_produccion\">Producci\u00f3n de Cacao (Toneladas)<\/option>\r\n <option value=\"cacao_area\">\u00c1rea Sembrada de Cacao (Hect\u00e1reas)<\/option>\r\n <option value=\"total_produccion\">Producci\u00f3n Total Agropecuaria<\/option>\r\n <option value=\"rendimiento_cafe\">Rendimiento Caf\u00e9 (t\/ha)<\/option>\r\n <option value=\"categoria_cafe\">Categor\u00eda de Caf\u00e9<\/option>\r\n <option value=\"categoria_cacao\">Categor\u00eda de Cacao<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"map-container\">\r\n <div id=\"mapLoading\" class=\"map-loading\">\r\n <div class=\"spinner\"><\/div>\r\n <p style=\"color: #522a1d; font-weight: 600;\">Cargando mapa y l\u00edmites municipales...<\/p>\r\n <\/div>\r\n <div id=\"mapStatus\" class=\"status-indicator\" style=\"display: none;\"><\/div>\r\n <div id=\"map\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"details-panel\">\r\n <div id=\"municipalityDetails\">\r\n <div style=\"text-align: center; padding: 2rem; color: #8f1824;\">\r\n <h3 style=\"margin-bottom: 1rem; font-weight: 700;\">\ud83d\uddfa\ufe0f Haga clic en un municipio<\/h3>\r\n <p style=\"color: #522a1d; font-weight: 400;\">Seleccione cualquier municipio en el mapa para ver estad\u00edsticas detalladas de producci\u00f3n agr\u00edcola<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"dashboard-stats\" id=\"dashboardStats\">\r\n <div class=\"stat-card\">\r\n <div class=\"stat-value\">64<\/div>\r\n <div class=\"stat-label\">Municipios Total<\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-value\">41<\/div>\r\n <div class=\"stat-label\">Productores de Caf\u00e9<\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-value\">16<\/div>\r\n <div class=\"stat-label\">Productores de Cacao<\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-value\">35,730<\/div>\r\n <div class=\"stat-label\">Hect\u00e1reas Caf\u00e9<\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-value\">19,745<\/div>\r\n <div class=\"stat-label\">Hect\u00e1reas Cacao<\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-value\">40,412<\/div>\r\n <div class=\"stat-label\">Familias Caficultoras<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/d3\/7.8.5\/d3.min.js\"><\/script>\r\n <script>\r\n const municipiosData = [\r\n {\r\n nombre: \"La Uni\u00f3n\",\r\n lat: 1.6000, lng: -77.1333,\r\n codigo_dane: \"52399\",\r\n subregion: \"Juanamb\u00fa\",\r\n cafe: { area_sembrada_ha: 4280.36, produccion_t: 3519.78, rendimiento_t_ha: 0.82, categoria: \"Alto\", familias_productoras: 3567 },\r\n cacao: { area_sembrada_ha: 79, produccion_t: 30.8, rendimiento_t_ha: 0.39, categoria: \"Bajo\", familias_productoras: 40 },\r\n economia_principal: \"Caf\u00e9\",\r\n total_area_agricola_ha: 4359.36,\r\n total_produccion_t: 3550.58,\r\n poblacion_total: 38000,\r\n altitud_msnm: 1800,\r\n temperatura_promedio: 19.5\r\n },\r\n {\r\n nombre: \"San Lorenzo\",\r\n lat: 1.9167, lng: -77.2167,\r\n codigo_dane: \"52687\",\r\n subregion: \"Juanamb\u00fa\",\r\n cafe: { area_sembrada_ha: 3466.13, produccion_t: 3048.17, rendimiento_t_ha: 0.88, categoria: \"Alto\", familias_productoras: 2888 },\r\n cacao: { area_sembrada_ha: 0, produccion_t: 0, rendimiento_t_ha: 0, categoria: \"Sin producci\u00f3n\", familias_productoras: 0 },\r\n economia_principal: \"Caf\u00e9\",\r\n total_area_agricola_ha: 3466.13,\r\n total_produccion_t: 3048.17,\r\n poblacion_total: 22000,\r\n altitud_msnm: 2100,\r\n temperatura_promedio: 17.8\r\n },\r\n {\r\n nombre: \"Buesaco\",\r\n lat: 1.3833, lng: -77.1667,\r\n codigo_dane: \"52110\",\r\n subregion: \"Cordillera\",\r\n cafe: { area_sembrada_ha: 3394.62, produccion_t: 3223.26, rendimiento_t_ha: 0.95, categoria: \"Alto\", familias_productoras: 2829 },\r\n cacao: { area_sembrada_ha: 0, produccion_t: 0, rendimiento_t_ha: 0, categoria: \"Sin producci\u00f3n\", familias_productoras: 0 },\r\n economia_principal: \"Caf\u00e9\",\r\n total_area_agricola_ha: 3394.62,\r\n total_produccion_t: 3223.26,\r\n poblacion_total: 31000,\r\n altitud_msnm: 1980,\r\n temperatura_promedio: 18.2\r\n },\r\n {\r\n nombre: \"San Andr\u00e9s de Tumaco\",\r\n lat: 1.8069, lng: -78.7636,\r\n codigo_dane: \"52835\",\r\n subregion: \"Pac\u00edfico Sur\",\r\n cafe: { area_sembrada_ha: 0, produccion_t: 0, rendimiento_t_ha: 0, categoria: \"Sin producci\u00f3n\", familias_productoras: 0 },\r\n cacao: { area_sembrada_ha: 16610.2, produccion_t: 7655.2, rendimiento_t_ha: 0.46, categoria: \"Alto\", familias_productoras: 8305 },\r\n economia_principal: \"Cacao\",\r\n total_area_agricola_ha: 16610.2,\r\n total_produccion_t: 7655.2,\r\n poblacion_total: 207000,\r\n altitud_msnm: 5,\r\n temperatura_promedio: 26.8\r\n },\r\n {\r\n nombre: \"Col\u00f3n\",\r\n lat: 1.6833, lng: -77.2833,\r\n codigo_dane: \"52203\",\r\n subregion: \"R\u00edo Mayo\",\r\n cafe: { area_sembrada_ha: 2098.69, produccion_t: 2769.6, rendimiento_t_ha: 1.32, categoria: \"Alto\", familias_productoras: 1749 },\r\n cacao: { area_sembrada_ha: 0, produccion_t: 0, rendimiento_t_ha: 0, categoria: \"Sin producci\u00f3n\", familias_productoras: 0 },\r\n economia_principal: \"Caf\u00e9\",\r\n total_area_agricola_ha: 2098.69,\r\n total_produccion_t: 2769.6,\r\n poblacion_total: 18500,\r\n altitud_msnm: 1850,\r\n temperatura_promedio: 19.1\r\n },\r\n {\r\n nombre: \"Pasto\",\r\n lat: 1.2136, lng: -77.2803,\r\n codigo_dane: \"52001\",\r\n subregion: \"Guambuyaco\",\r\n cafe: { area_sembrada_ha: 247.8, produccion_t: 371.69, rendimiento_t_ha: 1.50, categoria: \"Bajo\", familias_productoras: 206 },\r\n cacao: { area_sembrada_ha: 0, produccion_t: 0, rendimiento_t_ha: 0, categoria: \"Sin producci\u00f3n\", familias_productoras: 0 },\r\n economia_principal: \"Servicios\",\r\n total_area_agricola_ha: 247.8,\r\n total_produccion_t: 371.69,\r\n poblacion_total: 450000,\r\n altitud_msnm: 2527,\r\n temperatura_promedio: 14.1\r\n },\r\n {\r\n nombre: \"El Charco\",\r\n lat: 2.4833, lng: -78.1167,\r\n codigo_dane: \"52240\",\r\n subregion: \"Telemb\u00ed\",\r\n cafe: { area_sembrada_ha: 0, produccion_t: 0, rendimiento_t_ha: 0, categoria: \"Sin producci\u00f3n\", familias_productoras: 0 },\r\n cacao: { area_sembrada_ha: 628, produccion_t: 311, rendimiento_t_ha: 0.50, categoria: \"Medio\", familias_productoras: 314 },\r\n economia_principal: \"Cacao\",\r\n total_area_agricola_ha: 628,\r\n total_produccion_t: 311,\r\n poblacion_total: 35000,\r\n altitud_msnm: 50,\r\n temperatura_promedio: 26.2\r\n },\r\n {\r\n nombre: \"Policarpa\",\r\n lat: 1.6500, lng: -77.4333,\r\n codigo_dane: \"52540\",\r\n subregion: \"R\u00edo Mayo\",\r\n cafe: { area_sembrada_ha: 282.78, produccion_t: 213.09, rendimiento_t_ha: 0.75, categoria: \"Bajo\", familias_productoras: 236 },\r\n cacao: { area_sembrada_ha: 250, produccion_t: 138, rendimiento_t_ha: 0.55, categoria: \"Medio\", familias_productoras: 125 },\r\n economia_principal: \"Mixta\",\r\n total_area_agricola_ha: 532.78,\r\n total_produccion_t: 351.09,\r\n poblacion_total: 12500,\r\n altitud_msnm: 1200,\r\n temperatura_promedio: 22.3\r\n },\r\n {\r\n nombre: \"Alb\u00e1n\",\r\n lat: 1.3667, lng: -77.0833,\r\n codigo_dane: \"52019\",\r\n subregion: \"Cordillera\",\r\n cafe: { area_sembrada_ha: 1848.99, produccion_t: 1616.67, rendimiento_t_ha: 0.87, categoria: \"Medio\", familias_productoras: 1541 },\r\n cacao: { area_sembrada_ha: 0, produccion_t: 0, rendimiento_t_ha: 0, categoria: \"Sin producci\u00f3n\", familias_productoras: 0 },\r\n economia_principal: \"Caf\u00e9\",\r\n total_area_agricola_ha: 1848.99,\r\n total_produccion_t: 1616.67,\r\n poblacion_total: 18000,\r\n altitud_msnm: 1950,\r\n temperatura_promedio: 18.5\r\n },\r\n {\r\n nombre: \"Taminango\",\r\n lat: 1.6500, lng: -77.3333,\r\n codigo_dane: \"52838\",\r\n subregion: \"R\u00edo Mayo\",\r\n cafe: { area_sembrada_ha: 1714.41, produccion_t: 1489.32, rendimiento_t_ha: 0.87, categoria: \"Medio\", familias_productoras: 1429 },\r\n cacao: { area_sembrada_ha: 0, produccion_t: 0, rendimiento_t_ha: 0, categoria: \"Sin producci\u00f3n\", familias_productoras: 0 },\r\n economia_principal: \"Caf\u00e9\",\r\n total_area_agricola_ha: 1714.41,\r\n total_produccion_t: 1489.32,\r\n poblacion_total: 19500,\r\n altitud_msnm: 1750,\r\n temperatura_promedio: 19.8\r\n },\r\n {\r\n nombre: \"Ipiales\",\r\n lat: 0.8317, lng: -77.6437,\r\n codigo_dane: \"52356\",\r\n subregion: \"Abades\",\r\n cafe: { area_sembrada_ha: 0, produccion_t: 0, rendimiento_t_ha: 0, categoria: \"Sin producci\u00f3n\", familias_productoras: 0 },\r\n cacao: { area_sembrada_ha: 0, produccion_t: 0, rendimiento_t_ha: 0, categoria: \"Sin producci\u00f3n\", familias_productoras: 0 },\r\n economia_principal: \"Comercio\",\r\n total_area_agricola_ha: 0,\r\n total_produccion_t: 0,\r\n poblacion_total: 65000,\r\n altitud_msnm: 2897,\r\n temperatura_promedio: 12.5\r\n },\r\n {\r\n nombre: \"T\u00faquerres\",\r\n lat: 0.9500, lng: -77.6167,\r\n codigo_dane: \"52885\",\r\n subregion: \"Abades\",\r\n cafe: { area_sembrada_ha: 76.28, produccion_t: 21.65, rendimiento_t_ha: 0.28, categoria: \"Bajo\", familias_productoras: 64 },\r\n cacao: { area_sembrada_ha: 0, produccion_t: 0, rendimiento_t_ha: 0, categoria: \"Sin producci\u00f3n\", familias_productoras: 0 },\r\n economia_principal: \"Agricultura tradicional\",\r\n total_area_agricola_ha: 76.28,\r\n total_produccion_t: 21.65,\r\n poblacion_total: 45000,\r\n altitud_msnm: 3200,\r\n temperatura_promedio: 11.8\r\n },\r\n {\r\n nombre: \"Mosquera\",\r\n lat: 2.5333, lng: -78.4667,\r\n codigo_dane: \"52480\",\r\n subregion: \"Pac\u00edfico Sur\",\r\n cafe: { area_sembrada_ha: 0, produccion_t: 0, rendimiento_t_ha: 0, categoria: \"Sin producci\u00f3n\", familias_productoras: 0 },\r\n cacao: { area_sembrada_ha: 530, produccion_t: 84, rendimiento_t_ha: 0.16, categoria: \"Medio\", familias_productoras: 265 },\r\n economia_principal: \"Cacao\",\r\n total_area_agricola_ha: 530,\r\n total_produccion_t: 84,\r\n poblacion_total: 8200,\r\n altitud_msnm: 15,\r\n temperatura_promedio: 26.5\r\n },\r\n {\r\n nombre: \"Francisco Pizarro\",\r\n lat: 1.9000, lng: -78.6500,\r\n codigo_dane: \"52250\",\r\n subregion: \"Pac\u00edfico Sur\",\r\n cafe: { area_sembrada_ha: 0, produccion_t: 0, rendimiento_t_ha: 0, categoria: \"Sin producci\u00f3n\", familias_productoras: 0 },\r\n cacao: { area_sembrada_ha: 421.7, produccion_t: 97.36, rendimiento_t_ha: 0.23, categoria: \"Medio\", familias_productoras: 211 },\r\n economia_principal: \"Cacao\",\r\n total_area_agricola_ha: 421.7,\r\n total_produccion_t: 97.36,\r\n poblacion_total: 12000,\r\n altitud_msnm: 8,\r\n temperatura_promedio: 26.8\r\n },\r\n {\r\n nombre: \"Roberto Pay\u00e1n\",\r\n lat: 1.7500, lng: -78.3500,\r\n codigo_dane: \"52621\",\r\n subregion: \"Pac\u00edfico Sur\",\r\n cafe: { area_sembrada_ha: 0, produccion_t: 0, rendimiento_t_ha: 0, categoria: \"Sin producci\u00f3n\", familias_productoras: 0 },\r\n cacao: { area_sembrada_ha: 395, produccion_t: 227.5, rendimiento_t_ha: 0.58, categoria: \"Medio\", familias_productoras: 198 },\r\n economia_principal: \"Cacao\",\r\n total_area_agricola_ha: 395,\r\n total_produccion_t: 227.5,\r\n poblacion_total: 19500,\r\n altitud_msnm: 12,\r\n temperatura_promedio: 26.7\r\n }\r\n ];\r\n\r\n let map;\r\n let geoLayer = null;\r\n let markers = [];\r\n let selectedMunicipality = null;\r\n let currentMapVisualization = 'cafe_produccion';\r\n let legend;\r\n let geoDataLoaded = false;\r\n\r\n function initializeMap() {\r\n map = L.map('map').setView([1.2, -77.3], 8);\r\n\r\n L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\r\n attribution: '\u00a9 OpenStreetMap contributors'\r\n }).addTo(map);\r\n\r\n createLegend();\r\n loadGeoJSONData();\r\n }\r\n\r\n function loadGeoJSONData() {\r\n const statusEl = document.getElementById('mapStatus');\r\n statusEl.style.display = 'block';\r\n statusEl.className = 'status-indicator status-warning';\r\n statusEl.textContent = 'Cargando l\u00edmites municipales...';\r\n\r\n fetch('https:\/\/narino.gov.co\/lamejortaza\/wp-content\/uploads\/2025\/10\/narino_municipios.geojson')\r\n .then(response => {\r\n if (!response.ok) {\r\n throw new Error(`HTTP error! status: ${response.status}`);\r\n }\r\n return response.json();\r\n })\r\n .then(data => {\r\n console.log('GeoJSON cargado exitosamente:', data.features.length, 'municipios');\r\n geoDataLoaded = true;\r\n \r\n statusEl.className = 'status-indicator status-success';\r\n statusEl.textContent = '\u2713 L\u00edmites municipales cargados';\r\n \r\n geoLayer = L.geoJSON(data, {\r\n style: function(feature) {\r\n return getMunicipalityStyle(feature);\r\n },\r\n onEachFeature: function (feature, layer) {\r\n const municipalityName = getMunicipalityNameFromFeature(feature);\r\n const municipalityData = findMunicipalityData(municipalityName);\r\n \r\n const popupContent = createPopupContent(municipalityName, municipalityData);\r\n layer.bindPopup(popupContent, {\r\n maxWidth: 350,\r\n className: 'custom-popup'\r\n });\r\n\r\n layer.on({\r\n mouseover: function(e) {\r\n const layer = e.target;\r\n layer.setStyle({\r\n weight: 4,\r\n dashArray: '',\r\n fillOpacity: 0.9\r\n });\r\n if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {\r\n layer.bringToFront();\r\n }\r\n },\r\n mouseout: function(e) {\r\n geoLayer.resetStyle(e.target);\r\n },\r\n click: function(e) {\r\n if (municipalityData) {\r\n selectMunicipality(municipalityData);\r\n map.fitBounds(e.target.getBounds());\r\n }\r\n }\r\n });\r\n }\r\n }).addTo(map);\r\n\r\n map.fitBounds(geoLayer.getBounds());\r\n \r\n setTimeout(() => {\r\n document.getElementById('mapLoading').style.display = 'none';\r\n setTimeout(() => {\r\n statusEl.style.display = 'none';\r\n }, 3000);\r\n }, 1000);\r\n })\r\n .catch(error => {\r\n console.warn('Error al cargar GeoJSON:', error);\r\n geoDataLoaded = false;\r\n \r\n statusEl.className = 'status-indicator status-warning';\r\n statusEl.textContent = '\u26a0 Usando marcadores de respaldo';\r\n \r\n renderFallbackMarkers();\r\n \r\n setTimeout(() => {\r\n document.getElementById('mapLoading').style.display = 'none';\r\n setTimeout(() => {\r\n statusEl.style.display = 'none';\r\n }, 5000);\r\n }, 1000);\r\n });\r\n }\r\n\r\n function getMunicipalityStyle(feature) {\r\n const municipalityName = getMunicipalityNameFromFeature(feature);\r\n const municipalityData = findMunicipalityData(municipalityName);\r\n \r\n if (!municipalityData) {\r\n return {\r\n fillColor: '#94a3b8',\r\n weight: 2,\r\n opacity: 1,\r\n color: '#8f1824',\r\n dashArray: '3',\r\n fillOpacity: 0.4\r\n };\r\n }\r\n\r\n const color = getMunicipalityColor(municipalityData);\r\n \r\n return {\r\n fillColor: color,\r\n weight: 2,\r\n opacity: 1,\r\n color: '#fff',\r\n fillOpacity: 0.7\r\n };\r\n }\r\n\r\n function getMunicipalityColor(municipalityData) {\r\n let value;\r\n \r\n switch(currentMapVisualization) {\r\n case 'cafe_produccion':\r\n value = municipalityData.cafe.produccion_t;\r\n return getColorScale(value, 'cafe', d3.max(municipiosData, d => d.cafe.produccion_t));\r\n case 'cafe_area':\r\n value = municipalityData.cafe.area_sembrada_ha;\r\n return getColorScale(value, 'cafe', d3.max(municipiosData, d => d.cafe.area_sembrada_ha));\r\n case 'cacao_produccion':\r\n value = municipalityData.cacao.produccion_t;\r\n return getColorScale(value, 'cacao', d3.max(municipiosData, d => d.cacao.produccion_t));\r\n case 'cacao_area':\r\n value = municipalityData.cacao.area_sembrada_ha;\r\n return getColorScale(value, 'cacao', d3.max(municipiosData, d => d.cacao.area_sembrada_ha));\r\n case 'categoria_cafe':\r\n return getCategoryColor(municipalityData.cafe.categoria);\r\n case 'categoria_cacao':\r\n return getCategoryColor(municipalityData.cacao.categoria);\r\n case 'rendimiento_cafe':\r\n value = municipalityData.cafe.rendimiento_t_ha;\r\n return getColorScale(value, 'rendimiento', d3.max(municipiosData, d => d.cafe.rendimiento_t_ha));\r\n default:\r\n value = municipalityData.total_produccion_t;\r\n return getColorScale(value, 'total', d3.max(municipiosData, d => d.total_produccion_t));\r\n }\r\n }\r\n\r\n function getColorScale(value, type, maxValue) {\r\n if (value === 0) return '#94a3b8';\r\n \r\n const intensity = Math.min(value \/ maxValue, 1);\r\n \r\n if (type === 'cafe') {\r\n const colorScale = d3.scaleSequential(d3.interpolateBlues).domain([0, 1]);\r\n return colorScale(0.3 + intensity * 0.7);\r\n } else if (type === 'cacao') {\r\n const colorScale = d3.scaleSequential(d3.interpolateOranges).domain([0, 1]);\r\n return colorScale(0.3 + intensity * 0.7);\r\n } else if (type === 'rendimiento') {\r\n const colorScale = d3.scaleSequential(d3.interpolateGreens).domain([0, 1]);\r\n return colorScale(0.3 + intensity * 0.7);\r\n } else {\r\n const colorScale = d3.scaleSequential(d3.interpolateViridis).domain([0, 1]);\r\n return colorScale(intensity);\r\n }\r\n }\r\n\r\n function getCategoryColor(categoria) {\r\n const colors = {\r\n 'Alto': '#22c55e',\r\n 'Medio': '#fb923c',\r\n 'Bajo': '#ef4444',\r\n 'Sin producci\u00f3n': '#94a3b8'\r\n };\r\n return colors[categoria] || '#94a3b8';\r\n }\r\n\r\n function getMunicipalityNameFromFeature(feature) {\r\n return feature.properties.MPIO_CNMBR || \r\n feature.properties.NOMBRE || \r\n feature.properties.nombre || \r\n feature.properties.MUNICIPIO || \r\n 'Sin nombre';\r\n }\r\n\r\n function findMunicipalityData(municipalityName) {\r\n return municipiosData.find(m => \r\n m.nombre.toLowerCase() === municipalityName.toLowerCase() ||\r\n m.nombre.toLowerCase().includes(municipalityName.toLowerCase()) ||\r\n municipalityName.toLowerCase().includes(m.nombre.toLowerCase())\r\n );\r\n }\r\n\r\n function createPopupContent(municipalityName, municipalityData) {\r\n if (!municipalityData) {\r\n return `\r\n <div style=\"color: #522a1d; padding: 0.5rem;\">\r\n <strong style=\"font-size: 1.1rem; color: #8f1824;\">${municipalityName}<\/strong><br>\r\n <span style=\"color: #94a3b8;\">Sin datos disponibles<\/span>\r\n <\/div>\r\n `;\r\n }\r\n\r\n let value, unit;\r\n switch(currentMapVisualization) {\r\n case 'cafe_produccion':\r\n value = municipalityData.cafe.produccion_t;\r\n unit = 't de caf\u00e9';\r\n break;\r\n case 'cacao_produccion':\r\n value = municipalityData.cacao.produccion_t;\r\n unit = 't de cacao';\r\n break;\r\n case 'cafe_area':\r\n value = municipalityData.cafe.area_sembrada_ha;\r\n unit = 'ha de caf\u00e9';\r\n break;\r\n case 'cacao_area':\r\n value = municipalityData.cacao.area_sembrada_ha;\r\n unit = 'ha de cacao';\r\n break;\r\n default:\r\n value = municipalityData.total_produccion_t;\r\n unit = 't total';\r\n }\r\n\r\n return `\r\n <div style=\"color: #522a1d; padding: 0.5rem;\">\r\n <strong style=\"font-size: 1.2rem; color: #8f1824;\">${municipalityData.nombre}<\/strong><br>\r\n <div style=\"margin: 0.75rem 0;\">\r\n <strong style=\"color: #8f1824; font-size: 1.1rem;\">${formatNumber(value)} ${unit}<\/strong>\r\n <\/div>\r\n <div style=\"font-size: 0.85rem; color: #522a1d; margin-bottom: 0.75rem;\">\r\n Poblaci\u00f3n: ${municipalityData.poblacion_total ? formatNumber(municipalityData.poblacion_total) : 'N\/A'}<br>\r\n Econom\u00eda: ${municipalityData.economia_principal}<br>\r\n Subregi\u00f3n: ${municipalityData.subregion}\r\n <\/div>\r\n <button onclick=\"selectMunicipalityFromPopup('${municipalityData.nombre}')\" class=\"popup-button\">\r\n Ver detalles completos\r\n <\/button>\r\n <\/div>\r\n `;\r\n }\r\n\r\n window.selectMunicipalityFromPopup = function(municipalityName) {\r\n const municipality = municipiosData.find(m => m.nombre === municipalityName);\r\n if (municipality) {\r\n selectMunicipality(municipality);\r\n }\r\n };\r\n\r\n function renderFallbackMarkers() {\r\n municipiosData.forEach(municipality => {\r\n const markerData = getMarkerData(municipality);\r\n \r\n const markerIcon = L.divIcon({\r\n className: 'custom-marker',\r\n html: `<div style=\"background: ${markerData.color}; border: 2px solid #8f1824; border-radius: 50%; width: ${markerData.size}px; height: ${markerData.size}px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 10px; box-shadow: 0 4px 12px rgba(143, 24, 36, 0.4);\">${markerData.label}<\/div>`,\r\n iconSize: [markerData.size, markerData.size],\r\n iconAnchor: [markerData.size\/2, markerData.size\/2]\r\n });\r\n\r\n const marker = L.marker([municipality.lat, municipality.lng], {icon: markerIcon});\r\n \r\n const popupContent = createPopupContent(municipality.nombre, municipality);\r\n marker.bindPopup(popupContent, {\r\n maxWidth: 350,\r\n className: 'custom-popup'\r\n });\r\n\r\n marker.on('click', () => {\r\n selectMunicipality(municipality);\r\n });\r\n\r\n markers.push(marker);\r\n marker.addTo(map);\r\n });\r\n }\r\n\r\n function getMarkerData(municipality) {\r\n let value;\r\n\r\n switch(currentMapVisualization) {\r\n case 'cafe_produccion':\r\n value = municipality.cafe.produccion_t;\r\n break;\r\n case 'cacao_produccion':\r\n value = municipality.cacao.produccion_t;\r\n break;\r\n default:\r\n value = municipality.total_produccion_t;\r\n }\r\n\r\n const maxValue = Math.max(...municipiosData.map(m => {\r\n switch(currentMapVisualization) {\r\n case 'cafe_produccion': return m.cafe.produccion_t;\r\n case 'cacao_produccion': return m.cacao.produccion_t;\r\n default: return m.total_produccion_t;\r\n }\r\n }));\r\n\r\n const ratio = value \/ maxValue;\r\n let size, color;\r\n \r\n if (ratio >= 0.75) { \r\n size = 35; \r\n color = '#22c55e'; \r\n } else if (ratio >= 0.5) { \r\n size = 30; \r\n color = '#8f1824'; \r\n } else if (ratio >= 0.25) { \r\n size = 25; \r\n color = '#fb923c'; \r\n } else if (ratio > 0) { \r\n size = 20; \r\n color = '#ef4444'; \r\n } else {\r\n size = 15; \r\n color = '#94a3b8'; \r\n }\r\n\r\n const label = municipality.nombre.split(' ')[0].substring(0, 3).toUpperCase();\r\n\r\n return { value, color, size, label };\r\n }\r\n\r\n function createLegend() {\r\n legend = L.control({position: 'topright'});\r\n \r\n legend.onAdd = function() {\r\n const div = L.DomUtil.create('div', 'legend-control');\r\n updateLegendContent(div);\r\n return div;\r\n };\r\n \r\n legend.addTo(map);\r\n }\r\n\r\n function updateLegendContent(div) {\r\n let content = '<div class=\"legend-title\">Intensidad de Color<\/div>';\r\n \r\n if (currentMapVisualization.includes('categoria')) {\r\n content += `\r\n <div class=\"legend-item\">\r\n <div class=\"legend-color\" style=\"background: #22c55e;\"><\/div>\r\n <span class=\"legend-text\">Alta<\/span>\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <div class=\"legend-color\" style=\"background: #fb923c;\"><\/div>\r\n <span class=\"legend-text\">Media<\/span>\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <div class=\"legend-color\" style=\"background: #ef4444;\"><\/div>\r\n <span class=\"legend-text\">Baja<\/span>\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <div class=\"legend-color\" style=\"background: #94a3b8;\"><\/div>\r\n <span class=\"legend-text\">Sin producci\u00f3n<\/span>\r\n <\/div>\r\n `;\r\n } else {\r\n const colors = currentMapVisualization.includes('cafe') ? \r\n ['#08306b', '#2171b5', '#6baed6', '#c6dbef'] :\r\n currentMapVisualization.includes('cacao') ?\r\n ['#7f2704', '#cc4c02', '#fe9929', '#fed98e'] :\r\n ['#440154', '#31688e', '#35b779', '#fde725'];\r\n\r\n content += `\r\n <div class=\"legend-item\">\r\n <div class=\"legend-color\" style=\"background: ${colors[0]};\"><\/div>\r\n <span class=\"legend-text\">Mayor producci\u00f3n<\/span>\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <div class=\"legend-color\" style=\"background: ${colors[1]};\"><\/div>\r\n <span class=\"legend-text\">Producci\u00f3n alta<\/span>\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <div class=\"legend-color\" style=\"background: ${colors[2]};\"><\/div>\r\n <span class=\"legend-text\">Producci\u00f3n media<\/span>\r\n <\/div>\r\n <div class=\"legend-item\">\r\n <div class=\"legend-color\" style=\"background: ${colors[3]};\"><\/div>\r\n <span class=\"legend-text\">Producci\u00f3n baja<\/span>\r\n <\/div>\r\n `;\r\n }\r\n \r\n div.innerHTML = content;\r\n }\r\n\r\n function selectMunicipality(municipality) {\r\n selectedMunicipality = municipality;\r\n showMunicipalityDetails(municipality);\r\n \r\n if (geoDataLoaded && geoLayer) {\r\n geoLayer.eachLayer(function(layer) {\r\n const municipalityName = getMunicipalityNameFromFeature(layer.feature);\r\n if (findMunicipalityData(municipalityName) === municipality) {\r\n layer.setStyle({\r\n weight: 5,\r\n color: '#8f1824',\r\n fillOpacity: 0.9\r\n });\r\n map.fitBounds(layer.getBounds());\r\n } else {\r\n geoLayer.resetStyle(layer);\r\n }\r\n });\r\n }\r\n }\r\n\r\n function showMunicipalityDetails(municipality) {\r\n const container = document.getElementById('municipalityDetails');\r\n \r\n container.innerHTML = `\r\n <div class=\"selected-municipality\">\r\n <div class=\"municipality-title\">${municipality.nombre}<\/div>\r\n <div style=\"text-align: center; margin-bottom: 0.5rem;\">\r\n <span style=\"background: rgba(240, 232, 217, 0.3); color: #f0e8d9; padding: 0.25rem 0.75rem; border-radius: 1rem; font-size: 0.85rem; font-weight: 600;\">${municipality.economia_principal}<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"data-section\" style=\"--section-color: #8f1824;\">\r\n <div class=\"section-title\">\u2615 Producci\u00f3n de Caf\u00e9<\/div>\r\n <div class=\"data-grid\">\r\n <div class=\"data-item\">\r\n <div class=\"data-label\">\u00c1rea Sembrada<\/div>\r\n <div class=\"data-value\">${formatNumber(municipality.cafe.area_sembrada_ha)} ha<\/div>\r\n <\/div>\r\n <div class=\"data-item\">\r\n <div class=\"data-label\">Producci\u00f3n<\/div>\r\n <div class=\"data-value\">${formatNumber(municipality.cafe.produccion_t)} t<\/div>\r\n <\/div>\r\n <div class=\"data-item\">\r\n <div class=\"data-label\">Rendimiento<\/div>\r\n <div class=\"data-value\">${municipality.cafe.rendimiento_t_ha} t\/ha<\/div>\r\n <\/div>\r\n <div class=\"data-item\">\r\n <div class=\"data-label\">Familias Productoras<\/div>\r\n <div class=\"data-value\">${formatNumber(municipality.cafe.familias_productoras)}<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"category-indicator ${getCategoryClass(municipality.cafe.categoria)}\">${municipality.cafe.categoria}<\/div>\r\n <\/div>\r\n\r\n <div class=\"data-section\" style=\"--section-color: #fb923c;\">\r\n <div class=\"section-title\">\ud83c\udf6b Producci\u00f3n de Cacao<\/div>\r\n <div class=\"data-grid\">\r\n <div class=\"data-item\">\r\n <div class=\"data-label\">\u00c1rea Sembrada<\/div>\r\n <div class=\"data-value\">${formatNumber(municipality.cacao.area_sembrada_ha)} ha<\/div>\r\n <\/div>\r\n <div class=\"data-item\">\r\n <div class=\"data-label\">Producci\u00f3n<\/div>\r\n <div class=\"data-value\">${formatNumber(municipality.cacao.produccion_t)} t<\/div>\r\n <\/div>\r\n <div class=\"data-item\">\r\n <div class=\"data-label\">Rendimiento<\/div>\r\n <div class=\"data-value\">${municipality.cacao.rendimiento_t_ha} t\/ha<\/div>\r\n <\/div>\r\n <div class=\"data-item\">\r\n <div class=\"data-label\">Familias Productoras<\/div>\r\n <div class=\"data-value\">${formatNumber(municipality.cacao.familias_productoras)}<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"category-indicator ${getCategoryClass(municipality.cacao.categoria)}\">${municipality.cacao.categoria}<\/div>\r\n <\/div>\r\n\r\n <div class=\"data-section\" style=\"--section-color: #22c55e;\">\r\n <div class=\"section-title\">\ud83d\udcca Informaci\u00f3n General<\/div>\r\n <div class=\"data-grid\">\r\n <div class=\"data-item\">\r\n <div class=\"data-label\">Poblaci\u00f3n Total<\/div>\r\n <div class=\"data-value\">${municipality.poblacion_total ? formatNumber(municipality.poblacion_total) : 'N\/A'}<\/div>\r\n <\/div>\r\n <div class=\"data-item\">\r\n <div class=\"data-label\">Altitud<\/div>\r\n <div class=\"data-value\">${municipality.altitud_msnm ? formatNumber(municipality.altitud_msnm) + ' msnm' : 'N\/A'}<\/div>\r\n <\/div>\r\n <div class=\"data-item\">\r\n <div class=\"data-label\">Temperatura<\/div>\r\n <div class=\"data-value\">${municipality.temperatura_promedio ? municipality.temperatura_promedio + '\u00b0C' : 'N\/A'}<\/div>\r\n <\/div>\r\n <div class=\"data-item\">\r\n <div class=\"data-label\">Subregi\u00f3n<\/div>\r\n <div class=\"data-value\">${municipality.subregion || 'N\/A'}<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"data-section\" style=\"--section-color: #8f1824;\">\r\n <div class=\"section-title\">\ud83c\udf31 Totales Agr\u00edcolas<\/div>\r\n <div class=\"data-grid\">\r\n <div class=\"data-item\">\r\n <div class=\"data-label\">\u00c1rea Total<\/div>\r\n <div class=\"data-value\">${formatNumber(municipality.total_area_agricola_ha)} ha<\/div>\r\n <\/div>\r\n <div class=\"data-item\">\r\n <div class=\"data-label\">Producci\u00f3n Total<\/div>\r\n <div class=\"data-value\">${formatNumber(municipality.total_produccion_t)} t<\/div>\r\n <\/div>\r\n <div class=\"data-item\">\r\n <div class=\"data-label\">C\u00f3digo DANE<\/div>\r\n <div class=\"data-value\">${municipality.codigo_dane || 'N\/A'}<\/div>\r\n <\/div>\r\n <div class=\"data-item\">\r\n <div class=\"data-label\">Familias Total<\/div>\r\n <div class=\"data-value\">${formatNumber(municipality.cafe.familias_productoras + municipality.cacao.familias_productoras)}<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n function formatNumber(num) {\r\n return new Intl.NumberFormat('es-CO').format(num);\r\n }\r\n\r\n function getCategoryClass(categoria) {\r\n const classes = {\r\n 'Alto': 'cat-alto',\r\n 'Medio': 'cat-medio',\r\n 'Bajo': 'cat-bajo',\r\n 'Sin producci\u00f3n': 'cat-sin'\r\n };\r\n return classes[categoria] || 'cat-sin';\r\n }\r\n\r\n function updateMapVisualization() {\r\n if (geoDataLoaded && geoLayer) {\r\n geoLayer.eachLayer(function(layer) {\r\n const style = getMunicipalityStyle(layer.feature);\r\n layer.setStyle(style);\r\n });\r\n } else {\r\n markers.forEach(marker => map.removeLayer(marker));\r\n markers = [];\r\n renderFallbackMarkers();\r\n }\r\n \r\n if (legend) {\r\n const legendElement = document.querySelector('.legend-control');\r\n if (legendElement) {\r\n updateLegendContent(legendElement);\r\n }\r\n }\r\n }\r\n\r\n document.getElementById('mapVisualization').addEventListener('change', function() {\r\n currentMapVisualization = this.value;\r\n updateMapVisualization();\r\n });\r\n\r\n document.addEventListener('DOMContentLoaded', function() {\r\n initializeMap();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\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":"<p>Mapa Agr\u00edcola de Nari\u00f1o \ud83d\uddfa\ufe0f Mapa Agr\u00edcola de Nari\u00f1o Producci\u00f3n de Caf\u00e9 y Cacao por Municipio Visualizar en mapa: Producci\u00f3n […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2546","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/narino.gov.co\/lamejortaza\/wp-json\/wp\/v2\/pages\/2546","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/narino.gov.co\/lamejortaza\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/narino.gov.co\/lamejortaza\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/narino.gov.co\/lamejortaza\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/narino.gov.co\/lamejortaza\/wp-json\/wp\/v2\/comments?post=2546"}],"version-history":[{"count":46,"href":"https:\/\/narino.gov.co\/lamejortaza\/wp-json\/wp\/v2\/pages\/2546\/revisions"}],"predecessor-version":[{"id":2646,"href":"https:\/\/narino.gov.co\/lamejortaza\/wp-json\/wp\/v2\/pages\/2546\/revisions\/2646"}],"wp:attachment":[{"href":"https:\/\/narino.gov.co\/lamejortaza\/wp-json\/wp\/v2\/media?parent=2546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}