https://www.imhpa.gob.pa/scripts/mapa_home_pronostico_extendido.js?v=2

1function ini_mapa_pronostico_extendido() {
2    var selected_pe = null;
3    var fecha_selected;
4    mapa_selected = "pronostico_extendido";
5    $(".btn-mapa-home-holder").removeClass("active");
6    $("#boton_pronostico_extendido")
7        .closest(".btn-mapa-home-holder")
8        .addClass("active");
9    //selected_item = null;
10    //momento = pronostico_dia.momento_selected;
11    layer_group = L.layerGroup().addTo(map);
12    $("#mapa_templates .pronostico_extendido_mapa .salir").on(
13        "click",
14        function (e) {
15            e.preventDefault();
16            selected_pe = null;
17            $("#mapa_templates .pronostico_extendido_mapa .datos").fadeOut(
18                "fast",
19            );
20        },
21    );
22    //console.log(pronostico_extendido);
23    $("#mapa_templates .pronostico_extendido_mapa .generales .fecha_ini").html(
24        pronostico_extendido.fecha_ini,
25    );
26    $("#mapa_templates .pronostico_extendido_mapa .generales .fecha_fin").html(
27        pronostico_extendido.fecha_fin,
28    );
29    $("#mapa_templates .pronostico_extendido_mapa .momentos").html("");
30    var first = true;
31    $.each(pronostico_extendido.dias, function (index, value) {
32        var clase = "";
33        if (first) {
34            clase = " active";
35            first = false;
36            selected_pe = index;
37            pronostico_extendido_cargar(index);
38        }
39        $("#mapa_templates .pronostico_extendido_mapa .momentos").append(
40            '<div class="momento' +
41                clase +
42                '"><a href="#" data-momento="' +
43                index +
44                '"><span>' +
45                value.dia_semana +
46                "</span> " +
47                value.fecha +
48                "</a></div>",
49        );
50    });
51    $("#mapa_templates .pronostico_extendido_mapa .momentos").on(
52        "click",
53        ".momento:not(.active) a",
54        function (e) {
55            e.preventDefault();
56            selected_pe = $(this).data("momento");
57            layer_group.clearLayers();
58            if (selected_pe != null) {
59                $("#mapa_templates .pronostico_extendido_mapa .datos").fadeOut(
60                    "fast",
61                );
62                pronostico_extendido_cargar(selected_pe);
63            }
64            $(this)
65                .closest(".momento")
66                .siblings(".active")
67                .removeClass("active");
68            $(this).closest(".momento").addClass("active");
69            //ini_mapa_pronostico_extendido();
70        },
71    );
72    $("#mapa_templates .pronostico_extendido_mapa").fadeIn(0);
73}
74function pronostico_extendido_quit() {
75    pronostico_extendido_clear_layers();
76    if (layer_group != null) {
77        layer_group.clearLayers();
78    }
79}
80function pronostico_extendido_clear_layers() {
81    //$("#mapa_templates .pronostico_extendido_mapa").css({ 'position':'absolute', 'width':'100%', 'height':'100%', 'z-index':1000});
82    $("#mapa_templates .pronostico_extendido_mapa").fadeOut(0);
83}
84function pronostico_extendido_select(e) {
85    //selected_item = this;
86    //map.setView(e.target.getLatLng());
87    var value = this.datos;
88    pronostico_extendido_cargar_datos(value);
89}
90function pronostico_extendido_cargar(index) {
91    fecha_selected = pronostico_extendido.dias[index].fecha;
92    $.each(pronostico_extendido.dias[index].regiones, function (index, value) {
93        var nombre = value.nombre_region;
94        var icono = new L.DivIcon({
95            className: "icono-mapa",
96            html: estados[value["estado"]].icono,
97            iconSize: [90, 64],
98            iconAnchor: [45, 64],
99            popupAnchor: [45, -60],
100            tooltipAnchor: [0, -60],
101            shadowSize: [90, 64],
102            shadowAnchor: [0, 0],
103        });
104        var latlng = value.coords.split(",");
105        var stationMarker = L.marker(latlng, { icon: icono })
106            .bindTooltip(nombre, {
107                permanent: false,
108                direction: "top",
109                className: "labels",
110                interactive: true,
111            })
112            .on("click", pronostico_extendido_select);
113        stationMarker.datos = value;
114        layer_group.addLayer(stationMarker);
115    });
116}
117function pronostico_extendido_cargar_datos(value) {
118    var data_container = $("#mapa_templates .pronostico_extendido_mapa .datos");
119    //console.log(value);
120    //var estado_sel = pronostico_dia.momento_selected;
121    var pronostico = estados[value["estado"]].nombre;
122    var pronostico_icono = estados[value["estado"]].icono;
123    //var nombre_momento = pronostico_dia.momentos[estado_sel];
124    var tmax = Math.round(value.tmax * 10) / 10;
125    var tmin = Math.round(value.tmin * 10) / 10;
126    var tapa = Math.round(value.tapa * 10) / 10;
127    var nombre = value.nombre_region;
128    //data_container.find('.momento').html(nombre_momento);
129    data_container.find(".fecha").html(fecha_selected);

130    data_container.find(".region").html(nombre);
131    data_container
132        .find(".icono_pronostico")
133        .html(pronostico_icono + "<span>" + pronostico + "</span>");
134    data_container.find(".temp-max").html(tmax + " °C");
135    data_container.find(".temp-min").html(tmin + " °C");
136    data_container.find(".sen-term").html(tapa + " °C");
137    data_container.find(".humedad").html(value.humedad + "%");
138    // Intensidad de lluvia (rango del admin); la fila se oculta si ese día no la tiene.
139    data_container.find(".lluvia").html(value.lluvia ? value.lluvia : "");
140    data_container.find(".intensidad_lluvia").toggle(!!value.lluvia);
141    // El panel mide el 100% del alto del mapa y #mapa_home corta lo que sobra: se agranda el
142    // mapa ANTES de mostrarlo (incluyendo el padding del panel), no 500 ms después.
143    data_container.stop(true, true).css({ display: "block", opacity: 0 });
144    var alto_panel =
145        data_container.find(".pronostico").outerHeight(true) +
146        (data_container.innerHeight() - data_container.height());
147    var alto_nuevo = Math.max(alto_panel, 526);
148    var crece = alto_nuevo > $("#mapa_home").outerHeight();
149    $("#mapa_home").css("minHeight", alto_nuevo);
150    // #mapa_home anima min-height en 0.5s: si crece, el panel aparece al terminar para no verse cortado.
151    data_container.delay(crece ? 500 : 0).animate({ opacity: 1 }, "fast");
152}