Refina mapas Leaflet e prepara nova release Windows

backend/app/api/visualizacao.py

@@ -3,10 +3,11 @@ from __future__ import annotations
 import os
 from typing import Any
 
-from fastapi import APIRouter, File, Form, Request, UploadFile
+from fastapi import APIRouter, File, Form, HTTPException, Request, UploadFile
 from fastapi.responses import FileResponse
 from pydantic import BaseModel
 
+from app.core.map_layers import get_bairros_geojson
 from app.services import auth_service, elaboracao_service, visualizacao_service
 from app.services.audit_log_service import log_event
 from app.services.session_store import session_store
@@ -151,6 +152,15 @@ def map_popup(payload: MapaPopupPayload) -> dict[str, Any]:
     return visualizacao_service.carregar_popup_ponto_mapa(session, payload.row_id)
 
 
+@router.get("/map/bairros.geojson")
+def map_bairros_geojson(request: Request) -> dict[str, Any]:
+    auth_service.require_user(request)
+    geojson = get_bairros_geojson()
+    if not isinstance(geojson, dict):
+        raise HTTPException(status_code=404, detail="Camada de bairros indisponivel")
+    return geojson
+
+
 @router.post("/evaluation/fields")
 def evaluation_fields(payload: SessionPayload) -> dict[str, Any]:
     session = session_store.get(payload.session_id)

backend/app/core/map_layers.py

@@ -95,6 +95,10 @@ def _carregar_bairros_geojson() -> dict[str, Any] | None:
     return geojson
 
 
+def get_bairros_geojson() -> dict[str, Any] | None:
+    return _carregar_bairros_geojson()
+
+
 def add_bairros_layer(
     mapa: folium.Map,
     *,
@@ -180,14 +184,14 @@ def add_indice_marker(
     ).add_to(camada)
 
 
-def add_trabalhos_tecnicos_markers(
-    camada: folium.map.FeatureGroup,
+def build_trabalhos_tecnicos_marker_payloads(
     trabalhos: list[dict[str, Any]] | None,
     *,
     origem: str = "pesquisa_mapa",
     marker_style: str = "estrela",
     ignore_bounds: bool = True,
-) -> None:
+) -> list[dict[str, Any]]:
+    payloads: list[dict[str, Any]] = []
     for item in trabalhos or []:
         try:
             lat = float(item.get("coord_lat"))
@@ -261,43 +265,83 @@ def add_trabalhos_tecnicos_markers(
             + "</div>"
         )
 
-        if str(marker_style or "").strip().lower() == "ponto":
-            marcador = folium.Marker(
-                location=[lat, lon],
-                tooltip=folium.Tooltip(detalhes_html, sticky=True),
-                popup=folium.Popup(detalhes_html, max_width=360),
-                icon=folium.DivIcon(
-                    html=(
-                        "<div style='display:flex;align-items:center;justify-content:center;"
-                        "width:8px;height:8px;border-radius:999px;background:#1f6fb2;"
-                        "border:1px solid #ffffff;box-shadow:0 0 0 1px rgba(20,42,66,0.20);'></div>"
-                    ),
-                    icon_size=(8, 8),
-                    icon_anchor=(4, 4),
-                    class_name="mesa-trabalho-tecnico-marker mesa-trabalho-tecnico-marker-dot",
-                ),
+        if str(marker_style or "").strip().lower() != "ponto":
+            marker_html = (
+                "<div style='display:flex;align-items:center;justify-content:center;"
+                "width:14px;height:14px;'>"
+                "<svg width='14' height='14' viewBox='0 0 24 24' aria-hidden='true'>"
+                "<polygon points='12,1.8 15.2,8.2 22.2,9.2 17.1,14.1 18.3,21.1 "
+                "12,17.8 5.7,21.1 6.9,14.1 1.8,9.2 8.8,8.2' "
+                "fill='#c62828' stroke='#000000' stroke-width='1.4' stroke-linejoin='round'/>"
+                "</svg></div>"
             )
-        else:
-            marcador = folium.Marker(
-                location=[lat, lon],
-                tooltip=folium.Tooltip(detalhes_html, sticky=True),
-                popup=folium.Popup(detalhes_html, max_width=360),
-                icon=folium.DivIcon(
-                    html=(
-                        "<div style='display:flex;align-items:center;justify-content:center;"
-                        "width:14px;height:14px;'>"
-                        "<svg width='14' height='14' viewBox='0 0 24 24' aria-hidden='true'>"
-                        "<polygon points='12,1.8 15.2,8.2 22.2,9.2 17.1,14.1 18.3,21.1 "
-                        "12,17.8 5.7,21.1 6.9,14.1 1.8,9.2 8.8,8.2' "
-                        "fill='#c62828' stroke='#000000' stroke-width='1.4' stroke-linejoin='round'/>"
-                        "</svg></div>"
-                    ),
-                    icon_size=(14, 14),
-                    icon_anchor=(7, 7),
-                    class_name="mesa-trabalho-tecnico-marker",
-                ),
+            payloads.append(
+                {
+                    "lat": lat,
+                    "lon": lon,
+                    "tooltip_html": detalhes_html,
+                    "popup_html": detalhes_html,
+                    "marker_html": marker_html,
+                    "marker_style": "estrela",
+                    "ignore_bounds": bool(ignore_bounds),
+                    "icon_size": [14, 14],
+                    "icon_anchor": [7, 7],
+                    "class_name": "mesa-trabalho-tecnico-marker",
+                }
             )
-        marcador.options["mesaIgnoreBounds"] = bool(ignore_bounds)
+            continue
+
+        marker_html = (
+            "<div style='display:flex;align-items:center;justify-content:center;"
+            "width:8px;height:8px;border-radius:999px;background:#1f6fb2;"
+            "border:1px solid #ffffff;box-shadow:0 0 0 1px rgba(20,42,66,0.20);'></div>"
+        )
+        payloads.append(
+            {
+                "lat": lat,
+                "lon": lon,
+                "tooltip_html": detalhes_html,
+                "popup_html": detalhes_html,
+                "marker_html": marker_html,
+                "marker_style": "ponto",
+                "ignore_bounds": bool(ignore_bounds),
+                "icon_size": [8, 8],
+                "icon_anchor": [4, 4],
+                "class_name": "mesa-trabalho-tecnico-marker mesa-trabalho-tecnico-marker-dot",
+            }
+        )
+
+    return payloads
+
+
+def add_trabalhos_tecnicos_markers(
+    camada: folium.map.FeatureGroup,
+    trabalhos: list[dict[str, Any]] | None,
+    *,
+    origem: str = "pesquisa_mapa",
+    marker_style: str = "estrela",
+    ignore_bounds: bool = True,
+) -> None:
+    payloads = build_trabalhos_tecnicos_marker_payloads(
+        trabalhos,
+        origem=origem,
+        marker_style=marker_style,
+        ignore_bounds=ignore_bounds,
+    )
+
+    for item in payloads:
+        marcador = folium.Marker(
+            location=[float(item["lat"]), float(item["lon"])],
+            tooltip=folium.Tooltip(str(item.get("tooltip_html") or ""), sticky=True),
+            popup=folium.Popup(str(item.get("popup_html") or ""), max_width=360),
+            icon=folium.DivIcon(
+                html=str(item.get("marker_html") or ""),
+                icon_size=tuple(item.get("icon_size") or [14, 14]),
+                icon_anchor=tuple(item.get("icon_anchor") or [7, 7]),
+                class_name=str(item.get("class_name") or "mesa-trabalho-tecnico-marker"),
+            ),
+        )
+        marcador.options["mesaIgnoreBounds"] = bool(item.get("ignore_bounds"))
         marcador.add_to(camada)
 
 

backend/app/core/visualizacao/app.py

@@ -929,7 +929,7 @@ def criar_mapa(
         camada_indices.add_to(mapa)
 
     if avaliandos_tecnicos:
-        camada_trabalhos_tecnicos = folium.FeatureGroup(name="Avaliandos que usaram o modelo", show=True)
+        camada_trabalhos_tecnicos = folium.FeatureGroup(name="Avaliandos", show=True)
         add_trabalhos_tecnicos_markers(camada_trabalhos_tecnicos, avaliandos_tecnicos)
         camada_trabalhos_tecnicos.add_to(mapa)
 

backend/app/core/visualizacao/map_payload.py

@@ -0,0 +1,828 @@
+from __future__ import annotations
+
+from typing import Any
+
+import branca.colormap as cm
+import numpy as np
+import pandas as pd
+from scipy.interpolate import griddata
+
+from app.core.elaboracao.charts import (
+    _contorno_convexo_lng_lat,
+    _mascara_dentro_poligono,
+    _montar_popup_registro_em_colunas,
+    _normalizar_stops_cor,
+)
+from app.core.map_layers import build_trabalhos_tecnicos_marker_payloads
+from app.core.visualizacao.app import COR_PRINCIPAL, _aplicar_jitter_sobrepostos, formatar_monetario
+
+
+_LAT_ALIASES = {"lat", "latitude", "siat_latitude"}
+_LON_ALIASES = {"lon", "longitude", "long", "siat_longitude"}
+_TILE_LAYERS = [
+    {"id": "osm", "label": "OpenStreetMap", "url": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"},
+    {"id": "positron", "label": "Positron", "url": "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"},
+]
+
+
+def _primeira_serie_por_nome(dataframe: pd.DataFrame, nome_coluna: str) -> pd.Series | None:
+    matches = [i for i, c in enumerate(dataframe.columns) if str(c) == str(nome_coluna)]
+    if not matches:
+        return None
+    return dataframe.iloc[:, matches[0]]
+
+
+def _detectar_coluna(df: pd.DataFrame, aliases: set[str]) -> str | None:
+    for col in df.columns:
+        if str(col).lower() in aliases:
+            return str(col)
+    return None
+
+
+def _formatar_tooltip_valor(coluna: str | None, valor: Any) -> str:
+    if valor is None:
+        return "—"
+    try:
+        if pd.isna(valor):
+            return "—"
+    except Exception:
+        pass
+
+    col_norm = str(coluna or "").lower()
+    if isinstance(valor, (int, float, np.integer, np.floating)):
+        numero = float(valor)
+        if not np.isfinite(numero):
+            return "—"
+        if any(k in col_norm for k in ["valor", "preco", "vu", "vunit"]):
+            return formatar_monetario(numero)
+        return f"{numero:,.2f}".replace(",", "X").replace(".", ",").replace("X", ".")
+    return str(valor)
+
+
+def _resolver_bounds(df_mapa: pd.DataFrame, lat_key: str, lon_key: str) -> list[list[float]]:
+    df_bounds = df_mapa
+    if len(df_mapa) >= 8:
+        lat_vals = df_mapa[lat_key]
+        lon_vals = df_mapa[lon_key]
+        lat_med = float(lat_vals.median())
+        lon_med = float(lon_vals.median())
+        lat_mad = float((lat_vals - lat_med).abs().median())
+        lon_mad = float((lon_vals - lon_med).abs().median())
+        lat_span = float(lat_vals.max() - lat_vals.min())
+        lon_span = float(lon_vals.max() - lon_vals.min())
+        lat_scale = max(lat_mad, lat_span / 30.0, 1e-6)
+        lon_scale = max(lon_mad, lon_span / 30.0, 1e-6)
+        score = ((lat_vals - lat_med) / lat_scale) ** 2 + ((lon_vals - lon_med) / lon_scale) ** 2
+        lim = float(score.quantile(0.75))
+        df_core = df_mapa[score <= lim]
+        if len(df_core) >= max(5, int(len(df_mapa) * 0.45)):
+            df_bounds = df_core
+
+    if len(df_bounds) >= 50:
+        lat_min, lat_max = df_bounds[lat_key].quantile([0.01, 0.99]).tolist()
+        lon_min, lon_max = df_bounds[lon_key].quantile([0.01, 0.99]).tolist()
+    else:
+        lat_min, lat_max = float(df_bounds[lat_key].min()), float(df_bounds[lat_key].max())
+        lon_min, lon_max = float(df_bounds[lon_key].min()), float(df_bounds[lon_key].max())
+
+    if not np.isfinite(lat_min) or not np.isfinite(lat_max):
+        lat_min, lat_max = float(df_mapa[lat_key].min()), float(df_mapa[lat_key].max())
+    if not np.isfinite(lon_min) or not np.isfinite(lon_max):
+        lon_min, lon_max = float(df_mapa[lon_key].min()), float(df_mapa[lon_key].max())
+
+    if np.isclose(lat_min, lat_max):
+        lat_min = float(lat_min) - 0.0008
+        lat_max = float(lat_max) + 0.0008
+    if np.isclose(lon_min, lon_max):
+        lon_min = float(lon_min) - 0.0008
+        lon_max = float(lon_max) + 0.0008
+
+    return [[float(lat_min), float(lon_min)], [float(lat_max), float(lon_max)]]
+
+
+def _normalizar_bounds_lista(bounds: list[list[float]] | None) -> list[list[float]] | None:
+    coords = []
+    for item in bounds or []:
+        if not isinstance(item, (list, tuple)) or len(item) < 2:
+            continue
+        try:
+            lat = float(item[0])
+            lon = float(item[1])
+        except Exception:
+            continue
+        if not np.isfinite(lat) or not np.isfinite(lon):
+            continue
+        coords.append((lat, lon))
+
+    if not coords:
+        return None
+
+    lat_values = [lat for lat, _ in coords]
+    lon_values = [lon for _, lon in coords]
+    lat_min = min(lat_values)
+    lat_max = max(lat_values)
+    lon_min = min(lon_values)
+    lon_max = max(lon_values)
+
+    if np.isclose(lat_min, lat_max):
+        lat_min -= 0.0008
+        lat_max += 0.0008
+    if np.isclose(lon_min, lon_max):
+        lon_min -= 0.0008
+        lon_max += 0.0008
+
+    return [[float(lat_min), float(lon_min)], [float(lat_max), float(lon_max)]]
+
+
+def build_leaflet_payload(
+    *,
+    bounds: list[list[float]] | None,
+    center: list[float] | None = None,
+    legend: dict[str, Any] | None = None,
+    overlay_layers: list[dict[str, Any]] | None = None,
+    notice: dict[str, Any] | None = None,
+    show_bairros: bool = True,
+    bairros_geojson_url: str = "/api/visualizacao/map/bairros.geojson",
+) -> dict[str, Any] | None:
+    normalized_bounds = _normalizar_bounds_lista(bounds)
+    if normalized_bounds is None:
+        return None
+
+    if center and len(center) >= 2:
+        center_lat = float(center[0])
+        center_lon = float(center[1])
+    else:
+        center_lat = float((normalized_bounds[0][0] + normalized_bounds[1][0]) / 2.0)
+        center_lon = float((normalized_bounds[0][1] + normalized_bounds[1][1]) / 2.0)
+
+    final_overlay_layers = list(overlay_layers or [])
+    if show_bairros:
+        final_overlay_layers.insert(
+            0,
+            {
+                "id": "bairros",
+                "label": "Bairros",
+                "show": True,
+                "geojson_url": bairros_geojson_url,
+                "geojson_style": {
+                    "color": "#4c6882",
+                    "weight": 1.0,
+                    "fillColor": "#f39c12",
+                    "fillOpacity": 0.04,
+                },
+                "geojson_tooltip_properties": ["NOME", "BAIRRO", "NME_BAI", "NOME_BAIRRO"],
+                "geojson_tooltip_label": "Bairro",
+            },
+        )
+
+    return {
+        "type": "mesa_leaflet_payload",
+        "version": 1,
+        "center": [center_lat, center_lon],
+        "bounds": normalized_bounds,
+        "tile_layers": _TILE_LAYERS,
+        "controls": {
+            "fullscreen": True,
+            "measure": True,
+            "layer_control": True,
+        },
+        "radius_behavior": {
+            "min_radius": 1.6,
+            "max_radius": 52.0,
+            "reference_zoom": 12.0,
+            "growth_factor": 0.20,
+        },
+        "legend": legend,
+        "notice": notice,
+        "overlay_layers": final_overlay_layers,
+    }
+
+
+def build_elaboracao_map_payload(
+    df: pd.DataFrame,
+    *,
+    lat_col: str = "lat",
+    lon_col: str = "lon",
+    cor_col: str | None = None,
+    indice_destacado: Any = None,
+    tamanho_col: str | None = None,
+    modo: str | None = "pontos",
+    cor_vmin: float | None = None,
+    cor_vmax: float | None = None,
+    cor_caption: str | None = None,
+    cor_colors: list[str] | None = None,
+    cor_stops: list[float] | None = None,
+    cor_tick_values: list[float] | None = None,
+    cor_tick_labels: list[str] | None = None,
+    bairros_geojson_url: str = "/api/visualizacao/map/bairros.geojson",
+) -> dict[str, Any] | None:
+    modo_normalizado = str(modo or "pontos").strip().lower()
+
+    cols_lower = {str(c).lower(): c for c in df.columns}
+    lat_real = cols_lower.get(str(lat_col).lower()) if str(lat_col).lower() in cols_lower else None
+    lon_real = cols_lower.get(str(lon_col).lower()) if str(lon_col).lower() in cols_lower else None
+
+    if lat_real is None:
+        for nome in ["lat", "latitude", "siat_latitude"]:
+            if nome in cols_lower:
+                lat_real = cols_lower[nome]
+                break
+    if lon_real is None:
+        for nome in ["lon", "longitude", "long", "siat_longitude"]:
+            if nome in cols_lower:
+                lon_real = cols_lower[nome]
+                break
+    if lat_real is None or lon_real is None:
+        return None
+
+    df_mapa = df.copy()
+    df_mapa[lat_real] = pd.to_numeric(df_mapa[lat_real], errors="coerce")
+    df_mapa[lon_real] = pd.to_numeric(df_mapa[lon_real], errors="coerce")
+    df_mapa = df_mapa.dropna(subset=[lat_real, lon_real])
+    df_mapa = df_mapa[~((df_mapa[lat_real] == 0.0) & (df_mapa[lon_real] == 0.0))]
+    df_mapa = df_mapa[
+        (df_mapa[lat_real] >= -90.0)
+        & (df_mapa[lat_real] <= 90.0)
+        & (df_mapa[lon_real] >= -180.0)
+        & (df_mapa[lon_real] <= 180.0)
+    ].copy()
+    if df_mapa.empty:
+        return None
+
+    limite_pontos = 2500
+    total_pontos = len(df_mapa)
+    houve_amostragem = total_pontos > limite_pontos
+    if houve_amostragem:
+        df_mapa = df_mapa.sample(n=limite_pontos, random_state=42).copy()
+
+    centro_lat = float(df_mapa[lat_real].median())
+    centro_lon = float(df_mapa[lon_real].median())
+
+    colors = (
+        [str(item) for item in cor_colors if str(item).strip()]
+        if isinstance(cor_colors, list) and len(cor_colors) >= 2
+        else ["#2ecc71", "#a8e06c", "#f1c40f", "#e67e22", "#e74c3c"]
+    )
+    modo_calor = modo_normalizado == "calor" and tamanho_col is not None and tamanho_col in df_mapa.columns
+    modo_superficie = modo_normalizado == "superficie" and tamanho_col is not None and tamanho_col in df_mapa.columns
+    if modo_normalizado not in {"pontos", "calor", "superficie"}:
+        modo_normalizado = "pontos"
+
+    cor_col_resolvida = cor_col or tamanho_col
+    colormap = None
+    legend = None
+    if cor_col_resolvida and cor_col_resolvida in df_mapa.columns:
+        serie_cor = pd.to_numeric(df_mapa[cor_col_resolvida], errors="coerce")
+        vmin = float(cor_vmin) if cor_vmin is not None and np.isfinite(cor_vmin) else float(serie_cor.min())
+        vmax = float(cor_vmax) if cor_vmax is not None and np.isfinite(cor_vmax) else float(serie_cor.max())
+        if np.isfinite(vmin) and np.isfinite(vmax):
+            if np.isclose(vmin, vmax):
+                vmax = float(vmin) + 1.0
+            color_index = _normalizar_stops_cor(cor_stops, colors, float(vmin), float(vmax))
+            colormap_kwargs: dict[str, Any] = {
+                "colors": colors,
+                "vmin": float(vmin),
+                "vmax": float(vmax),
+                "caption": str(cor_caption or cor_col_resolvida),
+            }
+            if color_index is not None:
+                colormap_kwargs["index"] = color_index
+            colormap = cm.LinearColormap(**colormap_kwargs)
+            legend = {
+                "title": str(cor_caption or cor_col_resolvida),
+                "vmin": float(vmin),
+                "vmax": float(vmax),
+                "colors": colors,
+            }
+            if (
+                isinstance(cor_tick_values, list)
+                and isinstance(cor_tick_labels, list)
+                and len(cor_tick_values) == len(cor_tick_labels)
+                and len(cor_tick_values) > 1
+            ):
+                try:
+                    legend["tick_values"] = [float(item) for item in cor_tick_values]
+                    legend["tick_labels"] = [str(item) for item in cor_tick_labels]
+                except (TypeError, ValueError):
+                    pass
+
+    raio_min, raio_max = 3.0, 18.0
+    tamanho_func = None
+    if tamanho_col and tamanho_col in df_mapa.columns:
+        serie_tamanho = pd.to_numeric(df_mapa[tamanho_col], errors="coerce")
+        t_min = float(serie_tamanho.min())
+        t_max = float(serie_tamanho.max())
+        if np.isfinite(t_min) and np.isfinite(t_max):
+            if t_max > t_min:
+                tamanho_func = (
+                    lambda v, _min=t_min, _max=t_max: raio_min
+                    + (v - _min) / (_max - _min) * (raio_max - raio_min)
+                )
+            else:
+                tamanho_func = lambda _v: (raio_min + raio_max) / 2.0
+
+    mostrar_indices = not modo_calor and not modo_superficie and len(df_mapa) <= 800
+    lat_plot_col = "__mesa_lat_plot__"
+    lon_plot_col = "__mesa_lon_plot__"
+    if not modo_calor and not modo_superficie:
+        df_plot_pontos = _aplicar_jitter_sobrepostos(
+            df_mapa,
+            lat_col=str(lat_real),
+            lon_col=str(lon_real),
+            lat_plot_col=lat_plot_col,
+            lon_plot_col=lon_plot_col,
+        )
+    else:
+        df_plot_pontos = df_mapa.copy()
+        df_plot_pontos[lat_plot_col] = df_plot_pontos[lat_real]
+        df_plot_pontos[lon_plot_col] = df_plot_pontos[lon_real]
+
+    overlay_layers: list[dict[str, Any]] = []
+    if modo_calor and tamanho_col and tamanho_col in df_mapa.columns:
+        pesos = pd.to_numeric(df_mapa[tamanho_col], errors="coerce")
+        mask_pesos = np.isfinite(pesos.to_numpy())
+        df_calor = df_mapa.loc[mask_pesos, [lat_real, lon_real]].copy()
+        if not df_calor.empty:
+            pesos_validos = pesos.loc[df_calor.index].to_numpy(dtype=float)
+            fixed_scale = (
+                cor_vmin is not None
+                and cor_vmax is not None
+                and np.isfinite(cor_vmin)
+                and np.isfinite(cor_vmax)
+                and float(cor_vmax) > float(cor_vmin)
+            )
+            if fixed_scale:
+                peso_min = float(cor_vmin)
+                peso_max = float(cor_vmax)
+                pesos_clip = np.clip(pesos_validos, peso_min, peso_max)
+                pesos_norm = (pesos_clip - peso_min) / (peso_max - peso_min)
+            else:
+                peso_min = float(np.min(pesos_validos))
+                peso_max = float(np.max(pesos_validos))
+                if np.isfinite(peso_min) and np.isfinite(peso_max) and peso_max > peso_min:
+                    pesos_norm = 0.1 + 0.9 * (pesos_validos - peso_min) / (peso_max - peso_min)
+                else:
+                    pesos_norm = np.ones_like(pesos_validos)
+            gradient = None
+            if len(colors) >= 2:
+                if (
+                    cor_vmin is not None
+                    and cor_vmax is not None
+                    and np.isfinite(cor_vmin)
+                    and np.isfinite(cor_vmax)
+                    and float(cor_vmax) > float(cor_vmin)
+                ):
+                    color_index = _normalizar_stops_cor(cor_stops, colors, float(cor_vmin), float(cor_vmax))
+                    if color_index is not None:
+                        gradient = {}
+                        for stop, color in zip(color_index, colors):
+                            ratio = (float(stop) - float(cor_vmin)) / (float(cor_vmax) - float(cor_vmin))
+                            gradient[float(np.clip(ratio, 0.0, 1.0))] = color
+                    elif len(colors) == 2:
+                        gradient = {0.0: colors[0], 1.0: colors[1]}
+                    else:
+                        gradient = {i / (len(colors) - 1): colors[i] for i in range(len(colors))}
+                elif len(colors) == 2:
+                    gradient = {0.0: colors[0], 1.0: colors[1]}
+                else:
+                    gradient = {i / (len(colors) - 1): colors[i] for i in range(len(colors))}
+            overlay_layers.append(
+                {
+                    "id": "mapa_calor",
+                    "label": "Mapa de calor",
+                    "show": True,
+                    "heatmap": {
+                        "points": [
+                            {
+                                "lat": float(df_calor.iloc[idx][lat_real]),
+                                "lon": float(df_calor.iloc[idx][lon_real]),
+                                "weight": float(pesos_norm[idx]),
+                            }
+                            for idx in range(len(df_calor))
+                        ],
+                        "radius": 20,
+                        "blur": 18,
+                        "min_opacity": 0.28,
+                        "max_zoom": 17,
+                        "gradient": gradient,
+                    },
+                }
+            )
+    elif modo_superficie and tamanho_col and tamanho_col in df_mapa.columns:
+        lats = pd.to_numeric(df_mapa[lat_real], errors="coerce").to_numpy(dtype=float)
+        lons = pd.to_numeric(df_mapa[lon_real], errors="coerce").to_numpy(dtype=float)
+        valores = pd.to_numeric(df_mapa[tamanho_col], errors="coerce").to_numpy(dtype=float)
+        mask_valid = np.isfinite(lats) & np.isfinite(lons) & np.isfinite(valores)
+        if mask_valid.sum() >= 6:
+            lats = lats[mask_valid]
+            lons = lons[mask_valid]
+            valores = valores[mask_valid]
+            contorno = _contorno_convexo_lng_lat(lons, lats)
+            if contorno is not None:
+                lon_min = float(np.min(contorno[:, 0]))
+                lon_max = float(np.max(contorno[:, 0]))
+                lat_min = float(np.min(contorno[:, 1]))
+                lat_max = float(np.max(contorno[:, 1]))
+                if not np.isclose(lon_min, lon_max) and not np.isclose(lat_min, lat_max):
+                    n_obs = len(valores)
+                    n_grid = 46 if n_obs <= 400 else (40 if n_obs <= 1200 else 34)
+                    grid_lon = np.linspace(lon_min, lon_max, n_grid)
+                    grid_lat = np.linspace(lat_min, lat_max, n_grid)
+                    mesh_lon, mesh_lat = np.meshgrid(grid_lon, grid_lat)
+                    pontos = np.column_stack([lons, lats])
+                    try:
+                        superficie = griddata(pontos, valores, (mesh_lon, mesh_lat), method="linear")
+                    except Exception:
+                        superficie = None
+                    if superficie is not None:
+                        superficie = np.asarray(superficie, dtype=float)
+                        if np.isnan(superficie).all():
+                            try:
+                                superficie = griddata(pontos, valores, (mesh_lon, mesh_lat), method="nearest")
+                            except Exception:
+                                superficie = None
+                        elif np.isnan(superficie).any():
+                            try:
+                                nearest = griddata(pontos, valores, (mesh_lon, mesh_lat), method="nearest")
+                            except Exception:
+                                nearest = None
+                            if nearest is not None:
+                                superficie = np.where(np.isfinite(superficie), superficie, np.asarray(nearest, dtype=float))
+                        if superficie is not None:
+                            superficie = np.asarray(superficie, dtype=float)
+                            mascara = _mascara_dentro_poligono(mesh_lon, mesh_lat, contorno)
+                            superficie = np.where(mascara, superficie, np.nan)
+                            if np.isfinite(superficie).any():
+                                vmin_sup = float(cor_vmin) if cor_vmin is not None and np.isfinite(cor_vmin) else float(np.nanmin(superficie))
+                                vmax_sup = float(cor_vmax) if cor_vmax is not None and np.isfinite(cor_vmax) else float(np.nanmax(superficie))
+                                if np.isfinite(vmin_sup) and np.isfinite(vmax_sup):
+                                    if np.isclose(vmin_sup, vmax_sup):
+                                        vmax_sup = vmin_sup + 1.0
+                                    color_index = _normalizar_stops_cor(cor_stops, colors, vmin_sup, vmax_sup)
+                                    colormap_kwargs = {
+                                        "colors": colors,
+                                        "vmin": float(vmin_sup),
+                                        "vmax": float(vmax_sup),
+                                        "caption": str(cor_caption or f"{tamanho_col} (superfície)"),
+                                    }
+                                    if color_index is not None:
+                                        colormap_kwargs["index"] = color_index
+                                    colormap = cm.LinearColormap(**colormap_kwargs)
+                                    legend = {
+                                        "title": str(cor_caption or f"{tamanho_col} (superfície)"),
+                                        "vmin": float(vmin_sup),
+                                        "vmax": float(vmax_sup),
+                                        "colors": colors,
+                                    }
+                                    if (
+                                        isinstance(cor_tick_values, list)
+                                        and isinstance(cor_tick_labels, list)
+                                        and len(cor_tick_values) == len(cor_tick_labels)
+                                        and len(cor_tick_values) > 1
+                                    ):
+                                        try:
+                                            legend["tick_values"] = [float(item) for item in cor_tick_values]
+                                            legend["tick_labels"] = [str(item) for item in cor_tick_labels]
+                                        except (TypeError, ValueError):
+                                            pass
+                                    centros_lon = (grid_lon[:-1] + grid_lon[1:]) / 2.0
+                                    centros_lat = (grid_lat[:-1] + grid_lat[1:]) / 2.0
+                                    centro_mesh_lon, centro_mesh_lat = np.meshgrid(centros_lon, centros_lat)
+                                    mascara_centros = _mascara_dentro_poligono(centro_mesh_lon, centro_mesh_lat, contorno)
+                                    valores_celula = (
+                                        superficie[:-1, :-1]
+                                        + superficie[1:, :-1]
+                                        + superficie[:-1, 1:]
+                                        + superficie[1:, 1:]
+                                    ) / 4.0
+                                    shapes = []
+                                    for i in range(valores_celula.shape[0]):
+                                        for j in range(valores_celula.shape[1]):
+                                            if not mascara_centros[i, j]:
+                                                continue
+                                            valor = valores_celula[i, j]
+                                            if not np.isfinite(valor):
+                                                continue
+                                            cor = str(colormap(float(valor)))
+                                            valor_fmt = f"{float(valor):.3f}".replace(".", ",")
+                                            shapes.append(
+                                                {
+                                                    "type": "polygon",
+                                                    "coords": [
+                                                        [float(grid_lat[i]), float(grid_lon[j])],
+                                                        [float(grid_lat[i]), float(grid_lon[j + 1])],
+                                                        [float(grid_lat[i + 1]), float(grid_lon[j + 1])],
+                                                        [float(grid_lat[i + 1]), float(grid_lon[j])],
+                                                    ],
+                                                    "color": cor,
+                                                    "weight": 0,
+                                                    "fill": True,
+                                                    "fill_color": cor,
+                                                    "fill_opacity": 0.6,
+                                                    "tooltip_html": (
+                                                        f"<div style='font-family:\"Segoe UI\",Arial,sans-serif; font-size:13px;'>"
+                                                        f"{str(tamanho_col)} interpolado: <b>{valor_fmt}</b>"
+                                                        "</div>"
+                                                    ),
+                                                }
+                                            )
+                                    if shapes:
+                                        overlay_layers.append(
+                                            {
+                                                "id": "superficie_continua",
+                                                "label": "Superfície contínua",
+                                                "show": True,
+                                                "shapes": shapes,
+                                            }
+                                        )
+    else:
+        popup_cols: list[str]
+        if len(df_plot_pontos) <= 1200:
+            popup_cols = [str(c) for c in df_plot_pontos.columns]
+        elif tamanho_col and tamanho_col in df_plot_pontos.columns:
+            popup_cols = [str(tamanho_col)]
+        else:
+            popup_cols = []
+
+        market_points: list[dict[str, Any]] = []
+        indices_markers: list[dict[str, Any]] = []
+        for marker_ordem, (idx, row) in enumerate(df_plot_pontos.iterrows()):
+            idx_display = int(idx) if isinstance(idx, (int, np.integer)) else marker_ordem + 1
+            popup_html, popup_width = _montar_popup_registro_em_colunas(
+                idx_display,
+                row,
+                popup_cols,
+                max_itens_coluna=8,
+                popup_uid=f"mesa-pop-elab-{marker_ordem}",
+            )
+            tooltip_html = (
+                "<div style='font-family:\"Segoe UI\",Arial,sans-serif; font-size:14px; line-height:1.7; padding:2px 4px;'>"
+                f"<b>Índice {idx_display}</b>"
+            )
+            if tamanho_col and tamanho_col in df_plot_pontos.columns:
+                valor_tooltip = row[tamanho_col]
+                valor_texto = (
+                    f"{float(valor_tooltip):.2f}"
+                    if isinstance(valor_tooltip, (int, float, np.integer, np.floating)) and np.isfinite(float(valor_tooltip))
+                    else str(valor_tooltip)
+                )
+                tooltip_html += (
+                    f"<br><span style='color:#555;'>{str(tamanho_col)}:</span> "
+                    f"<b>{valor_texto}</b>"
+                )
+            tooltip_html += "</div>"
+
+            cor = COR_PRINCIPAL
+            if colormap and cor_col_resolvida and cor_col_resolvida in df_mapa.columns:
+                valor_cor = pd.to_numeric(pd.Series([row.get(cor_col_resolvida)]), errors="coerce").iloc[0]
+                if pd.notna(valor_cor):
+                    cor = str(colormap(float(valor_cor)))
+
+            if idx == indice_destacado:
+                raio = raio_max + 4.0
+            elif tamanho_func and tamanho_col and tamanho_col in row.index and pd.notna(row[tamanho_col]):
+                raio = float(tamanho_func(float(row[tamanho_col])))
+            else:
+                raio = 4.0
+            stroke_weight = 3.0 if idx == indice_destacado else 1.0
+            fill_opacity = 0.8 if idx == indice_destacado else 0.6
+
+            market_points.append(
+                {
+                    "lat": float(row[lat_plot_col]),
+                    "lon": float(row[lon_plot_col]),
+                    "indice": idx_display,
+                    "color": cor,
+                    "base_radius": float(max(1.0, raio)),
+                    "stroke_color": "#000000",
+                    "stroke_weight": float(stroke_weight),
+                    "fill_opacity": float(fill_opacity),
+                    "tooltip_html": tooltip_html,
+                    "popup_html": popup_html,
+                    "popup_max_width": int(popup_width),
+                }
+            )
+
+            if mostrar_indices:
+                indices_markers.append(
+                    {
+                        "lat": float(row[lat_plot_col]),
+                        "lon": float(row[lon_plot_col]),
+                        "marker_html": (
+                            '<div style="transform: translate(10px, -14px);display:inline-block;background: rgba(255, 255, 255, 0.9);'
+                            + 'border: 1px solid rgba(28, 45, 66, 0.45);border-radius: 10px;padding: 1px 6px;font-size: 11px;'
+                            + 'font-weight: 700;line-height: 1.2;color: #1f2f44;white-space: nowrap;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);'
+                            + 'pointer-events: none;">'
+                            + f"{idx_display}"
+                            + "</div>"
+                        ),
+                        "icon_size": [72, 24],
+                        "icon_anchor": [0, 0],
+                        "class_name": "mesa-indice-label",
+                        "interactive": False,
+                        "keyboard": False,
+                    }
+                )
+
+        overlay_layers.append(
+            {
+                "id": "mercado",
+                "label": "Mercado",
+                "show": True,
+                "points": market_points,
+            }
+        )
+        if mostrar_indices and indices_markers:
+            overlay_layers.append(
+                {
+                    "id": "indices",
+                    "label": "Índices",
+                    "show": False,
+                    "markers": indices_markers,
+                }
+            )
+
+    notice = None
+    if houve_amostragem:
+        notice = {
+            "message": f"Exibindo {len(df_mapa)} de {total_pontos} pontos para melhor desempenho.",
+            "position": "topright",
+        }
+
+    return build_leaflet_payload(
+        bounds=_resolver_bounds(df_mapa, str(lat_real), str(lon_real)),
+        center=[centro_lat, centro_lon],
+        legend=legend,
+        notice=notice,
+        overlay_layers=overlay_layers,
+        show_bairros=True,
+        bairros_geojson_url=bairros_geojson_url,
+    )
+
+
+def build_visualizacao_map_payload(
+    df: pd.DataFrame,
+    *,
+    cor_col: str | None = None,
+    tamanho_col: str | None = None,
+    col_y: str | None = None,
+    avaliandos_tecnicos: list[dict[str, Any]] | None = None,
+    bairros_geojson_url: str = "/api/visualizacao/map/bairros.geojson",
+) -> dict[str, Any] | None:
+    lat_real = _detectar_coluna(df, _LAT_ALIASES)
+    lon_real = _detectar_coluna(df, _LON_ALIASES)
+    if lat_real is None or lon_real is None:
+        return None
+
+    df_mapa = df.copy()
+    lat_key = "__mesa_lat__"
+    lon_key = "__mesa_lon__"
+    lat_serie = _primeira_serie_por_nome(df_mapa, lat_real)
+    lon_serie = _primeira_serie_por_nome(df_mapa, lon_real)
+    if lat_serie is None or lon_serie is None:
+        return None
+
+    df_mapa[lat_key] = pd.to_numeric(lat_serie, errors="coerce")
+    df_mapa[lon_key] = pd.to_numeric(lon_serie, errors="coerce")
+    df_mapa = df_mapa.dropna(subset=[lat_key, lon_key])
+    df_mapa = df_mapa[
+        (df_mapa[lat_key] >= -90.0)
+        & (df_mapa[lat_key] <= 90.0)
+        & (df_mapa[lon_key] >= -180.0)
+        & (df_mapa[lon_key] <= 180.0)
+    ].copy()
+    if df_mapa.empty:
+        return None
+
+    centro_lat = float(df_mapa[lat_key].median())
+    centro_lon = float(df_mapa[lon_key].median())
+
+    cor_col_resolvida = cor_col
+    if tamanho_col and tamanho_col != "Visualização Padrão" and not cor_col_resolvida:
+        cor_col_resolvida = tamanho_col
+
+    colormap = None
+    cor_key = None
+    legend = None
+    if cor_col_resolvida and cor_col_resolvida in df_mapa.columns:
+        serie_cor = _primeira_serie_por_nome(df_mapa, cor_col_resolvida)
+        if serie_cor is not None:
+            cor_key = "__mesa_cor__"
+            df_mapa[cor_key] = pd.to_numeric(serie_cor, errors="coerce")
+            vmin = df_mapa[cor_key].min()
+            vmax = df_mapa[cor_key].max()
+            if pd.notna(vmin) and pd.notna(vmax):
+                colormap = cm.LinearColormap(
+                    colors=["#2ecc71", "#a8e06c", "#f1c40f", "#e67e22", "#e74c3c"],
+                    vmin=vmin,
+                    vmax=vmax,
+                    caption=cor_col_resolvida,
+                )
+                legend = {
+                    "title": str(cor_col_resolvida),
+                    "vmin": float(vmin),
+                    "vmax": float(vmax),
+                    "colors": ["#2ecc71", "#a8e06c", "#f1c40f", "#e67e22", "#e74c3c"],
+                }
+
+    raio_min, raio_max = 3.0, 18.0
+    tamanho_func = None
+    tamanho_key = None
+    if tamanho_col and tamanho_col != "Visualização Padrão" and tamanho_col in df_mapa.columns:
+        serie_tamanho = _primeira_serie_por_nome(df_mapa, tamanho_col)
+        if serie_tamanho is not None:
+            tamanho_key = "__mesa_tamanho__"
+            df_mapa[tamanho_key] = pd.to_numeric(serie_tamanho, errors="coerce")
+            t_min = df_mapa[tamanho_key].min()
+            t_max = df_mapa[tamanho_key].max()
+            if pd.notna(t_min) and pd.notna(t_max):
+                if t_max > t_min:
+                    tamanho_func = (
+                        lambda v, _min=t_min, _max=t_max: raio_min
+                        + (v - _min) / (_max - _min) * (raio_max - raio_min)
+                    )
+                else:
+                    tamanho_func = lambda v: (raio_min + raio_max) / 2.0
+
+    show_indices = False
+    lat_plot_key = "__mesa_lat_plot__"
+    lon_plot_key = "__mesa_lon_plot__"
+    df_plot_pontos = _aplicar_jitter_sobrepostos(
+        df_mapa,
+        lat_col=lat_key,
+        lon_col=lon_key,
+        lat_plot_col=lat_plot_key,
+        lon_plot_col=lon_plot_key,
+    )
+
+    tooltip_col = None
+    tooltip_key = None
+    if tamanho_key:
+        tooltip_col = tamanho_col
+        tooltip_key = tamanho_key
+    elif col_y and col_y in df_mapa.columns:
+        serie_tooltip = _primeira_serie_por_nome(df_mapa, col_y)
+        if serie_tooltip is not None:
+            tooltip_col = col_y
+            tooltip_key = "__mesa_tooltip__"
+            df_mapa[tooltip_key] = serie_tooltip
+            df_plot_pontos[tooltip_key] = df_mapa.loc[df_plot_pontos.index, tooltip_key]
+
+    total_pontos_plot = len(df_plot_pontos)
+    raio_padrao = 4.0 if total_pontos_plot <= 2500 else 3.0
+
+    market_points: list[dict[str, Any]] = []
+    for idx, row in df_plot_pontos.iterrows():
+        cor = colormap(row[cor_key]) if colormap and cor_key and pd.notna(row[cor_key]) else COR_PRINCIPAL
+        if tamanho_func and tamanho_key and pd.notna(row[tamanho_key]):
+            raio = float(tamanho_func(row[tamanho_key]))
+        else:
+            raio = raio_padrao
+
+        idx_display = int(row["index"]) if "index" in row.index else int(idx)
+        tooltip_payload = {
+            "title": f"Índice {idx_display}",
+            "label": str(tooltip_col or ""),
+            "value": (
+                _formatar_tooltip_valor(str(tooltip_col or ""), row[tooltip_key])
+                if tooltip_col and tooltip_key and tooltip_key in row.index
+                else ""
+            ),
+        }
+        row_id_raw = row["__mesa_row_id__"] if "__mesa_row_id__" in row.index else None
+        market_points.append(
+            {
+                "lat": float(row[lat_plot_key]),
+                "lon": float(row[lon_plot_key]),
+                "indice": idx_display,
+                "row_id": int(row_id_raw) if row_id_raw is not None and pd.notna(row_id_raw) else None,
+                "color": str(cor),
+                "base_radius": float(max(1.0, raio)),
+                "tooltip": tooltip_payload,
+            }
+        )
+
+    return {
+        "type": "mesa_leaflet_payload",
+        "version": 1,
+        "center": [centro_lat, centro_lon],
+        "bounds": _resolver_bounds(df_mapa, lat_key, lon_key),
+        "tile_layers": _TILE_LAYERS,
+        "controls": {
+            "fullscreen": True,
+            "measure": True,
+            "layer_control": True,
+        },
+        "radius_behavior": {
+            "min_radius": 1.6,
+            "max_radius": 52.0,
+            "reference_zoom": 12.0,
+            "growth_factor": 0.20,
+        },
+        "show_indices": show_indices,
+        "show_bairros": True,
+        "bairros_geojson_url": bairros_geojson_url,
+        "legend": legend,
+        "market_points": market_points,
+        "trabalhos_tecnicos_points": build_trabalhos_tecnicos_marker_payloads(avaliandos_tecnicos),
+    }

backend/app/services/elaboracao_service.py

@@ -53,6 +53,7 @@ from app.core.elaboracao.formatadores import (
     formatar_micronumerosidade_html,
     formatar_outliers_anteriores_html,
 )
+from app.core.visualizacao.map_payload import build_elaboracao_map_payload
 from app.models.session import SessionState
 from app.runtime_config import resolve_core_path
 from app.services import model_repository
@@ -899,6 +900,19 @@ def _render_mapa_if_enabled(session: SessionState, df: pd.DataFrame | None, **kw
     return charts.criar_mapa(df, **kwargs)
 
 
+def _build_mapa_payload_if_enabled(session: SessionState, df: pd.DataFrame | None, **kwargs: Any) -> dict[str, Any] | None:
+    if not session.mapa_habilitado or df is None:
+        return None
+    return build_elaboracao_map_payload(df, **kwargs)
+
+
+def _mapa_bundle_if_enabled(session: SessionState, df: pd.DataFrame | None, **kwargs: Any) -> dict[str, Any]:
+    return {
+        "mapa_html": _render_mapa_if_enabled(session, df, **kwargs),
+        "mapa_payload": _build_mapa_payload_if_enabled(session, df, **kwargs),
+    }
+
+
 def classificar_tipos_variaveis_x(session: SessionState, colunas_x: list[str] | None) -> dict[str, Any]:
     df = session.df_original if session.df_original is not None else session.df_filtrado
     if df is None:
@@ -1020,11 +1034,11 @@ def _set_dataframe_base(
 
     colunas_numericas = [str(c) for c in obter_colunas_numericas(df)]
     coluna_y_padrao = identificar_coluna_y_padrao(df)
-    mapa_html = _render_mapa_if_enabled(session, df)
+    mapa_bundle = _mapa_bundle_if_enabled(session, df)
 
     return {
         "dados": dataframe_to_payload(df, decimals=4),
-        "mapa_html": mapa_html,
+        **mapa_bundle,
         "colunas_numericas": colunas_numericas,
         "coluna_y_padrao": coluna_y_padrao,
         "colunas_area_candidatas": detectar_colunas_area(df),
@@ -1308,7 +1322,7 @@ def apply_selection(
         },
         "transformacao_y": session.transformacao_y,
         "transform_fields": transform_fields,
-        "mapa_html": _render_mapa_if_enabled(session, df_filtrado),
+        **_mapa_bundle_if_enabled(session, df_filtrado),
         "contexto": _selection_context(session),
     }
 
@@ -2328,16 +2342,25 @@ def detalhes_knn_avaliacao_elaboracao(session: SessionState, valores_x: dict[str
             tabela_payload = dataframe_to_payload(df_vizinhos, decimals=4, max_rows=None)
 
     # Import local evita acoplamento no carregamento inicial do módulo.
-    from app.services.visualizacao_service import _coordenadas_de_valores_knn, _criar_mapa_knn_destaque
+    from app.services.visualizacao_service import _coordenadas_de_valores_knn, _criar_mapa_knn_destaque, _criar_payload_knn_destaque
 
     aval_lat, aval_lon = _coordenadas_de_valores_knn(entradas)
-    mapa_html = _criar_mapa_knn_destaque(
+    mapa_payload = _criar_payload_knn_destaque(
         df_knn,
         posicoes_vizinhos,
         coluna_y_knn,
         avaliando_lat=aval_lat,
         avaliando_lon=aval_lon,
     )
+    mapa_html = ""
+    if mapa_payload is None:
+        mapa_html = _criar_mapa_knn_destaque(
+            df_knn,
+            posicoes_vizinhos,
+            coluna_y_knn,
+            avaliando_lat=aval_lat,
+            avaliando_lon=aval_lon,
+        )
     avaliando = [{"variavel": str(col), "valor": entradas.get(col)} for col in colunas_x]
     if session.coluna_area and session.coluna_area not in colunas_x:
         avaliando.append({"variavel": f"{session.coluna_area} (area)", "valor": valor_area})
@@ -2350,6 +2373,7 @@ def detalhes_knn_avaliacao_elaboracao(session: SessionState, valores_x: dict[str
     return sanitize_value(
         {
             "mapa_html": mapa_html,
+            "mapa_payload": mapa_payload,
             "avaliando": avaliando,
             "vizinhos_tabela": tabela_payload,
             "knn": resultado_knn,
@@ -2612,7 +2636,8 @@ def atualizar_mapa(session: SessionState, var_mapa: str | None, modo_mapa: str |
         modo = "pontos"
     session.mapa_habilitado = True
     mapa_html = charts.criar_mapa(df, tamanho_col=tamanho_col, modo=modo)
-    return {"mapa_html": mapa_html}
+    mapa_payload = build_elaboracao_map_payload(df, tamanho_col=tamanho_col, modo=modo)
+    return {"mapa_html": mapa_html, "mapa_payload": mapa_payload}
 
 
 def _normalizar_extremo_abs_residuos(valor: float | None) -> float | None:
@@ -2690,8 +2715,20 @@ def atualizar_mapa_residuos(
         cor_tick_values=ticks_valores,
         cor_tick_labels=ticks_labels,
     )
+    mapa_payload = build_elaboracao_map_payload(
+        df,
+        tamanho_col=var_escolhida,
+        modo=modo,
+        cor_vmin=cor_vmin,
+        cor_vmax=cor_vmax,
+        cor_caption=caption,
+        cor_colors=["#2e7d32", "#f1c40f", "#ffffff", "#f1c40f", "#c62828"],
+        cor_tick_values=ticks_valores,
+        cor_tick_labels=ticks_labels,
+    )
     return {
         "mapa_html": mapa_html,
+        "mapa_payload": mapa_payload,
         "variavel_mapa": var_escolhida,
         "modo_mapa": modo,
         "escala_extremo_abs": extremo_abs,
@@ -2759,7 +2796,7 @@ def mapear_coordenadas_manualmente(session: SessionState, col_lat: str, col_lon:
 
     return {
         "status": "Coordenadas mapeadas com sucesso",
-        "mapa_html": _render_mapa_if_enabled(session, df_filtrado),
+        **_mapa_bundle_if_enabled(session, df_filtrado),
         "dados": dataframe_to_payload(df_filtrado, decimals=4),
         "coords": _build_coords_payload(df_novo, True),
     }
@@ -2790,7 +2827,7 @@ def geocodificar(session: SessionState, col_cdlog: str, col_num: str, auto_200:
         "status_html": status_html,
         "falhas_html": falhas_html,
         "falhas_para_correcao": dataframe_to_payload(df_correcoes, decimals=None),
-        "mapa_html": _render_mapa_if_enabled(session, session.df_filtrado),
+        **_mapa_bundle_if_enabled(session, session.df_filtrado),
         "dados": dataframe_to_payload(session.df_filtrado, decimals=4),
         "coords": _build_coords_payload(session.df_original, True),
     }
@@ -2822,7 +2859,7 @@ def reiniciar_geocodificacao(session: SessionState) -> dict[str, Any]:
         "status_html": "",
         "falhas_html": "",
         "falhas_para_correcao": dataframe_to_payload(pd.DataFrame(), decimals=None),
-        "mapa_html": _render_mapa_if_enabled(session, session.df_filtrado),
+        **_mapa_bundle_if_enabled(session, session.df_filtrado),
         "dados": dataframe_to_payload(session.df_filtrado, decimals=4),
         "coords": _build_coords_payload(df_base, tem_coords),
     }
@@ -2849,7 +2886,7 @@ def excluir_coordenadas_para_geocodificacao(session: SessionState) -> dict[str,
         "status_html": "",
         "falhas_html": "",
         "falhas_para_correcao": dataframe_to_payload(pd.DataFrame(), decimals=None),
-        "mapa_html": _render_mapa_if_enabled(session, session.df_filtrado),
+        **_mapa_bundle_if_enabled(session, session.df_filtrado),
         "dados": dataframe_to_payload(session.df_filtrado, decimals=4),
         "coords": _build_coords_payload(session.df_original, False),
     }
@@ -2920,7 +2957,7 @@ def aplicar_correcoes_geocodificacao(
         "status_html": status_html,
         "falhas_html": falhas_html,
         "falhas_para_correcao": dataframe_to_payload(df_correcoes, decimals=None),
-        "mapa_html": _render_mapa_if_enabled(session, session.df_filtrado),
+        **_mapa_bundle_if_enabled(session, session.df_filtrado),
         "dados": dataframe_to_payload(session.df_filtrado, decimals=4),
         "coords": _build_coords_payload(session.df_original, True),
     }
@@ -2938,7 +2975,7 @@ def limpar_historico_outliers(session: SessionState) -> dict[str, Any]:
 
     return {
         "dados": dataframe_to_payload(session.df_filtrado, decimals=4),
-        "mapa_html": _render_mapa_if_enabled(session, session.df_filtrado),
+        **_mapa_bundle_if_enabled(session, session.df_filtrado),
         "outliers_html": "",
         "resumo_outliers": "Excluidos: 0 | A excluir: 0 | A reincluir: 0 | Total: 0",
         "contexto": _selection_context(session),

backend/app/services/pesquisa_service.py

@@ -24,9 +24,11 @@ from app.core.shapefile_runtime import load_attribute_records
 from app.core.elaboracao.core import _migrar_pacote_v1_para_v2, normalizar_observacao_modelo
 from app.core.map_layers import (
     add_bairros_layer,
+    build_trabalhos_tecnicos_marker_payloads,
     add_trabalhos_tecnicos_markers,
     add_zoom_responsive_circle_markers,
 )
+from app.core.visualizacao.map_payload import build_leaflet_payload
 from app.portable_runtime_log import append_runtime_log
 from app.runtime_config import resolve_core_path
 from app.services import model_repository, trabalhos_tecnicos_service
@@ -227,15 +229,19 @@ _ADMIN_CONFIG_LOCK = Lock()
 _CACHE_SOURCE_SIGNATURE: str | None = None
 _ADMIN_FONTES_SESSION: dict[str, list[str]] = {}
 _CATALOGO_VIAS_CACHE: list[dict[str, Any]] | None = None
+_FAMILIAS_VERSOES_CACHE: dict[str, list[dict[str, Any]]] | None = None
+_FAMILIAS_VERSOES_SIGNATURE: tuple[str, tuple[tuple[str, int, int], ...]] | None = None
 
 
 def _resolver_repositorio_modelos() -> model_repository.ModelRepositoryResolution:
-    global _CACHE_SOURCE_SIGNATURE
+    global _CACHE_SOURCE_SIGNATURE, _FAMILIAS_VERSOES_CACHE, _FAMILIAS_VERSOES_SIGNATURE
     resolved = model_repository.resolve_model_repository()
     with _CACHE_LOCK:
         if _CACHE_SOURCE_SIGNATURE != resolved.signature:
             _CACHE.clear()
             _CACHE_SOURCE_SIGNATURE = resolved.signature
+            _FAMILIAS_VERSOES_CACHE = None
+            _FAMILIAS_VERSOES_SIGNATURE = None
     return resolved
 
 
@@ -622,6 +628,46 @@ def _montar_familias_versoes_modelos(caminhos_modelo: list[Path]) -> dict[str, l
     return familias
 
 
+def _assinatura_modelos_familias(caminhos_modelo: list[Path]) -> tuple[tuple[str, int, int], ...]:
+    assinatura: list[tuple[str, int, int]] = []
+    for caminho in sorted(caminhos_modelo, key=lambda item: item.name.lower()):
+        try:
+            stat = caminho.stat()
+        except OSError:
+            continue
+        assinatura.append((caminho.name, int(stat.st_mtime_ns), int(stat.st_size)))
+    return tuple(assinatura)
+
+
+def obter_familias_versoes_modelos_cache(caminhos_modelo: list[Path] | None = None) -> dict[str, list[dict[str, Any]]]:
+    global _FAMILIAS_VERSOES_CACHE, _FAMILIAS_VERSOES_SIGNATURE
+
+    resolved = _resolver_repositorio_modelos()
+    caminhos = list(caminhos_modelo) if caminhos_modelo is not None else list(resolved.modelos_dir.glob("*.dai"))
+    assinatura = (resolved.signature, _assinatura_modelos_familias(caminhos))
+
+    with _CACHE_LOCK:
+        if _FAMILIAS_VERSOES_SIGNATURE == assinatura and isinstance(_FAMILIAS_VERSOES_CACHE, dict):
+            return {
+                chave: [dict(item) for item in itens]
+                for chave, itens in _FAMILIAS_VERSOES_CACHE.items()
+            }
+
+    familias = _montar_familias_versoes_modelos(caminhos)
+
+    with _CACHE_LOCK:
+        _FAMILIAS_VERSOES_SIGNATURE = assinatura
+        _FAMILIAS_VERSOES_CACHE = {
+            chave: [dict(item) for item in itens]
+            for chave, itens in familias.items()
+        }
+
+    return {
+        chave: [dict(item) for item in itens]
+        for chave, itens in familias.items()
+    }
+
+
 def _agrupar_nomes_modelo_por_familia(values: list[Any]) -> dict[str, list[str]]:
     familias: dict[str, list[str]] = {}
     for value in values:
@@ -929,7 +975,7 @@ def gerar_mapa_modelos(
     total_pontos = 0
     for modelo in modelos_plotados:
         total_pontos += int(modelo["total_pontos"])
-    mapa_html = _renderizar_mapa_modelos(
+    mapa_payload = _build_mapa_modelos_payload(
         modelos_plotados,
         bounds,
         avaliandos_geo,
@@ -937,6 +983,16 @@ def gerar_mapa_modelos(
         avaliandos_tecnicos_proximos=avaliandos_tecnicos_proximos,
         trabalhos_tecnicos_raio_m=trabalhos_tecnicos_raio_m_norm,
     )
+    mapa_html = ""
+    if mapa_payload is None:
+        mapa_html = _renderizar_mapa_modelos(
+            modelos_plotados,
+            bounds,
+            avaliandos_geo,
+            modo_exibicao_norm,
+            avaliandos_tecnicos_proximos=avaliandos_tecnicos_proximos,
+            trabalhos_tecnicos_raio_m=trabalhos_tecnicos_raio_m_norm,
+        )
 
     total_trabalhos_modelos = len(
         {
@@ -964,6 +1020,9 @@ def gerar_mapa_modelos(
             "mapa_html": mapa_html,
             "mapa_html_pontos": mapa_html if modo_exibicao_norm == "pontos" else "",
             "mapa_html_cobertura": mapa_html if modo_exibicao_norm == "cobertura" else "",
+            "mapa_payload": mapa_payload,
+            "mapa_payload_pontos": mapa_payload if modo_exibicao_norm == "pontos" else None,
+            "mapa_payload_cobertura": mapa_payload if modo_exibicao_norm == "cobertura" else None,
             "total_modelos_plotados": len(modelos_plotados),
             "total_pontos": total_pontos,
             "modelos_plotados": [
@@ -1053,6 +1112,224 @@ def _montar_tooltip_distancia_modelo(modelo: dict[str, Any]) -> str:
     return ""
 
 
+def _tooltip_mapa_modelo_html(modelo: dict[str, Any]) -> str:
+    nome = str(modelo.get("nome") or "Modelo").strip() or "Modelo"
+    tooltip_distancia = _montar_tooltip_distancia_modelo(modelo)
+    if tooltip_distancia:
+        return (
+            "<div style='font-family:\"Segoe UI\",Arial,sans-serif; font-size:13px; line-height:1.5;'>"
+            f"<b>{escape(nome)}</b><br>{escape(tooltip_distancia)}"
+            "</div>"
+        )
+    return (
+        "<div style='font-family:\"Segoe UI\",Arial,sans-serif; font-size:13px; line-height:1.5;'>"
+        f"<b>{escape(nome)}</b>"
+        "</div>"
+    )
+
+
+def _marker_payloads_avaliandos(avaliandos_geo: list[dict[str, Any]]) -> list[dict[str, Any]]:
+    payloads: list[dict[str, Any]] = []
+    for idx, avaliando in enumerate(avaliandos_geo):
+        lat_item, lon_item = _normalizar_coordenadas_avaliando(avaliando.get("lat"), avaliando.get("lon"))
+        if lat_item is None or lon_item is None:
+            continue
+        label = str(avaliando.get("label") or f"A{idx + 1}").strip() or f"A{idx + 1}"
+        endereco = str(avaliando.get("logradouro") or "").strip()
+        numero_usado = str(avaliando.get("numero_usado") or "").strip()
+        tooltip = label
+        if endereco:
+            tooltip = f"{tooltip} • {endereco}{f', {numero_usado}' if numero_usado else ''}"
+        marker_html = (
+            "<div style='display:flex;align-items:center;justify-content:center;"
+            "width:28px;height:28px;border-radius:999px;background:#c62828;color:#fff;"
+            "font-weight:800;font-size:12px;border:2px solid rgba(255,255,255,0.95);"
+            "box-shadow:0 2px 6px rgba(0,0,0,0.18);'>"
+            f"{escape(label)}"
+            "</div>"
+        )
+        payloads.append(
+            {
+                "lat": float(lat_item),
+                "lon": float(lon_item),
+                "tooltip_html": escape(tooltip),
+                "marker_html": marker_html,
+                "icon_size": [28, 28],
+                "icon_anchor": [14, 14],
+                "class_name": "mesa-avaliando-marker",
+            }
+        )
+    return payloads
+
+
+def _shapes_modelo_payload(
+    modelo: dict[str, Any],
+    aval_lat: float | None,
+    aval_lon: float | None,
+) -> list[dict[str, Any]]:
+    geometria = modelo.get("geometria") or {}
+    geom_wgs84 = geometria.get("geom_wgs84")
+    if geom_wgs84 is None:
+        return []
+
+    tooltip = _tooltip_mapa_modelo_html(modelo)
+    cor = str(modelo.get("cor") or "#1f77b4")
+    geom_type = str(geometria.get("geom_type") or "")
+    shapes: list[dict[str, Any]] = []
+
+    try:
+        if geom_type == "Polygon":
+            coords = [[float(lat), float(lon)] for lon, lat in list(geom_wgs84.exterior.coords)]
+            shapes.append({"type": "polygon", "coords": coords, "color": cor, "fill": True, "fill_opacity": 0.12, "weight": 2, "tooltip_html": tooltip})
+        elif geom_type == "MultiPolygon":
+            for poligono in list(getattr(geom_wgs84, "geoms", [])):
+                coords = [[float(lat), float(lon)] for lon, lat in list(poligono.exterior.coords)]
+                shapes.append({"type": "polygon", "coords": coords, "color": cor, "fill": True, "fill_opacity": 0.12, "weight": 2, "tooltip_html": tooltip})
+        elif geom_type == "LineString":
+            coords = [[float(lat), float(lon)] for lon, lat in list(geom_wgs84.coords)]
+            shapes.append({"type": "polyline", "coords": coords, "color": cor, "weight": 3, "opacity": 0.8, "tooltip_html": tooltip})
+        elif geom_type == "MultiLineString":
+            for linha in list(getattr(geom_wgs84, "geoms", [])):
+                coords = [[float(lat), float(lon)] for lon, lat in list(linha.coords)]
+                shapes.append({"type": "polyline", "coords": coords, "color": cor, "weight": 3, "opacity": 0.8, "tooltip_html": tooltip})
+        elif geom_type == "Point":
+            shapes.append({"type": "circlemarker", "center": [float(geom_wgs84.y), float(geom_wgs84.x)], "radius": 6, "color": cor, "fill": True, "fill_opacity": 0.7, "tooltip_html": tooltip})
+        elif geom_type == "MultiPoint":
+            for ponto in list(getattr(geom_wgs84, "geoms", [])):
+                shapes.append({"type": "circlemarker", "center": [float(ponto.y), float(ponto.x)], "radius": 6, "color": cor, "fill": True, "fill_opacity": 0.7, "tooltip_html": tooltip})
+    except Exception:
+        return []
+
+    if aval_lat is None or aval_lon is None:
+        return shapes
+
+    try:
+        from shapely.geometry import Point
+        from shapely.ops import nearest_points
+    except ImportError:
+        return shapes
+
+    try:
+        aval_point = Point(float(aval_lon), float(aval_lat))
+        _, nearest_geom = nearest_points(aval_point, geom_wgs84)
+        distancia_km = _to_float_or_none(modelo.get("distancia_km"))
+        if nearest_geom is None or distancia_km is None or distancia_km <= 0:
+            return shapes
+        shapes.append(
+            {
+                "type": "polyline",
+                "coords": [
+                    [float(aval_point.y), float(aval_point.x)],
+                    [float(nearest_geom.y), float(nearest_geom.x)],
+                ],
+                "color": cor,
+                "weight": 2,
+                "opacity": 0.65,
+                "dash_array": "6,6",
+                "tooltip_html": f"Ligação de distância • {escape(str(modelo.get('nome') or 'Modelo'))}",
+            }
+        )
+    except Exception:
+        return shapes
+
+    return shapes
+
+
+def _build_mapa_modelos_payload(
+    modelos_plotados: list[dict[str, Any]],
+    bounds: list[list[float]],
+    avaliandos_geo: list[dict[str, Any]],
+    modo_exibicao: str,
+    avaliandos_tecnicos_proximos: list[dict[str, Any]] | None = None,
+    trabalhos_tecnicos_raio_m: int | None = None,
+) -> dict[str, Any] | None:
+    overlay_layers: list[dict[str, Any]] = []
+    avaliando_unico = avaliandos_geo[0] if len(avaliandos_geo) == 1 else None
+    aval_lat = avaliando_unico.get("lat") if avaliando_unico is not None else None
+    aval_lon = avaliando_unico.get("lon") if avaliando_unico is not None else None
+
+    for modelo in modelos_plotados:
+        layer: dict[str, Any] = {
+            "id": str(modelo.get("id") or ""),
+            "label": str(modelo.get("nome") or "Modelo"),
+            "show": True,
+            "markers": build_trabalhos_tecnicos_marker_payloads(modelo.get("avaliandos_tecnicos") or []),
+        }
+        if modo_exibicao == "pontos":
+            tooltip_html = _tooltip_mapa_modelo_html(modelo)
+            layer["points"] = [
+                {
+                    "lat": float(ponto["lat"]),
+                    "lon": float(ponto["lon"]),
+                    "color": str(modelo.get("cor") or "#1f77b4"),
+                    "base_radius": 3.0,
+                    "stroke_color": str(modelo.get("cor") or "#1f77b4"),
+                    "stroke_weight": 1.0,
+                    "fill_opacity": 0.72,
+                    "tooltip_html": tooltip_html,
+                }
+                for ponto in (modelo.get("pontos") or [])
+            ]
+        else:
+            layer["shapes"] = _shapes_modelo_payload(modelo, aval_lat, aval_lon)
+        overlay_layers.append(layer)
+
+    if avaliandos_tecnicos_proximos is not None:
+        label_raio = f" (até {int(trabalhos_tecnicos_raio_m or 0)} m)" if trabalhos_tecnicos_raio_m is not None else ""
+        proximos_layer: dict[str, Any] = {
+            "id": "trabalhos-tecnicos-proximos",
+            "label": f"Trabalhos técnicos próximos{label_raio}",
+            "show": True,
+            "markers": build_trabalhos_tecnicos_marker_payloads(
+                avaliandos_tecnicos_proximos or [],
+                origem="pesquisa_mapa",
+                marker_style="estrela",
+                ignore_bounds=False,
+            ),
+            "shapes": [],
+        }
+        if int(trabalhos_tecnicos_raio_m or 0) > 0:
+            for idx, avaliando in enumerate(avaliandos_geo):
+                lat_item, lon_item = _normalizar_coordenadas_avaliando(avaliando.get("lat"), avaliando.get("lon"))
+                if lat_item is None or lon_item is None:
+                    continue
+                label = str(avaliando.get("label") or f"A{idx + 1}").strip() or f"A{idx + 1}"
+                tooltip_raio = (
+                    f"Raio de busca: até {int(trabalhos_tecnicos_raio_m)} m"
+                    if len(avaliandos_geo) == 1
+                    else f"Raio de busca • {label}: até {int(trabalhos_tecnicos_raio_m)} m"
+                )
+                proximos_layer["shapes"].append(
+                    {
+                        "type": "circle",
+                        "center": [float(lat_item), float(lon_item)],
+                        "radius_m": float(trabalhos_tecnicos_raio_m),
+                        "color": "#c62828",
+                        "weight": 2,
+                        "opacity": 0.75,
+                        "fill": True,
+                        "fill_color": "#c62828",
+                        "fill_opacity": 0.06,
+                        "dash_array": "6,6",
+                        "tooltip_html": tooltip_raio,
+                    }
+                )
+        overlay_layers.append(proximos_layer)
+
+    avaliandos_markers = _marker_payloads_avaliandos(avaliandos_geo)
+    if avaliandos_markers:
+        overlay_layers.append(
+            {
+                "id": "avaliandos",
+                "label": "Avaliando" if len(avaliandos_geo) == 1 else "Avaliandos",
+                "show": True,
+                "markers": avaliandos_markers,
+            }
+        )
+
+    return build_leaflet_payload(bounds=bounds, overlay_layers=overlay_layers, show_bairros=True)
+
+
 def _renderizar_mapa_modelos(
     modelos_plotados: list[dict[str, Any]],
     bounds: list[list[float]],

backend/app/services/trabalhos_tecnicos_service.py

@@ -16,9 +16,11 @@ from folium import plugins
 from app.core.map_layers import (
     add_bairros_layer,
     add_popup_pagination_handlers,
+    build_trabalhos_tecnicos_marker_payloads,
     add_trabalhos_tecnicos_markers,
     add_zoom_responsive_circle_markers,
 )
+from app.core.visualizacao.map_payload import build_leaflet_payload
 from app.services import model_repository, trabalhos_tecnicos_repository
 from app.services.serializers import sanitize_value
 
@@ -872,6 +874,129 @@ def _normalizar_modo_mapa_trabalhos(value: Any) -> str:
     return MAPA_TRABALHOS_CLUSTERIZADO
 
 
+def _marker_payload_avaliando(lat: float, lon: float) -> dict[str, Any]:
+    return {
+        "lat": float(lat),
+        "lon": float(lon),
+        "tooltip_html": (
+            '<div style="font-family:\'Segoe UI\',Arial,sans-serif; font-size:13px; line-height:1.45;">'
+            '<strong>Avaliando</strong>'
+            '</div>'
+        ),
+        "popup_html": (
+            '<div style="font-family:\'Segoe UI\',Arial,sans-serif; font-size:13px; line-height:1.45;">'
+            '<strong>Avaliando</strong>'
+            '</div>'
+        ),
+        "marker_html": (
+            "<div style='display:flex;align-items:center;justify-content:center;width:18px;height:18px;'>"
+            "<svg width='18' height='18' viewBox='0 0 24 24' aria-hidden='true'>"
+            "<path d='M12 3 4 9v11h5v-6h6v6h5V9l-8-6Z' fill='#d7263d' stroke='#8f1522' stroke-width='1.5' stroke-linejoin='round'/>"
+            "</svg></div>"
+        ),
+        "icon_size": [18, 18],
+        "icon_anchor": [9, 9],
+        "class_name": "mesa-trabalho-tecnico-marker",
+        "ignore_bounds": False,
+    }
+
+
+def _build_mapa_trabalhos_payload(
+    pontos: list[dict[str, Any]],
+    *,
+    avaliando_coords: tuple[float | None, float | None] | None = None,
+) -> dict[str, Any] | None:
+    bounds: list[list[float]] = [
+        [float(item["coord_lat"]), float(item["coord_lon"])]
+        for item in pontos
+    ]
+
+    overlay_layers: list[dict[str, Any]] = [
+        {
+            "id": "trabalhos_tecnicos",
+            "label": "Trabalhos técnicos",
+            "show": True,
+            "markers": build_trabalhos_tecnicos_marker_payloads(
+                pontos,
+                origem="trabalhos_tecnicos_mapa",
+                marker_style="ponto",
+                ignore_bounds=False,
+            ),
+        }
+    ]
+
+    aval_lat, aval_lon = avaliando_coords or (None, None)
+    if aval_lat is not None and aval_lon is not None:
+        bounds.append([float(aval_lat), float(aval_lon)])
+        overlay_layers.append(
+            {
+                "id": "avaliando",
+                "label": "Avaliando",
+                "show": True,
+                "markers": [_marker_payload_avaliando(float(aval_lat), float(aval_lon))],
+            }
+        )
+
+    return build_leaflet_payload(bounds=bounds, overlay_layers=overlay_layers, show_bairros=True)
+
+
+def _build_mapa_trabalho_payload(nome_trabalho: str, imoveis: list[dict[str, Any]]) -> dict[str, Any] | None:
+    pontos = [
+        item for item in imoveis
+        if _coordenada_valida(item.get("coord_x")) and _coordenada_valida(item.get("coord_y"))
+    ]
+    if not pontos:
+        return None
+
+    bounds = [[float(item["coord_y"]), float(item["coord_x"])] for item in pontos]
+    markers: list[dict[str, Any]] = []
+    for index, item in enumerate(pontos, start=1):
+        label = str(item.get("label") or f"Imóvel {index}").strip()
+        endereco = str(item.get("endereco") or "").strip()
+        numero = str(item.get("numero") or "").strip()
+        endereco_texto = ", ".join([value for value in [endereco, numero] if value]) or "Endereço não informado"
+        modelos = [str(valor).strip() for valor in (item.get("modelos") or []) if str(valor).strip()]
+        modelos_texto = ", ".join(modelos) or "Sem modelo informado"
+        popup_html = (
+            "<div style='font-family:\"Segoe UI\",Arial,sans-serif; font-size:13px; line-height:1.5; min-width:240px;'>"
+            f"<div style='margin-bottom:6px; font-weight:700; color:#24405b;'>{label}</div>"
+            f"<div><span style='color:#666;'>Trabalho:</span> {str(nome_trabalho)}</div>"
+            f"<div><span style='color:#666;'>Endereço:</span> {endereco_texto}</div>"
+            f"<div><span style='color:#666;'>Modelos:</span> {modelos_texto}</div>"
+            "</div>"
+        )
+        markers.append(
+            {
+                "lat": float(item["coord_y"]),
+                "lon": float(item["coord_x"]),
+                "tooltip_html": popup_html,
+                "popup_html": popup_html,
+                "marker_html": (
+                    "<div style='display:flex;align-items:center;justify-content:center;"
+                    "width:8px;height:8px;border-radius:999px;background:#1f6fb2;"
+                    "border:1px solid #ffffff;box-shadow:0 0 0 1px rgba(20,42,66,0.20);'></div>"
+                ),
+                "icon_size": [8, 8],
+                "icon_anchor": [4, 4],
+                "class_name": "mesa-trabalho-tecnico-marker mesa-trabalho-tecnico-marker-dot",
+                "ignore_bounds": False,
+            }
+        )
+
+    return build_leaflet_payload(
+        bounds=bounds,
+        overlay_layers=[
+            {
+                "id": "trabalho",
+                "label": str(nome_trabalho or "Imóveis do trabalho"),
+                "show": True,
+                "markers": markers,
+            }
+        ],
+        show_bairros=True,
+    )
+
+
 def gerar_mapa_trabalhos(
     trabalhos_ids: list[str] | None = None,
     *,
@@ -901,6 +1026,7 @@ def gerar_mapa_trabalhos(
         return sanitize_value(
             {
                 "mapa_html": "",
+                "mapa_payload": None,
                 "total_trabalhos": 0,
                 "total_imoveis": 0,
                 "status": "Nenhum trabalho técnico georreferenciado foi encontrado para o mapa.",
@@ -977,9 +1103,11 @@ def gerar_mapa_trabalhos(
 
     total_trabalhos = len({str(item.get("trabalho_id") or "").strip() for item in pontos if str(item.get("trabalho_id") or "").strip()})
     total_imoveis = len(pontos)
+    mapa_payload = _build_mapa_trabalhos_payload(pontos, avaliando_coords=avaliando_coords)
     return sanitize_value(
         {
             "mapa_html": mapa.get_root().render(),
+            "mapa_payload": mapa_payload,
             "total_trabalhos": total_trabalhos,
             "total_imoveis": total_imoveis,
             "modo_exibicao": modo_exibicao_norm,
@@ -1166,6 +1294,7 @@ def detalhar_trabalho(trabalho_id: str) -> dict[str, Any]:
             "trabalho": {
                 **trabalho,
                 "mapa_html": _criar_mapa_trabalho(str(trabalho.get("nome") or chave), imoveis),
+                "mapa_payload": _build_mapa_trabalho_payload(str(trabalho.get("nome") or chave), imoveis),
                 "fonte": _source_payload(resolved, meta),
             }
         }

backend/app/services/visualizacao_service.py

@@ -1,6 +1,7 @@
 from __future__ import annotations
 
 from pathlib import Path
+from threading import Lock, Thread
 from typing import Any
 
 import folium
@@ -11,7 +12,12 @@ from folium import plugins
 from joblib import load
 
 from app.core.visualizacao import app as viz_app
-from app.core.map_layers import add_bairros_layer, add_popup_pagination_handlers, add_zoom_responsive_circle_markers
+from app.core.map_layers import (
+    add_bairros_layer,
+    add_popup_pagination_handlers,
+    add_zoom_responsive_circle_markers,
+    get_bairros_geojson,
+)
 from app.core.elaboracao.core import (
     PERCENTUAL_RUIDO_TOL,
     _migrar_pacote_v1_para_v2,
@@ -23,6 +29,7 @@ from app.core.elaboracao.core import (
     normalizar_observacao_modelo,
 )
 from app.core.elaboracao.formatadores import formatar_avaliacao_html
+from app.core.visualizacao.map_payload import build_leaflet_payload, build_visualizacao_map_payload
 from app.models.session import SessionState
 from app.services import model_repository, pesquisa_service, trabalhos_tecnicos_service
 from app.services.equacao_service import build_equacoes_payload, exportar_planilha_equacao
@@ -35,6 +42,8 @@ BASE_COMPARACAO_SEM_BASE = "__none__"
 COORD_LAT_NAMES = {"lat", "latitude", "siat_latitude"}
 COORD_LON_NAMES = {"lon", "long", "longitude", "siat_longitude"}
 TRABALHOS_TECNICOS_MODELOS_MODO_PADRAO = pesquisa_service.TRABALHOS_TECNICOS_MODELOS_SELECIONADOS_E_OUTRAS_VERSOES
+_MAP_SUPPORT_WARMUP_LOCK = Lock()
+_MAP_SUPPORT_WARMUP_SIGNATURE: str | None = None
 
 
 def _to_dataframe(value: Any) -> pd.DataFrame | None:
@@ -284,6 +293,104 @@ def _criar_mapa_knn_destaque(
     return mapa.get_root().render()
 
 
+def _criar_payload_knn_destaque(
+    df_base: pd.DataFrame,
+    posicoes_knn: list[int],
+    coluna_y: str,
+    avaliando_lat: float | None = None,
+    avaliando_lon: float | None = None,
+) -> dict[str, Any] | None:
+    if df_base is None or df_base.empty:
+        return None
+
+    lat_col = _detectar_coluna_coord(df_base, COORD_LAT_NAMES)
+    lon_col = _detectar_coluna_coord(df_base, COORD_LON_NAMES)
+    if not lat_col or not lon_col:
+        return None
+
+    lat_serie = _primeira_serie_por_nome(df_base, lat_col)
+    lon_serie = _primeira_serie_por_nome(df_base, lon_col)
+    if lat_serie is None or lon_serie is None:
+        return None
+
+    dados = df_base.copy()
+    dados["__pos_base__"] = np.arange(len(dados), dtype=int)
+    dados["__indice_base__"] = [str(v) for v in dados.index]
+    dados["__lat__"] = pd.to_numeric(lat_serie, errors="coerce")
+    dados["__lon__"] = pd.to_numeric(lon_serie, errors="coerce")
+    dados = dados[
+        np.isfinite(dados["__lat__"])
+        & np.isfinite(dados["__lon__"])
+        & (np.abs(dados["__lat__"]) <= 90.0)
+        & (np.abs(dados["__lon__"]) <= 180.0)
+    ].copy()
+    if dados.empty:
+        return None
+
+    aval_lat, aval_lon = _normalizar_coordenadas_avaliando(avaliando_lat, avaliando_lon)
+    posicoes_set = {int(v) for v in (posicoes_knn or [])}
+    points_mercado: list[dict[str, Any]] = []
+    points_knn: list[dict[str, Any]] = []
+    bounds: list[list[float]] = []
+
+    for _, row in dados.iterrows():
+        lat = float(row["__lat__"])
+        lon = float(row["__lon__"])
+        pos = int(row["__pos_base__"])
+        selecionado = pos in posicoes_set
+        col_y_val = row.get(coluna_y)
+        valor_tooltip = _formatar_tooltip_valor(coluna_y, col_y_val)
+        point_payload = {
+            "lat": lat,
+            "lon": lon,
+            "color": "#d7263d" if selecionado else "#4f6d8a",
+            "base_radius": 8.0 if selecionado else 5.0,
+            "stroke_color": "#ffffff",
+            "stroke_weight": 0.9,
+            "fill_opacity": 0.92 if selecionado else 0.52,
+            "tooltip_html": (
+                "<div style='font-family:\"Segoe UI\",Arial,sans-serif; font-size:13px; line-height:1.5;'>"
+                f"<b>Índice {escape(str(row['__indice_base__']))}</b>"
+                f"<br><span style='color:#555;'>{escape(str(coluna_y))}:</span> <b>{escape(valor_tooltip)}</b>"
+                "</div>"
+            ),
+        }
+        (points_knn if selecionado else points_mercado).append(point_payload)
+        bounds.append([lat, lon])
+
+    overlay_layers: list[dict[str, Any]] = [
+        {"id": "mercado", "label": "Mercado", "show": True, "points": points_mercado},
+        {"id": "knn", "label": "Selecionados KNN", "show": True, "points": points_knn},
+    ]
+
+    if aval_lat is not None and aval_lon is not None:
+        overlay_layers.append(
+            {
+                "id": "avaliando",
+                "label": "Avaliando",
+                "show": True,
+                "markers": [
+                    {
+                        "lat": float(aval_lat),
+                        "lon": float(aval_lon),
+                        "tooltip_html": "Avaliando",
+                        "marker_html": (
+                            "<div style='display:flex;align-items:center;justify-content:center;"
+                            "width:18px;height:18px;border-radius:999px;background:#dc3545;"
+                            "border:2px solid rgba(255,255,255,0.95);box-shadow:0 1px 4px rgba(0,0,0,0.2);'></div>"
+                        ),
+                        "icon_size": [18, 18],
+                        "icon_anchor": [9, 9],
+                        "class_name": "mesa-avaliando-marker",
+                    }
+                ],
+            }
+        )
+        bounds.append([float(aval_lat), float(aval_lon)])
+
+    return build_leaflet_payload(bounds=bounds, overlay_layers=overlay_layers, show_bairros=True)
+
+
 def _resolver_indice_base(
     indice_base_raw: str | None,
     total_avaliacoes: int,
@@ -314,6 +421,31 @@ def listar_modelos_repositorio() -> dict[str, Any]:
     return sanitize_value(model_repository.list_repository_models())
 
 
+def _warm_visualizacao_support_caches_async() -> None:
+    global _MAP_SUPPORT_WARMUP_SIGNATURE
+    try:
+        signature = model_repository.resolve_model_repository().signature
+    except Exception:
+        signature = "__unknown__"
+
+    with _MAP_SUPPORT_WARMUP_LOCK:
+        if _MAP_SUPPORT_WARMUP_SIGNATURE == signature:
+            return
+        _MAP_SUPPORT_WARMUP_SIGNATURE = signature
+
+    def _worker() -> None:
+        try:
+            get_bairros_geojson()
+        except Exception:
+            pass
+        try:
+            pesquisa_service.obter_familias_versoes_modelos_cache()
+        except Exception:
+            pass
+
+    Thread(target=_worker, name="mesa-visualizacao-map-warmup", daemon=True).start()
+
+
 def carregar_modelo_repositorio(session: SessionState, modelo_id: str) -> dict[str, Any]:
     caminho = model_repository.resolve_model_file(modelo_id)
     session.uploaded_file_path = str(caminho)
@@ -341,6 +473,7 @@ def carregar_modelo(session: SessionState, caminho_arquivo: str) -> dict[str, An
     session.dados_visualizacao = None
     session.avaliacoes_visualizacao = []
     session.visualizacao_cache = {}
+    _warm_visualizacao_support_caches_async()
 
     nome_modelo = Path(caminho_arquivo).stem
     badge_html = viz_app._formatar_badge_completo(pacote, nome_modelo=nome_modelo)
@@ -569,9 +702,7 @@ def _aliases_modelo_visualizacao_para_trabalhos_tecnicos(
     modelo_id, caminho, nome_modelo = _resolver_referencias_modelo_visualizacao(session)
 
     try:
-        familias_versoes = pesquisa_service._montar_familias_versoes_modelos(
-            list(pesquisa_service.ensure_modelos_dir().glob("*.dai"))
-        )
+        familias_versoes = pesquisa_service.obter_familias_versoes_modelos_cache()
     except Exception:
         familias_versoes = {}
 
@@ -616,10 +747,15 @@ def _equacoes_do_modelo(pacote: dict[str, Any], info: dict[str, Any]) -> dict[st
 
 
 def _preparar_dados_visualizacao(pacote: dict[str, Any]) -> pd.DataFrame:
-    dados = pacote["dados"]["df"].reset_index()
-    for col in dados.columns:
-        if pd.api.types.is_numeric_dtype(dados[col]) and str(col).lower() not in ["lat", "latitude", "lon", "longitude", "long", "siat_latitude", "siat_longitude"]:
-            dados[col] = dados[col].round(2)
+    dados = pacote["dados"]["df"].reset_index().copy()
+    colunas_numericas = [
+        str(col)
+        for col in dados.columns
+        if pd.api.types.is_numeric_dtype(dados[col])
+        and str(col).lower() not in ["lat", "latitude", "lon", "longitude", "long", "siat_latitude", "siat_longitude"]
+    ]
+    if colunas_numericas:
+        dados.loc[:, colunas_numericas] = dados.loc[:, colunas_numericas].round(2)
     dados["__mesa_row_id__"] = np.arange(len(dados), dtype=int)
     return dados
 
@@ -825,17 +961,31 @@ def _payload_modelo_mapa(
         session,
         trabalhos_tecnicos_modelos_modo,
     )
-    popup_endpoint = f"{api_base_url.rstrip('/')}/api/visualizacao/map/popup" if api_base_url else "/api/visualizacao/map/popup"
-    mapa_html = viz_app.criar_mapa(
+    bairros_geojson_url = (
+        f"{api_base_url.rstrip('/')}/api/visualizacao/map/bairros.geojson"
+        if api_base_url
+        else "/api/visualizacao/map/bairros.geojson"
+    )
+    mapa_payload = build_visualizacao_map_payload(
         core["dados"],
         col_y=info["nome_y"],
-        session_id=session.session_id,
-        popup_endpoint=popup_endpoint,
-        popup_auth_token=popup_auth_token,
         avaliandos_tecnicos=avaliandos_tecnicos,
+        bairros_geojson_url=bairros_geojson_url,
     )
+    mapa_html = ""
+    if mapa_payload is None:
+        popup_endpoint = f"{api_base_url.rstrip('/')}/api/visualizacao/map/popup" if api_base_url else "/api/visualizacao/map/popup"
+        mapa_html = viz_app.criar_mapa(
+            core["dados"],
+            col_y=info["nome_y"],
+            session_id=session.session_id,
+            popup_endpoint=popup_endpoint,
+            popup_auth_token=popup_auth_token,
+            avaliandos_tecnicos=avaliandos_tecnicos,
+        )
     return {
         "mapa_html": mapa_html,
+        "mapa_payload": mapa_payload,
         "mapa_choices": core["mapa_choices"],
         "trabalhos_tecnicos": trabalhos_tecnicos,
         "trabalhos_tecnicos_modelos_modo": trabalhos_tecnicos_modelos_modo_norm,
@@ -944,18 +1094,33 @@ def atualizar_mapa(
         session,
         trabalhos_tecnicos_modelos_modo,
     )
-    popup_endpoint = f"{api_base_url.rstrip('/')}/api/visualizacao/map/popup" if api_base_url else "/api/visualizacao/map/popup"
-    mapa_html = viz_app.criar_mapa(
+    bairros_geojson_url = (
+        f"{api_base_url.rstrip('/')}/api/visualizacao/map/bairros.geojson"
+        if api_base_url
+        else "/api/visualizacao/map/bairros.geojson"
+    )
+    mapa_payload = build_visualizacao_map_payload(
         dados,
         tamanho_col=tamanho_col,
         col_y=info["nome_y"],
-        session_id=session.session_id,
-        popup_endpoint=popup_endpoint,
-        popup_auth_token=popup_auth_token,
         avaliandos_tecnicos=avaliandos_tecnicos,
+        bairros_geojson_url=bairros_geojson_url,
     )
+    mapa_html = ""
+    if mapa_payload is None:
+        popup_endpoint = f"{api_base_url.rstrip('/')}/api/visualizacao/map/popup" if api_base_url else "/api/visualizacao/map/popup"
+        mapa_html = viz_app.criar_mapa(
+            dados,
+            tamanho_col=tamanho_col,
+            col_y=info["nome_y"],
+            session_id=session.session_id,
+            popup_endpoint=popup_endpoint,
+            popup_auth_token=popup_auth_token,
+            avaliandos_tecnicos=avaliandos_tecnicos,
+        )
     return {
         "mapa_html": mapa_html,
+        "mapa_payload": mapa_payload,
         "trabalhos_tecnicos": trabalhos_tecnicos,
         "trabalhos_tecnicos_modelos_modo": trabalhos_tecnicos_modelos_modo_norm,
     }
@@ -1274,13 +1439,22 @@ def detalhes_knn_avaliacao(
             df_vizinhos.insert(1, "__distancia_knn__", distancias_validas)
             tabela_payload = dataframe_to_payload(df_vizinhos, decimals=4, max_rows=None)
 
-    mapa_html = _criar_mapa_knn_destaque(
+    mapa_payload = _criar_payload_knn_destaque(
         df_knn,
         posicoes_vizinhos,
         info["nome_y"],
         avaliando_lat=aval_lat,
         avaliando_lon=aval_lon,
     )
+    mapa_html = ""
+    if mapa_payload is None:
+        mapa_html = _criar_mapa_knn_destaque(
+            df_knn,
+            posicoes_vizinhos,
+            info["nome_y"],
+            avaliando_lat=aval_lat,
+            avaliando_lon=aval_lon,
+        )
     avaliando = [{"variavel": str(col), "valor": entradas.get(col)} for col in colunas_x]
     if info.get("coluna_area") and info.get("coluna_area") not in colunas_x:
         avaliando.append({"variavel": f"{info['coluna_area']} (area)", "valor": valor_area})
@@ -1293,6 +1467,7 @@ def detalhes_knn_avaliacao(
     return sanitize_value(
         {
             "mapa_html": mapa_html,
+            "mapa_payload": mapa_payload,
             "avaliando": avaliando,
             "vizinhos_tabela": tabela_payload,
             "knn": resultado_knn,

frontend/package-lock.json

@@ -8,6 +8,10 @@
       "name": "mesa-frame-frontend",
       "version": "1.0.0",
       "dependencies": {
+        "leaflet": "^1.9.4",
+        "leaflet-measure": "^3.1.0",
+        "leaflet.fullscreen": "^5.3.1",
+        "leaflet.heat": "^0.2.0",
         "plotly.js-dist-min": "^2.35.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -1367,6 +1371,22 @@
         "url": "https://opencollective.com/turf"
       }
     },
+    "node_modules/@turf/distance": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@turf/distance/-/distance-5.1.5.tgz",
+      "integrity": "sha512-sYCAgYZ2MjNKMtx17EijHlK9qHwpA0MuuQWbR4P30LTCl52UlG/reBfV899wKyF3HuDL9ux78IbILwOfeQ4zgA==",
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^5.1.5",
+        "@turf/invariant": "^5.1.5"
+      }
+    },
+    "node_modules/@turf/distance/node_modules/@turf/helpers": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-5.1.5.tgz",
+      "integrity": "sha512-/lF+JR+qNDHZ8bF9d+Cp58nxtZWJ3sqFe6n3u3Vpj+/0cqkjk4nXKYBSY0azm+GIYB5mWKxUXvuP/m0ZnKj1bw==",
+      "license": "MIT"
+    },
     "node_modules/@turf/helpers": {
       "version": "7.3.4",
       "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-7.3.4.tgz",
@@ -1381,6 +1401,47 @@
         "url": "https://opencollective.com/turf"
       }
     },
+    "node_modules/@turf/invariant": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@turf/invariant/-/invariant-5.2.0.tgz",
+      "integrity": "sha512-28RCBGvCYsajVkw2EydpzLdcYyhSA77LovuOvgCJplJWaNVyJYH6BOR3HR9w50MEkPqb/Vc/jdo6I6ermlRtQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^5.1.5"
+      }
+    },
+    "node_modules/@turf/invariant/node_modules/@turf/helpers": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-5.1.5.tgz",
+      "integrity": "sha512-/lF+JR+qNDHZ8bF9d+Cp58nxtZWJ3sqFe6n3u3Vpj+/0cqkjk4nXKYBSY0azm+GIYB5mWKxUXvuP/m0ZnKj1bw==",
+      "license": "MIT"
+    },
+    "node_modules/@turf/length": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@turf/length/-/length-5.1.5.tgz",
+      "integrity": "sha512-0ryx68h512wCoNfwyksLdabxEfwkGNTPg61/QiY+QfGFUOUNhHbP+QimViFpwF5hyX7qmroaSHVclLUqyLGRbg==",
+      "license": "MIT",
+      "dependencies": {
+        "@turf/distance": "^5.1.5",
+        "@turf/helpers": "^5.1.5",
+        "@turf/meta": "^5.1.5"
+      }
+    },
+    "node_modules/@turf/length/node_modules/@turf/helpers": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-5.1.5.tgz",
+      "integrity": "sha512-/lF+JR+qNDHZ8bF9d+Cp58nxtZWJ3sqFe6n3u3Vpj+/0cqkjk4nXKYBSY0azm+GIYB5mWKxUXvuP/m0ZnKj1bw==",
+      "license": "MIT"
+    },
+    "node_modules/@turf/length/node_modules/@turf/meta": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-5.2.0.tgz",
+      "integrity": "sha512-ZjQ3Ii62X9FjnK4hhdsbT+64AYRpaI8XMBMcyftEOGSmPMUVnkbvuv3C9geuElAXfQU7Zk1oWGOcrGOD9zr78Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^5.1.5"
+      }
+    },
     "node_modules/@turf/meta": {
       "version": "7.3.4",
       "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-7.3.4.tgz",
@@ -3102,6 +3163,71 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/leaflet-measure": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/leaflet-measure/-/leaflet-measure-3.1.0.tgz",
+      "integrity": "sha512-ln5c9UNaWDEd24tIzDt9hwnpb8OaCPBfSWNBg2H8rb9SA3cbXW9+NqohA6/8TdsNDGJZr36woXMrqRq07Pcl3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@turf/area": "^5.1.5",
+        "@turf/length": "^5.1.5",
+        "lodash": "^4.17.5"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.0.0"
+      }
+    },
+    "node_modules/leaflet-measure/node_modules/@turf/area": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@turf/area/-/area-5.1.5.tgz",
+      "integrity": "sha512-lz16gqtvoz+j1jD9y3zj0Z5JnGNd3YfS0h+DQY1EcZymvi75Frm9i5YbEyth0RfxYZeOVufY7YIS3LXbJlI57g==",
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^5.1.5",
+        "@turf/meta": "^5.1.5"
+      }
+    },
+    "node_modules/leaflet-measure/node_modules/@turf/helpers": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-5.1.5.tgz",
+      "integrity": "sha512-/lF+JR+qNDHZ8bF9d+Cp58nxtZWJ3sqFe6n3u3Vpj+/0cqkjk4nXKYBSY0azm+GIYB5mWKxUXvuP/m0ZnKj1bw==",
+      "license": "MIT"
+    },
+    "node_modules/leaflet-measure/node_modules/@turf/meta": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-5.2.0.tgz",
+      "integrity": "sha512-ZjQ3Ii62X9FjnK4hhdsbT+64AYRpaI8XMBMcyftEOGSmPMUVnkbvuv3C9geuElAXfQU7Zk1oWGOcrGOD9zr78Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@turf/helpers": "^5.1.5"
+      }
+    },
+    "node_modules/leaflet.fullscreen": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/leaflet.fullscreen/-/leaflet.fullscreen-5.3.1.tgz",
+      "integrity": "sha512-2IO5WJ5xpQWyn2ZLICwwpyiWJ2KdZMuxAUCsrK7b4dj770GZ/zwPp4uVQNKOxqnz9xRWEN1d2VNpLaX4ptSdnA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "leaflet": "^1.7.0 || >=2.0.0-alpha.1"
+      }
+    },
+    "node_modules/leaflet.heat": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/leaflet.heat/-/leaflet.heat-0.2.0.tgz",
+      "integrity": "sha512-Cd5PbAA/rX3X3XKxfDoUGi9qp78FyhWYurFg3nsfhntcM/MCNK08pRkf4iEenO1KNqwVPKCmkyktjW3UD+h9bQ=="
+    },
+    "node_modules/lodash": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",

frontend/package.json

@@ -9,6 +9,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "leaflet": "^1.9.4",
+    "leaflet-measure": "^3.1.0",
+    "leaflet.fullscreen": "^5.3.1",
+    "leaflet.heat": "^0.2.0",
     "plotly.js-dist-min": "^2.35.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

frontend/src/api.js

@@ -29,6 +29,10 @@ export function getAuthToken() {
   return AUTH_TOKEN
 }
 
+export function apiUrl(path) {
+  return `${API_BASE}${String(path || '')}`
+}
+
 function authHeaders(extraHeaders = {}) {
   const headers = { ...extraHeaders }
   if (AUTH_TOKEN) headers['X-Auth-Token'] = AUTH_TOKEN

frontend/src/components/AvaliacaoTab.jsx

@@ -539,6 +539,7 @@ export default function AvaliacaoTab({ sessionId, quickLoadRequest = null, onRou
   const [knnDetalheErro, setKnnDetalheErro] = useState('')
   const [knnDetalheCardTitulo, setKnnDetalheCardTitulo] = useState('')
   const [knnDetalheMapaHtml, setKnnDetalheMapaHtml] = useState('')
+  const [knnDetalheMapaPayload, setKnnDetalheMapaPayload] = useState(null)
   const [knnDetalheAvaliando, setKnnDetalheAvaliando] = useState([])
   const [knnDetalheTabela, setKnnDetalheTabela] = useState(null)
   const [knnDetalheInfo, setKnnDetalheInfo] = useState(null)
@@ -1078,6 +1079,7 @@ export default function AvaliacaoTab({ sessionId, quickLoadRequest = null, onRou
     setKnnDetalheErro('')
     setKnnDetalheCardTitulo(`Aval. ${Number(indice) + 1} — ${String(card?.modelo || 'Modelo')}`)
     setKnnDetalheMapaHtml('')
+    setKnnDetalheMapaPayload(null)
     setKnnDetalheAvaliando([])
     setKnnDetalheTabela(null)
     setKnnDetalheInfo(null)
@@ -1091,6 +1093,7 @@ export default function AvaliacaoTab({ sessionId, quickLoadRequest = null, onRou
         }),
       )
       setKnnDetalheMapaHtml(String(resp?.mapa_html || ''))
+      setKnnDetalheMapaPayload(resp?.mapa_payload || null)
       setKnnDetalheAvaliando(Array.isArray(resp?.avaliando) ? resp.avaliando : [])
       setKnnDetalheTabela(resp?.vizinhos_tabela || null)
       setKnnDetalheInfo(resp?.knn || null)
@@ -1853,7 +1856,7 @@ export default function AvaliacaoTab({ sessionId, quickLoadRequest = null, onRou
                   </div>
 
                   <div className="avaliacao-knn-map-wrap">
-                    <MapFrame html={knnDetalheMapaHtml} />
+                    <MapFrame html={knnDetalheMapaHtml} payload={knnDetalheMapaPayload} sessionId={sessionId} />
                   </div>
 
                   <div className="subpanel avaliacao-knn-detalhes-box">

frontend/src/components/ElaboracaoTab.jsx

@@ -883,10 +883,12 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
 
   const [dados, setDados] = useState(null)
   const [mapaHtml, setMapaHtml] = useState('')
+  const [mapaPayload, setMapaPayload] = useState(null)
   const [mapaVariavel, setMapaVariavel] = useState(MAPA_VARIAVEL_PADRAO)
   const [mapaModo, setMapaModo] = useState(MAPA_MODO_PONTOS)
   const [mapaGerado, setMapaGerado] = useState(false)
   const [mapaResiduosHtml, setMapaResiduosHtml] = useState('')
+  const [mapaResiduosPayload, setMapaResiduosPayload] = useState(null)
   const [mapaResiduosModo, setMapaResiduosModo] = useState(MAPA_MODO_PONTOS)
   const [mapaResiduosExtremoAbs, setMapaResiduosExtremoAbs] = useState(MAPA_RESIDUOS_EXTREMO_ABS_DEFAULT)
   const [mapaResiduosGerado, setMapaResiduosGerado] = useState(false)
@@ -983,6 +985,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
   const [knnDetalheErro, setKnnDetalheErro] = useState('')
   const [knnDetalheCardTitulo, setKnnDetalheCardTitulo] = useState('')
   const [knnDetalheMapaHtml, setKnnDetalheMapaHtml] = useState('')
+  const [knnDetalheMapaPayload, setKnnDetalheMapaPayload] = useState(null)
   const [knnDetalheAvaliando, setKnnDetalheAvaliando] = useState([])
   const [knnDetalheTabela, setKnnDetalheTabela] = useState(null)
   const [knnDetalheInfo, setKnnDetalheInfo] = useState(null)
@@ -1014,6 +1017,22 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
     ? buildElaboracaoModeloLink(repoModeloSelecionado)
     : ''
   const [sideNavDynamicStyle, setSideNavDynamicStyle] = useState({})
+  const applyMapaResponse = useCallback((resp) => {
+    setMapaHtml(String(resp?.mapa_html || ''))
+    setMapaPayload(resp?.mapa_payload || null)
+  }, [])
+  const clearMapaResponse = useCallback(() => {
+    setMapaHtml('')
+    setMapaPayload(null)
+  }, [])
+  const applyMapaResiduosResponse = useCallback((resp) => {
+    setMapaResiduosHtml(String(resp?.mapa_html || ''))
+    setMapaResiduosPayload(resp?.mapa_payload || null)
+  }, [])
+  const clearMapaResiduosResponse = useCallback(() => {
+    setMapaResiduosHtml('')
+    setMapaResiduosPayload(null)
+  }, [])
 
   const mapaChoices = useMemo(() => [MAPA_VARIAVEL_PADRAO, ...colunasNumericas], [colunasNumericas])
   const mapaModoDisponivel = mapaVariavel !== MAPA_VARIAVEL_PADRAO
@@ -2106,7 +2125,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
     }
     setDataMercadoError('')
     if (resp.dados) setDados(resp.dados)
-    if (resp.mapa_html) setMapaHtml(resp.mapa_html)
+    if (resp?.mapa_html || resp?.mapa_payload) applyMapaResponse(resp)
     if (resp.colunas_numericas) setColunasNumericas(resp.colunas_numericas)
     if (Array.isArray(resp.colunas_data_mercado)) {
       setColunasDataMercado(resp.colunas_data_mercado.map((item) => String(item)))
@@ -2290,8 +2309,8 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
       syncPeriodoDataMercadoFromContext(resp.contexto)
     }
 
-    if (resp.mapa_html) {
-      setMapaHtml(resp.mapa_html)
+    if (resp?.mapa_html || resp?.mapa_payload) {
+      applyMapaResponse(resp)
     }
   }
 
@@ -2313,7 +2332,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
     setSecao13InterativoEixoYColuna('')
     setMapaResiduosModo(MAPA_MODO_PONTOS)
     setMapaResiduosExtremoAbs(MAPA_RESIDUOS_EXTREMO_ABS_DEFAULT)
-    setMapaResiduosHtml('')
+    clearMapaResiduosResponse()
     setMapaResiduosGerado(false)
     const transformacaoYAplicada = resp.transformacao_y || transformacaoY
     const transformacoesXAplicadas = resp.transformacoes_x || transformacoesX
@@ -2466,11 +2485,11 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
     setImportacaoErro('')
     await withBusy(async () => {
       setMapaGerado(false)
-      setMapaHtml('')
+      clearMapaResponse()
       setMapaVariavel(MAPA_VARIAVEL_PADRAO)
       setMapaModo(MAPA_MODO_PONTOS)
       setMapaResiduosGerado(false)
-      setMapaResiduosHtml('')
+      clearMapaResiduosResponse()
       setMapaResiduosModo(MAPA_MODO_PONTOS)
       setMapaResiduosExtremoAbs(MAPA_RESIDUOS_EXTREMO_ABS_DEFAULT)
       setGeoAuto200(true)
@@ -2505,11 +2524,11 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
     setArquivoCarregadoInfo(null)
     await withBusy(async () => {
       setMapaGerado(false)
-      setMapaHtml('')
+      clearMapaResponse()
       setMapaVariavel(MAPA_VARIAVEL_PADRAO)
       setMapaModo(MAPA_MODO_PONTOS)
       setMapaResiduosGerado(false)
-      setMapaResiduosHtml('')
+      clearMapaResiduosResponse()
       setMapaResiduosModo(MAPA_MODO_PONTOS)
       setMapaResiduosExtremoAbs(MAPA_RESIDUOS_EXTREMO_ABS_DEFAULT)
       setGeoAuto200(true)
@@ -2583,11 +2602,11 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
     setImportacaoErro('')
     await withBusy(async () => {
       setMapaGerado(false)
-      setMapaHtml('')
+      clearMapaResponse()
       setMapaVariavel(MAPA_VARIAVEL_PADRAO)
       setMapaModo(MAPA_MODO_PONTOS)
       setMapaResiduosGerado(false)
-      setMapaResiduosHtml('')
+      clearMapaResiduosResponse()
       setMapaResiduosModo(MAPA_MODO_PONTOS)
       setMapaResiduosExtremoAbs(MAPA_RESIDUOS_EXTREMO_ABS_DEFAULT)
       setGeoAuto200(true)
@@ -2733,7 +2752,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
     setGeoProcessError('')
     try {
       const resp = await api.mapCoords(sessionId, manualLat, manualLon)
-      setMapaHtml(resp.mapa_html)
+      applyMapaResponse(resp)
       setDados(resp.dados)
       setCoordsInfo(resp.coords)
       setGeoStatusHtml('')
@@ -2757,7 +2776,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
       setGeoStatusHtml(resp.status_html || '')
       setGeoFalhasHtml(resp.falhas_html || '')
       setGeoCorrecoes(parseCorrecoes(resp.falhas_para_correcao))
-      setMapaHtml(resp.mapa_html || '')
+      applyMapaResponse(resp)
       setDados(resp.dados || null)
       setCoordsInfo(resp.coords || null)
       setCoordsMode('geocodificar')
@@ -2779,7 +2798,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
       setGeoStatusHtml(resp.status_html || '')
       setGeoFalhasHtml(resp.falhas_html || '')
       setGeoCorrecoes(parseCorrecoes(resp.falhas_para_correcao))
-      setMapaHtml(resp.mapa_html || '')
+      applyMapaResponse(resp)
       setDados(resp.dados || null)
       setCoordsInfo(resp.coords || null)
       setCoordsMode('geocodificar')
@@ -2797,7 +2816,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
       setGeoStatusHtml(resp.status_html || '')
       setGeoFalhasHtml(resp.falhas_html || '')
       setGeoCorrecoes(parseCorrecoes(resp.falhas_para_correcao))
-      setMapaHtml(resp.mapa_html || '')
+      applyMapaResponse(resp)
       setDados(resp.dados || null)
       setCoordsInfo(resp.coords || null)
       setGeoCdlog(escolherColunaCdlogPadrao(resp.coords || null))
@@ -2817,7 +2836,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
       setGeoStatusHtml(resp.status_html || '')
       setGeoFalhasHtml(resp.falhas_html || '')
       setGeoCorrecoes(parseCorrecoes(resp.falhas_para_correcao))
-      setMapaHtml(resp.mapa_html || '')
+      applyMapaResponse(resp)
       setDados(resp.dados || null)
       setCoordsInfo(resp.coords || null)
       setManualLat(resp.coords?.colunas_disponiveis?.[0] || '')
@@ -3201,7 +3220,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
     await withBusy(async () => {
       const resp = await api.clearOutlierHistory(sessionId)
       setDados(resp.dados)
-      setMapaHtml(resp.mapa_html)
+      applyMapaResponse(resp)
       setResumoOutliers(resp.resumo_outliers || 'Excluidos: 0 | A excluir: 0 | A reincluir: 0 | Total: 0')
       setOutliersAnteriores([])
       setIteracao(1)
@@ -3287,6 +3306,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
     setKnnDetalheErro('')
     setKnnDetalheCardTitulo(`Aval. ${idx + 1}`)
     setKnnDetalheMapaHtml('')
+    setKnnDetalheMapaPayload(null)
     setKnnDetalheAvaliando([])
     setKnnDetalheTabela(null)
     setKnnDetalheInfo(null)
@@ -3294,6 +3314,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
     try {
       const resp = await api.evaluationKnnDetailsElab(sessionId, construirPayloadKnnAvaliacao(avaliacao))
       setKnnDetalheMapaHtml(String(resp?.mapa_html || ''))
+      setKnnDetalheMapaPayload(resp?.mapa_payload || null)
       setKnnDetalheAvaliando(Array.isArray(resp?.avaliando) ? resp.avaliando : [])
       setKnnDetalheTabela(resp?.vizinhos_tabela || null)
       setKnnDetalheInfo(resp?.knn || null)
@@ -3474,7 +3495,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
     if (!sessionId || !mapaGerado) return
     await withBusy(async () => {
       const resp = await api.updateElaboracaoMap(sessionId, value, nextModo)
-      setMapaHtml(resp.mapa_html || '')
+      applyMapaResponse(resp)
     })
   }
 
@@ -3483,7 +3504,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
     if (!sessionId || !mapaGerado) return
     await withBusy(async () => {
       const resp = await api.updateElaboracaoMap(sessionId, mapaVariavel, value)
-      setMapaHtml(resp.mapa_html || '')
+      applyMapaResponse(resp)
     })
   }
 
@@ -3495,7 +3516,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
     }
     await withBusy(async () => {
       const resp = await api.updateElaboracaoMap(sessionId, mapaVariavel, modoAtual)
-      setMapaHtml(resp.mapa_html || '')
+      applyMapaResponse(resp)
       setMapaGerado(true)
     })
   }
@@ -3506,7 +3527,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
     const extremoAbs = parseMapaResiduosExtremoAbs(mapaResiduosExtremoAbs)
     await withBusy(async () => {
       const resp = await api.updateElaboracaoResiduosMap(sessionId, MAPA_RESIDUOS_VARIAVEL, value, extremoAbs)
-      setMapaResiduosHtml(resp.mapa_html || '')
+      applyMapaResiduosResponse(resp)
       const extremoResp = Number(resp?.escala_extremo_abs)
       if (Number.isFinite(extremoResp) && extremoResp > 0) {
         setMapaResiduosExtremoAbs(String(Number(extremoResp)))
@@ -3523,7 +3544,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
     if (!sessionId || !mapaResiduosGerado) return
     await withBusy(async () => {
       const resp = await api.updateElaboracaoResiduosMap(sessionId, MAPA_RESIDUOS_VARIAVEL, mapaResiduosModo, extremoAbs)
-      setMapaResiduosHtml(resp.mapa_html || '')
+      applyMapaResiduosResponse(resp)
       const extremoResp = Number(resp?.escala_extremo_abs)
       if (Number.isFinite(extremoResp) && extremoResp > 0) {
         setMapaResiduosExtremoAbs(String(Number(extremoResp)))
@@ -3538,7 +3559,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
     const extremoAbs = parseMapaResiduosExtremoAbs(mapaResiduosExtremoAbs)
     await withBusy(async () => {
       const resp = await api.updateElaboracaoResiduosMap(sessionId, MAPA_RESIDUOS_VARIAVEL, mapaResiduosModo, extremoAbs)
-      setMapaResiduosHtml(resp.mapa_html || '')
+      applyMapaResiduosResponse(resp)
       const extremoResp = Number(resp?.escala_extremo_abs)
       if (Number.isFinite(extremoResp) && extremoResp > 0) {
         setMapaResiduosExtremoAbs(String(Number(extremoResp)))
@@ -4525,7 +4546,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
                       Fazer download
                     </button>
                   </div>
-                  <MapFrame html={mapaHtml} />
+                  <MapFrame html={mapaHtml} payload={mapaPayload} sessionId={sessionId} />
                 </details>
               )}
             </div>
@@ -5870,7 +5891,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
                       Fazer download
                     </button>
                   </div>
-                  <MapFrame html={mapaResiduosHtml} />
+                  <MapFrame html={mapaResiduosHtml} payload={mapaResiduosPayload} sessionId={sessionId} />
                 </>
               )}
             </div>
@@ -6312,7 +6333,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
                   </div>
 
                   <div className="avaliacao-knn-map-wrap">
-                    <MapFrame html={knnDetalheMapaHtml} />
+                    <MapFrame html={knnDetalheMapaHtml} payload={knnDetalheMapaPayload} sessionId={sessionId} />
                   </div>
 
                   <div className="subpanel avaliacao-knn-detalhes-box">

frontend/src/components/LeafletMapFrame.jsx

@@ -0,0 +1,1004 @@
+import React, { useEffect, useRef, useState } from 'react'
+import L from 'leaflet'
+import 'leaflet.fullscreen'
+import 'leaflet.heat'
+import { apiUrl, getAuthToken } from '../api'
+
+let bairrosGeojsonCache = null
+let bairrosGeojsonPromise = null
+
+function escapeHtml(value) {
+  return String(value ?? '')
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+}
+
+function buildTooltipHtml(tooltip) {
+  const title = String(tooltip?.title || '').trim()
+  const label = String(tooltip?.label || '').trim()
+  const value = String(tooltip?.value || '').trim()
+  return [
+    '<div style="font-family:\'Segoe UI\',Arial,sans-serif; font-size:14px; line-height:1.7; padding:2px 4px;">',
+    title ? `<b>${escapeHtml(title)}</b>` : '',
+    label && value ? `<br><span style="color:#555;">${escapeHtml(label)}:</span> <b>${escapeHtml(value)}</b>` : '',
+    '</div>',
+  ].join('')
+}
+
+function buildPopupErrorHtml(message) {
+  const text = escapeHtml(message || 'Falha ao carregar os dados do registro.')
+  return (
+    '<div style="font-family:\'Segoe UI\'; border-radius:8px; overflow:hidden; width:340px; max-width:340px;">'
+    + '<div style="background:#6c757d; color:white; padding:10px 15px; font-weight:600;">Dados do Registro</div>'
+    + `<div style="padding:12px 15px; background:#f8f9fa; color:#b42318; font-size:12px;">${text}</div>`
+    + '</div>'
+  )
+}
+
+function ensurePopupPager(root) {
+  if (!root || root.dataset.mesaPagerBound === '1') return
+  root.dataset.mesaPagerBound = '1'
+
+  const pages = Array.from(root.querySelectorAll('.mesa-popup-page'))
+  if (!pages.length) return
+
+  const numberWrap = root.querySelector('[data-page-number-wrap]')
+  if (numberWrap) {
+    numberWrap.innerHTML = ''
+    pages.forEach((_, index) => {
+      const button = document.createElement('button')
+      button.type = 'button'
+      button.dataset.pageNumber = String(index + 1)
+      button.textContent = String(index + 1)
+      button.style.border = '1px solid #ced8e2'
+      button.style.background = '#fff'
+      button.style.borderRadius = '6px'
+      button.style.padding = '2px 7px'
+      button.style.fontSize = '11px'
+      button.style.cursor = 'pointer'
+      button.style.color = '#4e6479'
+      button.style.display = 'inline-flex'
+      button.style.alignItems = 'center'
+      button.style.justifyContent = 'center'
+      numberWrap.appendChild(button)
+    })
+  }
+
+  function updatePager(targetPage) {
+    const total = pages.length
+    let current = Number.parseInt(String(targetPage || root.dataset.currentPage || '1'), 10)
+    if (!Number.isFinite(current) || current < 1) current = 1
+    if (current > total) current = total
+    root.dataset.currentPage = String(current)
+
+    pages.forEach((pageEl, index) => {
+      pageEl.style.display = index + 1 === current ? 'block' : 'none'
+    })
+
+    Array.from(root.querySelectorAll('[data-page-number]')).forEach((button) => {
+      const value = Number.parseInt(String(button.dataset.pageNumber || '1'), 10)
+      const ativo = value === current
+      button.style.background = ativo ? '#eaf1f7' : '#fff'
+      button.style.borderColor = ativo ? '#9fb4c8' : '#ced8e2'
+      button.style.color = ativo ? '#2f4b66' : '#4e6479'
+    })
+
+    const onFirst = current <= 1
+    const onLast = current >= total
+    const navState = [
+      ['first', onFirst],
+      ['prev', onFirst],
+      ['next', onLast],
+      ['last', onLast],
+    ]
+    navState.forEach(([action, disabled]) => {
+      const button = root.querySelector(`[data-a="${action}"]`)
+      if (!button) return
+      button.disabled = disabled
+      button.style.opacity = disabled ? '0.45' : '1'
+      button.style.cursor = disabled ? 'not-allowed' : 'pointer'
+    })
+  }
+
+  root.addEventListener('click', (event) => {
+    const button = event.target.closest('[data-a], [data-page-number]')
+    if (!button) return
+    event.preventDefault()
+    event.stopPropagation()
+
+    const current = Number.parseInt(String(root.dataset.currentPage || '1'), 10) || 1
+    if (button.dataset.pageNumber) {
+      updatePager(Number.parseInt(String(button.dataset.pageNumber), 10) || current)
+      return
+    }
+
+    const action = String(button.dataset.a || '').trim()
+    if (action === 'first') updatePager(1)
+    if (action === 'prev') updatePager(current - 1)
+    if (action === 'next') updatePager(current + 1)
+    if (action === 'last') updatePager(pages.length)
+  })
+
+  updatePager(1)
+}
+
+async function carregarBairrosGeojson(url) {
+  if (bairrosGeojsonCache) return bairrosGeojsonCache
+  if (bairrosGeojsonPromise) return bairrosGeojsonPromise
+
+  const endpoint = String(url || '').trim()
+  if (!endpoint) return null
+
+  bairrosGeojsonPromise = fetch(endpoint, {
+    headers: (() => {
+      const token = getAuthToken()
+      return token ? { 'X-Auth-Token': token } : {}
+    })(),
+  })
+    .then(async (response) => {
+      if (!response.ok) {
+        throw new Error('Falha ao carregar camada de bairros.')
+      }
+      return response.json()
+    })
+    .then((payload) => {
+      bairrosGeojsonCache = payload
+      return payload
+    })
+    .finally(() => {
+      bairrosGeojsonPromise = null
+    })
+
+  return bairrosGeojsonPromise
+}
+
+function construirLegendaControl(legend) {
+  if (!legend) return null
+
+  return L.control({ position: 'bottomright' })
+}
+
+function formatLegendNumber(value) {
+  const number = Number(value)
+  if (!Number.isFinite(number)) return ''
+  return number.toLocaleString('pt-BR', { maximumFractionDigits: 2 })
+}
+
+function buildLegendHtml(legend) {
+  const title = escapeHtml(String(legend?.title || '').trim())
+  const colors = Array.isArray(legend?.colors) ? legend.colors.filter(Boolean) : []
+  const gradient = colors.length ? colors.join(', ') : '#2ecc71, #e74c3c'
+  const tickValues = Array.isArray(legend?.tick_values) ? legend.tick_values : []
+  const tickLabels = Array.isArray(legend?.tick_labels) ? legend.tick_labels : []
+  const hasTicks = tickValues.length > 1 && tickValues.length === tickLabels.length
+
+  const ticksHtml = hasTicks
+    ? (
+        '<div class="mesa-leaflet-legend-ticks">'
+        + tickValues.map((tickValue, index) => {
+          const rawMin = Number(legend?.vmin)
+          const rawMax = Number(legend?.vmax)
+          const ratio = Number.isFinite(rawMin) && Number.isFinite(rawMax) && rawMax > rawMin
+            ? (Number(tickValue) - rawMin) / (rawMax - rawMin)
+            : index / Math.max(1, tickValues.length - 1)
+          const left = Math.max(0, Math.min(100, ratio * 100))
+          return (
+            `<span class="mesa-leaflet-legend-tick" style="left:${left.toFixed(4)}%;">`
+            + `${escapeHtml(String(tickLabels[index] || ''))}`
+            + '</span>'
+          )
+        }).join('')
+        + '</div>'
+      )
+    : ''
+
+  const scaleHtml = hasTicks
+    ? ''
+    : (
+        '<div class="mesa-leaflet-legend-scale">'
+        + `<span>${escapeHtml(formatLegendNumber(legend?.vmin))}</span>`
+        + `<span>${escapeHtml(formatLegendNumber(legend?.vmax))}</span>`
+        + '</div>'
+      )
+
+  return [
+    title ? `<strong>${title}</strong>` : '',
+    `<div class="mesa-leaflet-legend-bar" style="background: linear-gradient(90deg, ${gradient});"></div>`,
+    ticksHtml,
+    scaleHtml,
+  ].join('')
+}
+
+function addNoticeControl(map, notice) {
+  const message = String(notice?.message || '').trim()
+  if (!message) return null
+  const control = L.control({ position: notice?.position || 'topright' })
+  control.onAdd = () => {
+    const div = L.DomUtil.create('div', 'mesa-leaflet-notice')
+    div.innerHTML = escapeHtml(message)
+    return div
+  }
+  control.addTo(map)
+  return control
+}
+
+function buildIndiceBadgeHtml(indice) {
+  return (
+    '<div style="transform: translate(10px, -14px);display:inline-block;background: rgba(255, 255, 255, 0.9);'
+    + 'border: 1px solid rgba(28, 45, 66, 0.45);border-radius: 10px;padding: 1px 6px;font-size: 11px;'
+    + 'font-weight: 700;line-height: 1.2;color: #1f2f44;white-space: nowrap;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);'
+    + 'pointer-events: none;">'
+    + `${escapeHtml(indice)}`
+    + '</div>'
+  )
+}
+
+function formatCoordinate(value, positiveLabel, negativeLabel) {
+  const numeric = Number(value)
+  if (!Number.isFinite(numeric)) return '-'
+  const absolute = Math.abs(numeric)
+  const degrees = Math.floor(absolute)
+  const minutesFloat = (absolute - degrees) * 60
+  const minutes = Math.floor(minutesFloat)
+  const seconds = ((minutesFloat - minutes) * 60).toFixed(2)
+  const direction = numeric >= 0 ? positiveLabel : negativeLabel
+  return `${degrees}° ${minutes.toString().padStart(2, '0')}' ${seconds.padStart(5, '0')}" ${direction}`
+}
+
+function formatLatLng(latlng) {
+  if (!latlng) return ''
+  return `${formatCoordinate(latlng.lat, 'N', 'S')} / ${formatCoordinate(latlng.lng, 'L', 'W')}`
+}
+
+function formatDecimalLatLng(latlng) {
+  if (!latlng) return ''
+  return `${Number(latlng.lat).toFixed(6)} / ${Number(latlng.lng).toFixed(6)}`
+}
+
+function formatDistance(distanceMeters) {
+  const value = Number(distanceMeters)
+  if (!Number.isFinite(value) || value <= 0) return '0 m'
+  if (value >= 1000) {
+    return `${(value / 1000).toLocaleString('pt-BR', { maximumFractionDigits: 2 })} km`
+  }
+  return `${value.toLocaleString('pt-BR', { maximumFractionDigits: 1 })} m`
+}
+
+function computePolygonArea(latlngs) {
+  if (!Array.isArray(latlngs) || latlngs.length < 3) return 0
+  const d2r = Math.PI / 180
+  const radius = 6378137
+  let area = 0
+  for (let index = 0; index < latlngs.length; index += 1) {
+    const current = latlngs[index]
+    const next = latlngs[(index + 1) % latlngs.length]
+    area += (
+      (Number(next.lng) - Number(current.lng)) * d2r
+      * (2 + Math.sin(Number(current.lat) * d2r) + Math.sin(Number(next.lat) * d2r))
+    )
+  }
+  return Math.abs(area * radius * radius / 2)
+}
+
+function formatArea(areaSquareMeters) {
+  const value = Number(areaSquareMeters)
+  if (!Number.isFinite(value) || value <= 0) return ''
+  if (value >= 10000) {
+    return `${(value / 10000).toLocaleString('pt-BR', { maximumFractionDigits: 2 })} ha`
+  }
+  return `${value.toLocaleString('pt-BR', { maximumFractionDigits: 0 })} m²`
+}
+
+function buildLegacyOverlayLayers(payload) {
+  const overlays = []
+
+  if (payload?.show_bairros) {
+    overlays.push({
+      id: 'bairros',
+      label: 'Bairros',
+      show: true,
+      geojson_url: payload?.bairros_geojson_url || '',
+      geojson_style: {
+        color: '#4c6882',
+        weight: 1.0,
+        fillColor: '#f39c12',
+        fillOpacity: 0.04,
+      },
+      geojson_tooltip_properties: ['NOME', 'BAIRRO', 'NME_BAI', 'NOME_BAIRRO'],
+      geojson_tooltip_label: 'Bairro',
+    })
+  }
+
+  if (Array.isArray(payload?.market_points) && payload.market_points.length) {
+    overlays.push({
+      id: 'mercado',
+      label: 'Mercado',
+      show: true,
+      points: payload.market_points.map((item) => ({
+        ...item,
+        popup_request: Number.isFinite(Number(item?.row_id))
+          ? { kind: 'visualizacao_row', row_id: Number(item.row_id) }
+          : null,
+      })),
+    })
+
+    overlays.push({
+      id: 'indices',
+      label: 'Índices',
+      show: Boolean(payload?.show_indices),
+      markers: payload.market_points.map((item) => ({
+        lat: Number(item?.lat),
+        lon: Number(item?.lon),
+        marker_html: buildIndiceBadgeHtml(item?.indice),
+        icon_size: [72, 24],
+        icon_anchor: [0, 0],
+        class_name: 'mesa-indice-label',
+        interactive: false,
+        keyboard: false,
+      })),
+    })
+  }
+
+  if (Array.isArray(payload?.trabalhos_tecnicos_points) && payload.trabalhos_tecnicos_points.length) {
+    overlays.push({
+      id: 'avaliandos',
+      label: 'Avaliandos',
+      show: true,
+      markers: payload.trabalhos_tecnicos_points,
+    })
+  }
+
+  return overlays
+}
+
+async function readJsonSafely(response) {
+  const raw = await response.text()
+  if (!raw || !raw.trim()) return null
+  try {
+    return JSON.parse(raw)
+  } catch {
+    return null
+  }
+}
+
+export default function LeafletMapFrame({ payload, sessionId }) {
+  const hostRef = useRef(null)
+  const popupCacheRef = useRef(new Map())
+  const [runtimeError, setRuntimeError] = useState('')
+
+  useEffect(() => {
+    if (!hostRef.current || !payload) return undefined
+    let disposed = false
+    setRuntimeError('')
+    hostRef.current.innerHTML = ''
+
+    const map = L.map(hostRef.current, {
+      zoomControl: true,
+      preferCanvas: true,
+    })
+    let restoreMapInteractions = null
+    const bairrosPane = map.createPane('mesa-bairros-pane')
+    const marketPane = map.createPane('mesa-market-pane')
+    const trabalhosPane = map.createPane('mesa-trabalhos-pane')
+    const indicesPane = map.createPane('mesa-indices-pane')
+    bairrosPane.style.zIndex = '360'
+    marketPane.style.zIndex = '420'
+    trabalhosPane.style.zIndex = '430'
+    indicesPane.style.zIndex = '440'
+
+    const canvasRenderer = L.canvas({ padding: 0.5, pane: 'mesa-market-pane' })
+    const baseLayers = {}
+    const overlayLayers = {}
+
+    ;(payload.tile_layers || []).forEach((layerDef, index) => {
+      const tileLayer = L.tileLayer(String(layerDef?.url || ''), {
+        attribution: index === 0
+          ? '&copy; OpenStreetMap contributors'
+          : '&copy; OpenStreetMap contributors &copy; CARTO',
+      })
+      const label = String(layerDef?.label || layerDef?.id || `Base ${index + 1}`)
+      baseLayers[label] = tileLayer
+      if (index === 0) {
+        tileLayer.addTo(map)
+      }
+    })
+    const overlaySpecs = Array.isArray(payload.overlay_layers) && payload.overlay_layers.length
+      ? payload.overlay_layers
+      : buildLegacyOverlayLayers(payload)
+    const responsivePointContainers = []
+
+    const radiusBehavior = payload.radius_behavior || {}
+    const minRadius = Number(radiusBehavior.min_radius) || 1.6
+    const maxRadius = Number(radiusBehavior.max_radius) || 52.0
+    const referenceZoom = Number(radiusBehavior.reference_zoom) || 12.0
+    const growthFactor = Number(radiusBehavior.growth_factor) || 0.2
+
+    function clamp(value, min, max) {
+      return Math.max(min, Math.min(max, value))
+    }
+
+    function applyResponsiveRadius() {
+      const zoom = typeof map.getZoom === 'function' ? map.getZoom() : referenceZoom
+      const zoomDelta = zoom - referenceZoom
+      const expFactor = 2 ** (zoomDelta * growthFactor)
+      let floorScale = 1.0
+      if (zoomDelta >= 0) {
+        floorScale = 1 + zoomDelta * 0.22
+        if (zoom >= 15) {
+          floorScale += (zoom - 14) * 0.30
+        }
+      } else {
+        floorScale = Math.max(0.28, 1 + zoomDelta * 0.20)
+      }
+
+      responsivePointContainers.forEach((container) => {
+        if (!container || typeof container.eachLayer !== 'function') return
+        container.eachLayer((layer) => {
+          if (typeof layer.setRadius !== 'function') return
+          const base = Number(layer.options?.mesaBaseRadius || layer.options?.radius || 4)
+          const dynamicMin = Math.max(minRadius, base * floorScale)
+          const dynamicMax = Math.max(dynamicMin + 0.1, Math.min(maxRadius, base * 8.0))
+          layer.setRadius(clamp(base * expFactor, dynamicMin, dynamicMax))
+        })
+      })
+    }
+
+    async function carregarPopupVisualizacao(rowId, layer) {
+      const cacheKey = String(rowId)
+      const cached = popupCacheRef.current.get(cacheKey)
+      if (cached) {
+        const cachedHtml = typeof cached === 'string' ? cached : String(cached?.html || '')
+        const cachedWidth = typeof cached === 'string' ? 420 : (Number(cached?.width) || 420)
+        layer.unbindPopup()
+        layer.bindPopup(cachedHtml, { maxWidth: cachedWidth }).openPopup()
+        window.setTimeout(() => {
+          const root = layer.getPopup()?.getElement()?.querySelector('[data-pager]')
+          if (root) ensurePopupPager(root)
+        }, 0)
+        return
+      }
+
+      layer.bindPopup(
+        '<div style="font-family:\'Segoe UI\'; color:#6c757d; font-size:12px;">Carregando detalhes...</div>',
+        { maxWidth: 360 },
+      ).openPopup()
+
+      try {
+        const response = await fetch(apiUrl('/api/visualizacao/map/popup'), {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            ...(getAuthToken() ? { 'X-Auth-Token': getAuthToken() } : {}),
+          },
+          body: JSON.stringify({
+            session_id: sessionId,
+            row_id: rowId,
+          }),
+        })
+        const payloadResp = await readJsonSafely(response)
+        if (!response.ok) {
+          throw new Error(String(payloadResp?.detail || 'Falha ao carregar os dados do registro.'))
+        }
+        if (!payloadResp || typeof payloadResp !== 'object') {
+          throw new Error('Resposta vazia ao carregar os dados do registro.')
+        }
+        const popupHtml = String(payloadResp?.popup_html || '')
+        const popupWidth = Number(payloadResp?.popup_width) || 420
+        if (!popupHtml.trim()) {
+          throw new Error('Detalhes do registro indisponíveis para este ponto.')
+        }
+        popupCacheRef.current.set(cacheKey, { html: popupHtml, width: popupWidth })
+        layer.unbindPopup()
+        layer.bindPopup(popupHtml, { maxWidth: popupWidth }).openPopup()
+        window.setTimeout(() => {
+          const root = layer.getPopup()?.getElement()?.querySelector('[data-pager]')
+          if (root) ensurePopupPager(root)
+        }, 0)
+      } catch (error) {
+        layer.unbindPopup()
+        layer.bindPopup(buildPopupErrorHtml(error?.message || 'Falha ao carregar os dados do registro.'), { maxWidth: 360 }).openPopup()
+      }
+    }
+
+    function bindPointPopup(marker, item) {
+      const popupHtml = String(item?.popup_html || '').trim()
+      if (popupHtml) {
+        marker.bindPopup(popupHtml, { maxWidth: Number(item?.popup_max_width) || 420 })
+        return
+      }
+
+      const popupRequest = item?.popup_request
+      if (popupRequest?.kind === 'visualizacao_row' && Number.isFinite(Number(popupRequest?.row_id)) && sessionId) {
+        marker.on('click', () => {
+          void carregarPopupVisualizacao(Number(popupRequest.row_id), marker)
+        })
+      }
+    }
+
+    function addPointMarkers(layerGroup, items) {
+      if (!Array.isArray(items) || !items.length) return
+      responsivePointContainers.push(layerGroup)
+      items.forEach((item) => {
+        const marker = L.circleMarker([Number(item.lat), Number(item.lon)], {
+          renderer: canvasRenderer,
+          pane: String(item?.pane || 'mesa-market-pane'),
+          radius: Number(item?.base_radius) || 4,
+          color: String(item?.stroke_color || '#000000'),
+          weight: Number.isFinite(Number(item?.stroke_weight))
+            ? Number(item.stroke_weight)
+            : (Number(item?.base_radius) > 4 ? 1 : 0.8),
+          fill: item?.fill !== false,
+          fillColor: String(item?.color || item?.fill_color || '#FF8C00'),
+          fillOpacity: Number.isFinite(Number(item?.fill_opacity)) ? Number(item.fill_opacity) : 0.68,
+          interactive: item?.interactive !== false,
+          bubblingMouseEvents: false,
+        })
+        marker.options.mesaBaseRadius = Number(item?.base_radius) || 4
+        const tooltipHtml = String(item?.tooltip_html || '').trim()
+        if (tooltipHtml) {
+          marker.bindTooltip(tooltipHtml, { sticky: item?.tooltip_sticky !== false })
+        } else if (item?.tooltip) {
+          marker.bindTooltip(buildTooltipHtml(item.tooltip), { sticky: item?.tooltip_sticky !== false })
+        }
+        bindPointPopup(marker, item)
+        layerGroup.addLayer(marker)
+      })
+    }
+
+    function addMarkerOverlays(layerGroup, items) {
+      if (!Array.isArray(items) || !items.length) return
+      items.forEach((item) => {
+        const icon = L.divIcon({
+          html: String(item?.marker_html || ''),
+          iconSize: Array.isArray(item?.icon_size) ? item.icon_size : [14, 14],
+          iconAnchor: Array.isArray(item?.icon_anchor) ? item.icon_anchor : [7, 7],
+          className: String(item?.class_name || 'mesa-map-marker'),
+        })
+        const marker = L.marker([Number(item.lat), Number(item.lon)], {
+          icon,
+          pane: String(item?.pane || (String(item?.class_name || '').includes('indice') ? 'mesa-indices-pane' : 'mesa-trabalhos-pane')),
+          bubblingMouseEvents: item?.bubbling_mouse_events === true,
+          interactive: item?.interactive !== false,
+          keyboard: item?.keyboard !== false,
+        })
+        if (item?.ignore_bounds) {
+          marker.options.mesaIgnoreBounds = true
+        }
+        if (item?.tooltip_html) {
+          marker.bindTooltip(String(item.tooltip_html), { sticky: item?.tooltip_sticky !== false })
+        }
+        if (item?.popup_html) {
+          marker.bindPopup(String(item.popup_html), { maxWidth: Number(item?.popup_max_width) || 360 })
+        }
+        layerGroup.addLayer(marker)
+      })
+    }
+
+    function addShapeOverlays(layerGroup, shapes) {
+      if (!Array.isArray(shapes) || !shapes.length) return
+      shapes.forEach((shape) => {
+        const shapeType = String(shape?.type || shape?.shape_type || '').trim().toLowerCase()
+        const style = {
+          color: String(shape?.color || '#1f6fb2'),
+          weight: Number.isFinite(Number(shape?.weight)) ? Number(shape.weight) : 2,
+          opacity: Number.isFinite(Number(shape?.opacity)) ? Number(shape.opacity) : 0.8,
+          fill: shape?.fill === true,
+          fillColor: String(shape?.fill_color || shape?.color || '#1f6fb2'),
+          fillOpacity: Number.isFinite(Number(shape?.fill_opacity)) ? Number(shape.fill_opacity) : 0.12,
+          dashArray: shape?.dash_array ? String(shape.dash_array) : undefined,
+          pane: String(shape?.pane || 'mesa-bairros-pane'),
+        }
+        let layer = null
+
+        if (shapeType === 'circle' && Array.isArray(shape?.center) && shape.center.length === 2) {
+          layer = L.circle(shape.center, { ...style, radius: Number(shape?.radius_m) || 0 })
+        } else if (shapeType === 'polyline' && Array.isArray(shape?.coords) && shape.coords.length) {
+          layer = L.polyline(shape.coords, style)
+        } else if (shapeType === 'polygon' && Array.isArray(shape?.coords) && shape.coords.length) {
+          layer = L.polygon(shape.coords, style)
+        } else if (shapeType === 'circlemarker' && Array.isArray(shape?.center) && shape.center.length === 2) {
+          layer = L.circleMarker(shape.center, { ...style, radius: Number(shape?.radius) || 6 })
+        }
+
+        if (!layer) return
+        if (shape?.ignore_bounds) {
+          layer.options.mesaIgnoreBounds = true
+        }
+        if (shape?.tooltip_html) {
+          layer.bindTooltip(String(shape.tooltip_html), { sticky: shape?.tooltip_sticky !== false })
+        }
+        if (shape?.popup_html) {
+          layer.bindPopup(String(shape.popup_html), { maxWidth: Number(shape?.popup_max_width) || 360 })
+        }
+        layerGroup.addLayer(layer)
+      })
+    }
+
+    function addGeoJsonOverlay(layerGroup, spec) {
+      const geojsonLayer = L.geoJSON(null, {
+        pane: String(spec?.geojson_pane || 'mesa-bairros-pane'),
+        style: () => ({
+          color: String(spec?.geojson_style?.color || '#4c6882'),
+          weight: Number.isFinite(Number(spec?.geojson_style?.weight)) ? Number(spec.geojson_style.weight) : 1.0,
+          fillColor: String(spec?.geojson_style?.fillColor || '#f39c12'),
+          fillOpacity: Number.isFinite(Number(spec?.geojson_style?.fillOpacity))
+            ? Number(spec.geojson_style.fillOpacity)
+            : 0.04,
+        }),
+        onEachFeature: (feature, layer) => {
+          const props = feature?.properties || {}
+          const candidates = Array.isArray(spec?.geojson_tooltip_properties) ? spec.geojson_tooltip_properties : []
+          const value = candidates.map((key) => props?.[key]).find((entry) => String(entry || '').trim())
+          if (value) {
+            const prefix = String(spec?.geojson_tooltip_label || '').trim()
+            layer.bindTooltip(prefix ? `${prefix}: ${String(value)}` : String(value), { sticky: false })
+          }
+        },
+      })
+      layerGroup.addLayer(geojsonLayer)
+
+      if (spec?.geojson_data) {
+        geojsonLayer.addData(spec.geojson_data)
+        return
+      }
+      if (!spec?.geojson_url) return
+      void carregarBairrosGeojson(spec.geojson_url)
+        .then((geojson) => {
+          if (disposed || !geojson) return
+          geojsonLayer.addData(geojson)
+        })
+        .catch(() => {
+          // camada opcional; manter o mapa funcional sem ela
+        })
+    }
+
+    function addHeatmapOverlay(layerGroup, heatmapSpec) {
+      if (!heatmapSpec || typeof L.heatLayer !== 'function') return
+      const points = Array.isArray(heatmapSpec?.points)
+        ? heatmapSpec.points
+          .map((item) => {
+            const lat = Number(item?.lat)
+            const lon = Number(item?.lon)
+            const weight = Number(item?.weight)
+            if (!Number.isFinite(lat) || !Number.isFinite(lon)) return null
+            if (Number.isFinite(weight)) return [lat, lon, weight]
+            return [lat, lon]
+          })
+          .filter(Boolean)
+        : []
+      if (!points.length) return
+      const layer = L.heatLayer(points, {
+        radius: Number(heatmapSpec?.radius) || 20,
+        blur: Number(heatmapSpec?.blur) || 18,
+        minOpacity: Number.isFinite(Number(heatmapSpec?.min_opacity)) ? Number(heatmapSpec.min_opacity) : 0.28,
+        maxZoom: Number(heatmapSpec?.max_zoom) || 17,
+        gradient: heatmapSpec?.gradient || undefined,
+      })
+      layerGroup.addLayer(layer)
+    }
+
+    overlaySpecs.forEach((spec, index) => {
+      const label = String(spec?.label || spec?.id || `Camada ${index + 1}`)
+      const layerGroup = L.layerGroup()
+      overlayLayers[label] = layerGroup
+      if (spec?.show !== false) {
+        layerGroup.addTo(map)
+      }
+      if (spec?.geojson_url || spec?.geojson_data) {
+        addGeoJsonOverlay(layerGroup, spec)
+      }
+      addHeatmapOverlay(layerGroup, spec?.heatmap)
+      addShapeOverlays(layerGroup, spec?.shapes)
+      addPointMarkers(layerGroup, spec?.points)
+      addMarkerOverlays(layerGroup, spec?.markers)
+    })
+
+    if (payload.controls?.layer_control) {
+      L.control.layers(baseLayers, overlayLayers, { collapsed: true }).addTo(map)
+    }
+    if (payload.controls?.fullscreen && typeof L.control.fullscreen === 'function') {
+      L.control.fullscreen({ position: 'topleft' }).addTo(map)
+    }
+    if (payload.controls?.measure) {
+      const disableInteractionsForMeasure = () => {
+        if (restoreMapInteractions) return
+        const states = {
+          dragging: !!map.dragging?.enabled?.(),
+          doubleClickZoom: !!map.doubleClickZoom?.enabled?.(),
+          boxZoom: !!map.boxZoom?.enabled?.(),
+          keyboard: !!map.keyboard?.enabled?.(),
+          touchZoom: !!map.touchZoom?.enabled?.(),
+          scrollWheelZoom: !!map.scrollWheelZoom?.enabled?.(),
+        }
+        map.dragging?.disable?.()
+        map.doubleClickZoom?.disable?.()
+        map.boxZoom?.disable?.()
+        map.keyboard?.disable?.()
+        map.touchZoom?.disable?.()
+        map.scrollWheelZoom?.disable?.()
+        if (map.getContainer()) {
+          map.getContainer().style.cursor = 'crosshair'
+        }
+        restoreMapInteractions = () => {
+          if (states.dragging) map.dragging?.enable?.()
+          if (states.doubleClickZoom) map.doubleClickZoom?.enable?.()
+          if (states.boxZoom) map.boxZoom?.enable?.()
+          if (states.keyboard) map.keyboard?.enable?.()
+          if (states.touchZoom) map.touchZoom?.enable?.()
+          if (states.scrollWheelZoom) map.scrollWheelZoom?.enable?.()
+          if (map.getContainer()) {
+            map.getContainer().style.cursor = ''
+          }
+          restoreMapInteractions = null
+        }
+      }
+      const measureLayerGroup = L.layerGroup().addTo(map)
+      const measureState = {
+        panelOpen: false,
+        active: false,
+        points: [],
+      }
+
+      let measureRoot = null
+      let measureInteraction = null
+      let measureHint = null
+      let measureResults = null
+      let measureStartButton = null
+      let measureCancelButton = null
+      let measureFinishButton = null
+      let measureCloseButton = null
+
+      function renderMeasureGeometry() {
+        measureLayerGroup.clearLayers()
+        if (!measureState.points.length) return
+
+        if (measureState.points.length >= 2) {
+          L.polyline(measureState.points, {
+            color: '#1f6fb2',
+            weight: 3,
+            opacity: 0.9,
+            dashArray: measureState.active ? '8 6' : undefined,
+          }).addTo(measureLayerGroup)
+        }
+
+        if (!measureState.active && measureState.points.length >= 3) {
+          L.polygon(measureState.points, {
+            color: '#1f6fb2',
+            weight: 2,
+            opacity: 0.88,
+            fillColor: '#1f6fb2',
+            fillOpacity: 0.12,
+          }).addTo(measureLayerGroup)
+        }
+
+        measureState.points.forEach((latlng) => {
+          L.circleMarker(latlng, {
+            radius: 5,
+            color: '#ffffff',
+            weight: 2,
+            fillColor: '#1f6fb2',
+            fillOpacity: 1,
+            pane: 'mesa-indices-pane',
+          }).addTo(measureLayerGroup)
+        })
+      }
+
+      function renderMeasurePanel() {
+        if (!measureRoot || !measureInteraction || !measureHint || !measureResults) return
+        measureRoot.classList.toggle('leaflet-control-measure-expanded', measureState.panelOpen)
+        measureInteraction.style.display = measureState.panelOpen ? 'block' : 'none'
+        if (!measureState.panelOpen) return
+
+        const pointCount = measureState.points.length
+        const lastPoint = pointCount ? measureState.points[pointCount - 1] : null
+        const distance = pointCount >= 2
+          ? measureState.points.reduce((total, point, index, list) => {
+            if (index === 0) return total
+            return total + map.distance(list[index - 1], point)
+          }, 0)
+          : 0
+        const area = !measureState.active && pointCount >= 3 ? computePolygonArea(measureState.points) : 0
+
+        if (measureState.active) {
+          measureHint.textContent = pointCount
+            ? 'Clique no mapa para adicionar pontos. Dê duplo clique ou finalize para encerrar.'
+            : 'Clique no mapa para iniciar a medição.'
+        } else if (pointCount) {
+          measureHint.textContent = 'Medição concluída.'
+        } else {
+          measureHint.textContent = 'Inicie uma nova medição.'
+        }
+
+        const parts = []
+        if (lastPoint) {
+          parts.push(
+            '<div class="mesa-leaflet-measure-row">'
+            + '<strong>Último ponto</strong>'
+            + `<span>${escapeHtml(formatLatLng(lastPoint))}</span>`
+            + `<span>${escapeHtml(formatDecimalLatLng(lastPoint))}</span>`
+            + '</div>',
+          )
+        }
+        if (distance > 0) {
+          parts.push(
+            '<div class="mesa-leaflet-measure-row">'
+            + '<strong>Distância total</strong>'
+            + `<span>${escapeHtml(formatDistance(distance))}</span>`
+            + '</div>',
+          )
+        }
+        if (area > 0) {
+          parts.push(
+            '<div class="mesa-leaflet-measure-row">'
+            + '<strong>Área</strong>'
+            + `<span>${escapeHtml(formatArea(area))}</span>`
+            + '</div>',
+          )
+        }
+        measureResults.innerHTML = parts.join('')
+        measureResults.style.display = parts.length ? 'block' : 'none'
+        measureStartButton.style.display = !measureState.active ? 'inline-flex' : 'none'
+        measureStartButton.textContent = measureState.points.length ? 'Nova medição' : 'Criar nova medição'
+        measureCancelButton.style.display = measureState.active || measureState.points.length ? 'inline-flex' : 'none'
+        measureFinishButton.style.display = measureState.active && measureState.points.length >= 2 ? 'inline-flex' : 'none'
+        measureCloseButton.style.display = !measureState.active ? 'inline-flex' : 'none'
+      }
+
+      function resetMeasureState({ closePanel = false } = {}) {
+        measureState.active = false
+        measureState.points = []
+        measureLayerGroup.clearLayers()
+        restoreMapInteractions?.()
+        if (closePanel) {
+          measureState.panelOpen = false
+        }
+        renderMeasurePanel()
+      }
+
+      function startMeasurement() {
+        measureState.panelOpen = true
+        measureState.active = true
+        measureState.points = []
+        measureLayerGroup.clearLayers()
+        disableInteractionsForMeasure()
+        renderMeasurePanel()
+      }
+
+      function finishMeasurement() {
+        if (!measureState.active) return
+        measureState.active = false
+        restoreMapInteractions?.()
+        renderMeasureGeometry()
+        renderMeasurePanel()
+      }
+
+      function onMeasureMapClick(event) {
+        if (!measureState.active || !event?.latlng) return
+        const lastPoint = measureState.points[measureState.points.length - 1]
+        if (lastPoint && typeof event.latlng.equals === 'function' && event.latlng.equals(lastPoint)) return
+        measureState.points = [...measureState.points, event.latlng]
+        renderMeasureGeometry()
+        renderMeasurePanel()
+      }
+
+      function onMeasureMapDblClick(event) {
+        if (!measureState.active) return
+        L.DomEvent.stop(event)
+        finishMeasurement()
+      }
+
+      map.on('click', onMeasureMapClick)
+      map.on('dblclick', onMeasureMapDblClick)
+
+      const measureControl = L.control({ position: 'topright' })
+      measureControl.onAdd = () => {
+        measureRoot = L.DomUtil.create('div', 'leaflet-control-measure mesa-leaflet-measure leaflet-bar leaflet-control')
+        measureRoot.setAttribute('aria-haspopup', 'true')
+
+        const toggle = L.DomUtil.create('a', 'leaflet-control-measure-toggle mesa-leaflet-measure-toggle', measureRoot)
+        toggle.href = '#'
+        toggle.title = 'Medir distâncias'
+        toggle.setAttribute('aria-label', 'Medir distâncias')
+        toggle.innerHTML = '<span class="mesa-sr-only">Medir distâncias</span>'
+
+        measureInteraction = L.DomUtil.create('div', 'leaflet-control-measure-interaction mesa-leaflet-measure-interaction', measureRoot)
+        measureInteraction.style.display = 'none'
+
+        const title = L.DomUtil.create('h3', 'mesa-leaflet-measure-title', measureInteraction)
+        title.textContent = 'Medir distâncias'
+
+        measureHint = L.DomUtil.create('p', 'mesa-leaflet-measure-hint', measureInteraction)
+        measureResults = L.DomUtil.create('div', 'mesa-leaflet-measure-results', measureInteraction)
+
+        const actions = L.DomUtil.create('div', 'mesa-leaflet-measure-actions', measureInteraction)
+        measureStartButton = L.DomUtil.create('button', 'mesa-leaflet-measure-btn is-primary', actions)
+        measureStartButton.type = 'button'
+        measureStartButton.textContent = 'Criar nova medição'
+
+        measureCancelButton = L.DomUtil.create('button', 'mesa-leaflet-measure-btn', actions)
+        measureCancelButton.type = 'button'
+        measureCancelButton.textContent = 'Cancelar'
+
+        measureFinishButton = L.DomUtil.create('button', 'mesa-leaflet-measure-btn', actions)
+        measureFinishButton.type = 'button'
+        measureFinishButton.textContent = 'Finalizar'
+
+        measureCloseButton = L.DomUtil.create('button', 'mesa-leaflet-measure-btn', actions)
+        measureCloseButton.type = 'button'
+        measureCloseButton.textContent = 'Fechar'
+
+        L.DomEvent.disableClickPropagation(measureRoot)
+        L.DomEvent.disableScrollPropagation(measureRoot)
+        L.DomEvent.on(toggle, 'click', (event) => {
+          L.DomEvent.stop(event)
+          if (measureState.active) return
+          measureState.panelOpen = !measureState.panelOpen
+          renderMeasurePanel()
+        })
+        L.DomEvent.on(measureStartButton, 'click', (event) => {
+          L.DomEvent.stop(event)
+          startMeasurement()
+        })
+        L.DomEvent.on(measureCancelButton, 'click', (event) => {
+          L.DomEvent.stop(event)
+          resetMeasureState()
+        })
+        L.DomEvent.on(measureFinishButton, 'click', (event) => {
+          L.DomEvent.stop(event)
+          finishMeasurement()
+        })
+        L.DomEvent.on(measureCloseButton, 'click', (event) => {
+          L.DomEvent.stop(event)
+          if (measureState.active) return
+          measureState.panelOpen = false
+          renderMeasurePanel()
+        })
+
+        renderMeasurePanel()
+        return measureRoot
+      }
+      measureControl.addTo(map)
+    }
+
+    if (payload.legend?.title) {
+      const legendControl = construirLegendaControl(payload.legend)
+      if (legendControl) {
+        legendControl.onAdd = () => {
+          const div = L.DomUtil.create('div', 'mesa-leaflet-legend')
+          div.innerHTML = buildLegendHtml(payload.legend)
+          return div
+        }
+        legendControl.addTo(map)
+      }
+    }
+
+    addNoticeControl(map, payload.notice)
+
+    map.on('zoomend overlayadd overlayremove', applyResponsiveRadius)
+    applyResponsiveRadius()
+
+    const bounds = Array.isArray(payload.bounds) ? payload.bounds : null
+    if (bounds && bounds.length === 2) {
+      map.fitBounds(bounds, { padding: [48, 48], maxZoom: 18, animate: false })
+    } else if (Array.isArray(payload.center) && payload.center.length === 2) {
+      map.setView(payload.center, 12)
+    } else {
+      setRuntimeError('Falha ao montar mapa interativo.')
+    }
+
+    return () => {
+      disposed = true
+      restoreMapInteractions?.()
+      map.remove()
+    }
+  }, [payload, sessionId])
+
+  return (
+    <div className="map-frame leaflet-map-host">
+      <div ref={hostRef} className="leaflet-map-canvas" />
+      {runtimeError ? <div className="leaflet-map-runtime-error">{runtimeError}</div> : null}
+    </div>
+  )
+}

frontend/src/components/MapFrame.jsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react'
+import LeafletMapFrame from './LeafletMapFrame'
 
 function hashHtml(value) {
   let hash = 0
@@ -10,7 +11,7 @@ function hashHtml(value) {
   return `${value.length}-${Math.abs(hash)}`
 }
 
-export default function MapFrame({ html }) {
+export default function MapFrame({ html, payload = null, sessionId = '' }) {
   const iframeRef = useRef(null)
   const timersRef = useRef([])
   const frameKey = useMemo(() => hashHtml(html || ''), [html])
@@ -129,6 +130,10 @@ export default function MapFrame({ html }) {
     }
   }, [clearTimers])
 
+  if (payload && payload.type === 'mesa_leaflet_payload') {
+    return <LeafletMapFrame payload={payload} sessionId={sessionId} />
+  }
+
   if (!html) {
     return <div className="empty-box">Mapa indisponivel.</div>
   }

frontend/src/components/PesquisaTab.jsx

@@ -980,6 +980,7 @@ export default function PesquisaTab({
   const [mapaError, setMapaError] = useState('')
   const [mapaStatus, setMapaStatus] = useState('')
   const [mapaHtmls, setMapaHtmls] = useState({ pontos: '', cobertura: '' })
+  const [mapaPayloads, setMapaPayloads] = useState({ pontos: null, cobertura: null })
   const [mapaModoExibicao, setMapaModoExibicao] = useState('pontos')
   const [mapaTrabalhosTecnicosModelosModo, setMapaTrabalhosTecnicosModelosModo] = useState('selecionados_e_outras_versoes')
   const [mapaTrabalhosTecnicosProximidadeModo, setMapaTrabalhosTecnicosProximidadeModo] = useState('sem_proximidade')
@@ -999,6 +1000,7 @@ export default function PesquisaTab({
   const [modeloAbertoCoeficientes, setModeloAbertoCoeficientes] = useState(null)
   const [modeloAbertoObsCalc, setModeloAbertoObsCalc] = useState(null)
   const [modeloAbertoMapaHtml, setModeloAbertoMapaHtml] = useState('')
+  const [modeloAbertoMapaPayload, setModeloAbertoMapaPayload] = useState(null)
   const [modeloAbertoMapaChoices, setModeloAbertoMapaChoices] = useState(['Visualização Padrão'])
   const [modeloAbertoMapaVar, setModeloAbertoMapaVar] = useState('Visualização Padrão')
   const [modeloAbertoTrabalhosTecnicosModelosModo, setModeloAbertoTrabalhosTecnicosModelosModo] = useState(MODELO_ABERTO_TRABALHOS_TECNICOS_PADRAO)
@@ -1008,6 +1010,8 @@ export default function PesquisaTab({
   const [modeloAbertoPlotHistograma, setModeloAbertoPlotHistograma] = useState(null)
   const [modeloAbertoPlotCook, setModeloAbertoPlotCook] = useState(null)
   const [modeloAbertoPlotCorr, setModeloAbertoPlotCorr] = useState(null)
+  const [modeloAbertoLoadedTabs, setModeloAbertoLoadedTabs] = useState({})
+  const [modeloAbertoLoadingTabs, setModeloAbertoLoadingTabs] = useState({})
   const sectionResultadosRef = useRef(null)
   const sectionMapaRef = useRef(null)
   const scrollMapaHandledRef = useRef('')
@@ -1015,6 +1019,8 @@ export default function PesquisaTab({
   const resultRequestSeqRef = useRef(0)
   const searchRequestSeqRef = useRef(0)
   const contextRequestSeqRef = useRef(0)
+  const modeloAbertoPendingRequestsRef = useRef({})
+  const modeloAbertoOpenVersionRef = useRef(0)
 
   const sugestoes = result.sugestoes || {}
   const opcoesTipoModelo = useMemo(
@@ -1038,7 +1044,8 @@ export default function PesquisaTab({
   const todosSelecionados = resultIds.length > 0 && resultIds.every((id) => selectedIds.includes(id))
   const algunsSelecionados = resultIds.some((id) => selectedIds.includes(id))
   const mapaHtmlAtual = mapaHtmls[mapaModoExibicao] || ''
-  const mapaFoiGerado = Boolean(mapaHtmls.pontos || mapaHtmls.cobertura)
+  const mapaPayloadAtual = mapaPayloads[mapaModoExibicao] || null
+  const mapaFoiGerado = Boolean(mapaHtmls.pontos || mapaHtmls.cobertura || mapaPayloads.pontos || mapaPayloads.cobertura)
   const pesquisaShareAvaliando = !localizacaoMultipla ? (avaliandosGeoPayload[0] || null) : null
   const pesquisaShareHref = buildPesquisaLink(filters, pesquisaShareAvaliando)
   const pesquisaShareDisabled = localizacaoMultipla
@@ -1089,6 +1096,7 @@ export default function PesquisaTab({
 
   function resetMapaPesquisa() {
     setMapaHtmls({ pontos: '', cobertura: '' })
+    setMapaPayloads({ pontos: null, cobertura: null })
     setMapaStatus('')
     setMapaError('')
     setMapaModoExibicao('pontos')
@@ -1126,6 +1134,7 @@ export default function PesquisaTab({
 
     if (!idsValidos.length) {
       setMapaHtmls({ pontos: '', cobertura: '' })
+      setMapaPayloads({ pontos: null, cobertura: null })
       setMapaStatus('Nenhum modelo marcado para exibição no mapa.')
       setMapaError('')
       mapaTrabalhosTecnicosConfigRef.current = ''
@@ -1149,10 +1158,17 @@ export default function PesquisaTab({
           || (modoExibicaoSolicitado === 'cobertura' ? response.mapa_html_cobertura : response.mapa_html_pontos)
           || '',
       )
+      const mapaPayloadSolicitado = response.mapa_payload
+        || (modoExibicaoSolicitado === 'cobertura' ? response.mapa_payload_cobertura : response.mapa_payload_pontos)
+        || null
       setMapaHtmls({
         pontos: modoExibicaoSolicitado === 'pontos' ? mapaHtmlSolicitado : '',
         cobertura: modoExibicaoSolicitado === 'cobertura' ? mapaHtmlSolicitado : '',
       })
+      setMapaPayloads({
+        pontos: modoExibicaoSolicitado === 'pontos' ? mapaPayloadSolicitado : null,
+        cobertura: modoExibicaoSolicitado === 'cobertura' ? mapaPayloadSolicitado : null,
+      })
       setMapaStatus(response.status || '')
       mapaTrabalhosTecnicosConfigRef.current = buildMapaTrabalhosTecnicosConfigKey(trabalhosTecnicosConfig)
     } catch (err) {
@@ -1422,25 +1438,125 @@ export default function PesquisaTab({
     }
   }
 
-  function preencherModeloAberto(resp) {
-    setModeloAbertoDados(resp?.dados || null)
-    setModeloAbertoEstatisticas(resp?.estatisticas || null)
-    setModeloAbertoEscalasHtml(resp?.escalas_html || '')
-    setModeloAbertoDadosTransformados(resp?.dados_transformados || null)
-    setModeloAbertoResumoHtml(resp?.resumo_html || '')
-    setModeloAbertoEquacoes(resp?.equacoes || null)
-    setModeloAbertoCoeficientes(resp?.coeficientes || null)
-    setModeloAbertoObsCalc(resp?.obs_calc || null)
-    setModeloAbertoMapaHtml(resp?.mapa_html || '')
-    setModeloAbertoMapaChoices(resp?.mapa_choices || ['Visualização Padrão'])
+  function limparConteudoModeloAberto() {
+    modeloAbertoPendingRequestsRef.current = {}
+    setModeloAbertoDados(null)
+    setModeloAbertoEstatisticas(null)
+    setModeloAbertoEscalasHtml('')
+    setModeloAbertoDadosTransformados(null)
+    setModeloAbertoResumoHtml('')
+    setModeloAbertoEquacoes(null)
+    setModeloAbertoCoeficientes(null)
+    setModeloAbertoObsCalc(null)
+    setModeloAbertoMapaHtml('')
+    setModeloAbertoMapaPayload(null)
+    setModeloAbertoMapaChoices(['Visualização Padrão'])
     setModeloAbertoMapaVar('Visualização Padrão')
-    setModeloAbertoTrabalhosTecnicosModelosModo(resp?.trabalhos_tecnicos_modelos_modo || MODELO_ABERTO_TRABALHOS_TECNICOS_PADRAO)
-    setModeloAbertoTrabalhosTecnicos(Array.isArray(resp?.trabalhos_tecnicos) ? resp.trabalhos_tecnicos : [])
-    setModeloAbertoPlotObsCalc(resp?.grafico_obs_calc || null)
-    setModeloAbertoPlotResiduos(resp?.grafico_residuos || null)
-    setModeloAbertoPlotHistograma(resp?.grafico_histograma || null)
-    setModeloAbertoPlotCook(resp?.grafico_cook || null)
-    setModeloAbertoPlotCorr(resp?.grafico_correlacao || null)
+    setModeloAbertoTrabalhosTecnicosModelosModo(MODELO_ABERTO_TRABALHOS_TECNICOS_PADRAO)
+    setModeloAbertoTrabalhosTecnicos([])
+    setModeloAbertoPlotObsCalc(null)
+    setModeloAbertoPlotResiduos(null)
+    setModeloAbertoPlotHistograma(null)
+    setModeloAbertoPlotCook(null)
+    setModeloAbertoPlotCorr(null)
+    setModeloAbertoLoadedTabs({})
+    setModeloAbertoLoadingTabs({})
+  }
+
+  function aplicarSecaoModeloAberto(secao, resp) {
+    const key = String(secao || '').trim()
+    if (key === 'dados_mercado') {
+      setModeloAbertoDados(resp?.dados || null)
+      return
+    }
+    if (key === 'metricas') {
+      setModeloAbertoEstatisticas(resp?.estatisticas || null)
+      return
+    }
+    if (key === 'transformacoes') {
+      setModeloAbertoEscalasHtml(resp?.escalas_html || '')
+      setModeloAbertoDadosTransformados(resp?.dados_transformados || null)
+      return
+    }
+    if (key === 'resumo') {
+      setModeloAbertoResumoHtml(resp?.resumo_html || '')
+      setModeloAbertoEquacoes(resp?.equacoes || null)
+      return
+    }
+    if (key === 'coeficientes') {
+      setModeloAbertoCoeficientes(resp?.coeficientes || null)
+      return
+    }
+    if (key === 'obs_calc') {
+      setModeloAbertoObsCalc(resp?.obs_calc || null)
+      return
+    }
+    if (key === 'graficos') {
+      setModeloAbertoPlotObsCalc(resp?.grafico_obs_calc || null)
+      setModeloAbertoPlotResiduos(resp?.grafico_residuos || null)
+      setModeloAbertoPlotHistograma(resp?.grafico_histograma || null)
+      setModeloAbertoPlotCook(resp?.grafico_cook || null)
+      setModeloAbertoPlotCorr(resp?.grafico_correlacao || null)
+      return
+    }
+    if (key === 'trabalhos_tecnicos') {
+      setModeloAbertoTrabalhosTecnicos(Array.isArray(resp?.trabalhos_tecnicos) ? resp.trabalhos_tecnicos : [])
+      setModeloAbertoTrabalhosTecnicosModelosModo(resp?.trabalhos_tecnicos_modelos_modo || MODELO_ABERTO_TRABALHOS_TECNICOS_PADRAO)
+      return
+    }
+    if (key === 'mapa') {
+      const nextChoices = Array.isArray(resp?.mapa_choices) && resp.mapa_choices.length
+        ? resp.mapa_choices
+        : ['Visualização Padrão']
+      setModeloAbertoMapaHtml(resp?.mapa_html || '')
+      setModeloAbertoMapaPayload(resp?.mapa_payload || null)
+      setModeloAbertoMapaChoices(nextChoices)
+      setModeloAbertoMapaVar((current) => (nextChoices.includes(current) ? current : 'Visualização Padrão'))
+      setModeloAbertoTrabalhosTecnicos(Array.isArray(resp?.trabalhos_tecnicos) ? resp.trabalhos_tecnicos : [])
+      setModeloAbertoTrabalhosTecnicosModelosModo(resp?.trabalhos_tecnicos_modelos_modo || MODELO_ABERTO_TRABALHOS_TECNICOS_PADRAO)
+    }
+  }
+
+  async function garantirSecaoModeloAberto(secao, options = {}) {
+    const secaoNormalizada = String(secao || '').trim()
+    if (!sessionId || !secaoNormalizada) return
+    if (!options.force && modeloAbertoLoadedTabs[secaoNormalizada]) return
+    if (modeloAbertoPendingRequestsRef.current[secaoNormalizada]) {
+      await modeloAbertoPendingRequestsRef.current[secaoNormalizada]
+      return
+    }
+
+    const expectedVersion = options.expectedVersion ?? modeloAbertoOpenVersionRef.current
+    const trabalhosTecnicosModo = options.trabalhosTecnicosModelosModo || modeloAbertoTrabalhosTecnicosModelosModo
+    setModeloAbertoLoadingTabs((prev) => ({ ...prev, [secaoNormalizada]: true }))
+
+    const request = (async () => {
+      try {
+        const resp = await api.visualizacaoSection(sessionId, secaoNormalizada, trabalhosTecnicosModo)
+        if (modeloAbertoOpenVersionRef.current !== expectedVersion) return
+        aplicarSecaoModeloAberto(secaoNormalizada, resp)
+        setModeloAbertoLoadedTabs((prev) => ({
+          ...prev,
+          [secaoNormalizada]: true,
+          ...(secaoNormalizada === 'mapa' ? { trabalhos_tecnicos: true } : {}),
+        }))
+      } catch (err) {
+        if (modeloAbertoOpenVersionRef.current !== expectedVersion) return
+        setModeloAbertoError(err.message || 'Falha ao abrir modelo.')
+      } finally {
+        if (modeloAbertoOpenVersionRef.current !== expectedVersion) return
+        setModeloAbertoLoadingTabs((prev) => ({ ...prev, [secaoNormalizada]: false }))
+      }
+    })()
+
+    modeloAbertoPendingRequestsRef.current[secaoNormalizada] = request
+    try {
+      await request
+    } finally {
+      if (modeloAbertoPendingRequestsRef.current[secaoNormalizada] === request) {
+        delete modeloAbertoPendingRequestsRef.current[secaoNormalizada]
+      }
+    }
   }
 
   async function onAbrirModelo(modelo) {
@@ -1456,17 +1572,29 @@ export default function PesquisaTab({
       setError('Sessao indisponivel no momento. Aguarde e tente novamente.')
       return
     }
+    modeloAbertoOpenVersionRef.current += 1
+    const openVersion = modeloAbertoOpenVersionRef.current
+    limparConteudoModeloAberto()
     setModeloAbertoLoading(true)
     setModeloAbertoError('')
+    setModeloAbertoMeta({
+      id: modelo.id,
+      nome: modelo.nome_modelo || modelo.arquivo || modelo.id,
+      observacao: '',
+    })
     try {
-      await api.visualizacaoRepositorioCarregar(sessionId, modelo.id)
-      const resp = await api.exibirVisualizacao(sessionId, MODELO_ABERTO_TRABALHOS_TECNICOS_PADRAO)
-      preencherModeloAberto(resp)
+      const resp = await api.visualizacaoRepositorioCarregar(sessionId, modelo.id)
+      if (modeloAbertoOpenVersionRef.current !== openVersion) return
       setModeloAbertoActiveTab('mapa')
       setModeloAbertoMeta({
         id: modelo.id,
         nome: modelo.nome_modelo || modelo.arquivo || modelo.id,
-        observacao: String(resp?.meta_modelo?.observacao_modelo || '').trim(),
+        observacao: String(resp?.observacao_modelo || '').trim(),
+      })
+      await garantirSecaoModeloAberto('mapa', {
+        force: true,
+        expectedVersion: openVersion,
+        trabalhosTecnicosModelosModo: MODELO_ABERTO_TRABALHOS_TECNICOS_PADRAO,
       })
       window.requestAnimationFrame(() => {
         scrollParaTopoDaPagina()
@@ -1479,9 +1607,12 @@ export default function PesquisaTab({
   }
 
   function onVoltarPesquisa() {
+    modeloAbertoOpenVersionRef.current += 1
     setModeloAbertoMeta(null)
     setModeloAbertoError('')
     setModeloAbertoActiveTab('mapa')
+    setModeloAbertoLoading(false)
+    limparConteudoModeloAberto()
     scrollParaResultadosNoTopo()
   }
 
@@ -1490,10 +1621,17 @@ export default function PesquisaTab({
     nextTrabalhosTecnicosModo = modeloAbertoTrabalhosTecnicosModelosModo,
   ) {
     if (!sessionId) return
-    const resp = await api.updateVisualizacaoMap(sessionId, nextVar, nextTrabalhosTecnicosModo)
-    setModeloAbertoMapaHtml(resp?.mapa_html || '')
-    setModeloAbertoTrabalhosTecnicos(Array.isArray(resp?.trabalhos_tecnicos) ? resp.trabalhos_tecnicos : [])
-    setModeloAbertoTrabalhosTecnicosModelosModo(resp?.trabalhos_tecnicos_modelos_modo || nextTrabalhosTecnicosModo)
+    setModeloAbertoLoadingTabs((prev) => ({ ...prev, mapa: true }))
+    try {
+      const resp = await api.updateVisualizacaoMap(sessionId, nextVar, nextTrabalhosTecnicosModo)
+      setModeloAbertoMapaHtml(resp?.mapa_html || '')
+      setModeloAbertoMapaPayload(resp?.mapa_payload || null)
+      setModeloAbertoTrabalhosTecnicos(Array.isArray(resp?.trabalhos_tecnicos) ? resp.trabalhos_tecnicos : [])
+      setModeloAbertoTrabalhosTecnicosModelosModo(resp?.trabalhos_tecnicos_modelos_modo || nextTrabalhosTecnicosModo)
+      setModeloAbertoLoadedTabs((prev) => ({ ...prev, mapa: true, trabalhos_tecnicos: true }))
+    } finally {
+      setModeloAbertoLoadingTabs((prev) => ({ ...prev, mapa: false }))
+    }
   }
 
   async function onModeloAbertoMapChange(nextVar) {
@@ -1528,6 +1666,11 @@ export default function PesquisaTab({
     }
   }
 
+  function onModeloAbertoTabSelect(nextTab) {
+    setModeloAbertoActiveTab(nextTab)
+    void garantirSecaoModeloAberto(nextTab)
+  }
+
   async function onGerarMapaSelecionados() {
     if (!selectedIds.length) {
       setMapaError('Selecione ao menos um modelo para plotar no mapa.')
@@ -1540,7 +1683,7 @@ export default function PesquisaTab({
   function onMapaModoExibicaoChange(event) {
     const nextModo = String(event?.target?.value || 'pontos')
     setMapaModoExibicao(nextModo)
-    if (!mapaFoiGerado || mapaLoading || !selectedIds.length || mapaHtmls[nextModo]) return
+    if (!mapaFoiGerado || mapaLoading || !selectedIds.length || mapaHtmls[nextModo] || mapaPayloads[nextModo]) return
     void carregarMapaPesquisa(selectedIds, { modoExibicao: nextModo })
   }
 
@@ -1657,7 +1800,7 @@ export default function PesquisaTab({
                 key={tab.key}
                 type="button"
                 className={modeloAbertoActiveTab === tab.key ? 'inner-tab-pill active' : 'inner-tab-pill'}
-                onClick={() => setModeloAbertoActiveTab(tab.key)}
+                onClick={() => onModeloAbertoTabSelect(tab.key)}
               >
                 {tab.label}
               </button>
@@ -1666,7 +1809,10 @@ export default function PesquisaTab({
 
           <div className="inner-tab-panel">
             {modeloAbertoActiveTab === 'mapa' ? (
-              <>
+              !modeloAbertoLoadedTabs.mapa ? (
+                <div className="empty-box">Carregando mapa do modelo...</div>
+              ) : (
+                <>
                 <div className="row compact visualizacao-mapa-controls pesquisa-mapa-controls-row">
                   <label className="pesquisa-field pesquisa-mapa-modo-field">
                     Variável no mapa
@@ -1694,27 +1840,39 @@ export default function PesquisaTab({
                     </select>
                   </label>
                 </div>
-                <MapFrame html={modeloAbertoMapaHtml} />
+                <MapFrame html={modeloAbertoMapaHtml} payload={modeloAbertoMapaPayload} sessionId={sessionId} />
               </>
+              )
             ) : null}
 
             {modeloAbertoActiveTab === 'trabalhos_tecnicos' ? (
-              <ModeloTrabalhosTecnicosPanel trabalhos={modeloAbertoTrabalhosTecnicos} />
+              modeloAbertoLoadedTabs.trabalhos_tecnicos
+                ? <ModeloTrabalhosTecnicosPanel trabalhos={modeloAbertoTrabalhosTecnicos} />
+                : <div className="empty-box">Carregando trabalhos técnicos do modelo...</div>
             ) : null}
 
-            {modeloAbertoActiveTab === 'dados_mercado' ? <DataTable table={modeloAbertoDados} maxHeight={620} /> : null}
-            {modeloAbertoActiveTab === 'metricas' ? <DataTable table={modeloAbertoEstatisticas} maxHeight={620} /> : null}
+            {modeloAbertoActiveTab === 'dados_mercado'
+              ? (modeloAbertoLoadedTabs.dados_mercado ? <DataTable table={modeloAbertoDados} maxHeight={620} /> : <div className="empty-box">Carregando dados de mercado...</div>)
+              : null}
+            {modeloAbertoActiveTab === 'metricas'
+              ? (modeloAbertoLoadedTabs.metricas ? <DataTable table={modeloAbertoEstatisticas} maxHeight={620} /> : <div className="empty-box">Carregando métricas do modelo...</div>)
+              : null}
 
             {modeloAbertoActiveTab === 'transformacoes' ? (
-              <>
+              modeloAbertoLoadedTabs.transformacoes ? (
+                <>
                 <div dangerouslySetInnerHTML={{ __html: modeloAbertoEscalasHtml }} />
                 <h4 className="visualizacao-table-title">Dados com variáveis transformadas</h4>
                 <DataTable table={modeloAbertoDadosTransformados} />
               </>
+              ) : (
+                <div className="empty-box">Carregando transformações do modelo...</div>
+              )
             ) : null}
 
             {modeloAbertoActiveTab === 'resumo' ? (
-              <>
+              modeloAbertoLoadedTabs.resumo ? (
+                <>
                 <div className="equation-formats-section">
                   <h4>Equações do Modelo</h4>
                   <EquationFormatsPanel
@@ -1725,13 +1883,21 @@ export default function PesquisaTab({
                 </div>
                 <div dangerouslySetInnerHTML={{ __html: modeloAbertoResumoHtml }} />
               </>
+              ) : (
+                <div className="empty-box">Carregando resumo do modelo...</div>
+              )
             ) : null}
 
-            {modeloAbertoActiveTab === 'coeficientes' ? <DataTable table={modeloAbertoCoeficientes} maxHeight={620} /> : null}
-            {modeloAbertoActiveTab === 'obs_calc' ? <DataTable table={modeloAbertoObsCalc} maxHeight={620} /> : null}
+            {modeloAbertoActiveTab === 'coeficientes'
+              ? (modeloAbertoLoadedTabs.coeficientes ? <DataTable table={modeloAbertoCoeficientes} maxHeight={620} /> : <div className="empty-box">Carregando coeficientes do modelo...</div>)
+              : null}
+            {modeloAbertoActiveTab === 'obs_calc'
+              ? (modeloAbertoLoadedTabs.obs_calc ? <DataTable table={modeloAbertoObsCalc} maxHeight={620} /> : <div className="empty-box">Carregando observados x calculados...</div>)
+              : null}
 
             {modeloAbertoActiveTab === 'graficos' ? (
-              <>
+              modeloAbertoLoadedTabs.graficos ? (
+                <>
                 <div className="plot-grid-2-fixed">
                   <PlotFigure figure={modeloAbertoPlotObsCalc} title="Obs x Calc" />
                   <PlotFigure figure={modeloAbertoPlotResiduos} title="Resíduos" />
@@ -1742,12 +1908,18 @@ export default function PesquisaTab({
                   <PlotFigure figure={modeloAbertoPlotCorr} title="Correlação" className="plot-correlation-card" />
                 </div>
               </>
+              ) : (
+                <div className="empty-box">Carregando gráficos do modelo...</div>
+              )
             ) : null}
           </div>
 
           {modeloAbertoError ? <div className="error-line inline-error">{modeloAbertoError}</div> : null}
         </div>
-        <LoadingOverlay show={modeloAbertoLoading} label="Carregando modelo..." />
+        <LoadingOverlay
+          show={modeloAbertoLoading || Boolean(modeloAbertoLoadingTabs[modeloAbertoActiveTab])}
+          label={modeloAbertoLoading ? 'Carregando modelo...' : 'Carregando seção do modelo...'}
+        />
       </div>
     )
   }
@@ -2291,7 +2463,9 @@ export default function PesquisaTab({
             </div>
           ) : null}
 
-          {mapaHtmlAtual ? <MapFrame html={mapaHtmlAtual} /> : <div className="empty-box">Nenhum mapa gerado ainda.</div>}
+          {(mapaHtmlAtual || mapaPayloadAtual)
+            ? <MapFrame html={mapaHtmlAtual} payload={mapaPayloadAtual} sessionId={sessionId} />
+            : <div className="empty-box">Nenhum mapa gerado ainda.</div>}
         </SectionBlock>
       </div>
 

frontend/src/components/RepositorioTab.jsx

@@ -174,6 +174,7 @@ export default function RepositorioTab({
   const [modeloAbertoCoeficientes, setModeloAbertoCoeficientes] = useState(null)
   const [modeloAbertoObsCalc, setModeloAbertoObsCalc] = useState(null)
   const [modeloAbertoMapaHtml, setModeloAbertoMapaHtml] = useState('')
+  const [modeloAbertoMapaPayload, setModeloAbertoMapaPayload] = useState(null)
   const [modeloAbertoMapaChoices, setModeloAbertoMapaChoices] = useState(['Visualização Padrão'])
   const [modeloAbertoMapaVar, setModeloAbertoMapaVar] = useState('Visualização Padrão')
   const [modeloAbertoTrabalhosTecnicosModelosModo, setModeloAbertoTrabalhosTecnicosModelosModo] = useState(MODELO_ABERTO_TRABALHOS_TECNICOS_PADRAO)
@@ -349,6 +350,7 @@ export default function RepositorioTab({
     setModeloAbertoCoeficientes(null)
     setModeloAbertoObsCalc(null)
     setModeloAbertoMapaHtml('')
+    setModeloAbertoMapaPayload(null)
     setModeloAbertoMapaChoices(['Visualização Padrão'])
     setModeloAbertoMapaVar('Visualização Padrão')
     setModeloAbertoTrabalhosTecnicosModelosModo(MODELO_ABERTO_TRABALHOS_TECNICOS_PADRAO)
@@ -408,6 +410,7 @@ export default function RepositorioTab({
         ? resp.mapa_choices
         : ['Visualização Padrão']
       setModeloAbertoMapaHtml(resp?.mapa_html || '')
+      setModeloAbertoMapaPayload(resp?.mapa_payload || null)
       setModeloAbertoMapaChoices(nextChoices)
       setModeloAbertoMapaVar((current) => (nextChoices.includes(current) ? current : 'Visualização Padrão'))
       setModeloAbertoTrabalhosTecnicos(Array.isArray(resp?.trabalhos_tecnicos) ? resp.trabalhos_tecnicos : [])
@@ -551,6 +554,7 @@ export default function RepositorioTab({
     try {
       const resp = await api.updateVisualizacaoMap(sessionId, nextVar, nextTrabalhosTecnicosModo)
       setModeloAbertoMapaHtml(resp?.mapa_html || '')
+      setModeloAbertoMapaPayload(resp?.mapa_payload || null)
       setModeloAbertoTrabalhosTecnicos(Array.isArray(resp?.trabalhos_tecnicos) ? resp.trabalhos_tecnicos : [])
       setModeloAbertoTrabalhosTecnicosModelosModo(resp?.trabalhos_tecnicos_modelos_modo || nextTrabalhosTecnicosModo)
       setModeloAbertoLoadedTabs((prev) => ({ ...prev, mapa: true, trabalhos_tecnicos: true }))
@@ -692,7 +696,7 @@ export default function RepositorioTab({
                       </select>
                     </label>
                   </div>
-                  <MapFrame html={modeloAbertoMapaHtml} />
+                  <MapFrame html={modeloAbertoMapaHtml} payload={modeloAbertoMapaPayload} sessionId={sessionId} />
                 </>
               )
             ) : null}

frontend/src/components/TrabalhosTecnicosTab.jsx

@@ -167,6 +167,7 @@ export default function TrabalhosTecnicosTab({
   const [filtroAno, setFiltroAno] = useState('')
   const [mapaModoExibicao, setMapaModoExibicao] = useState('clusterizado')
   const [mapaHtml, setMapaHtml] = useState('')
+  const [mapaPayload, setMapaPayload] = useState(null)
   const [mapaStatus, setMapaStatus] = useState('')
   const [mapaLoading, setMapaLoading] = useState(false)
   const [mapaError, setMapaError] = useState('')
@@ -364,6 +365,7 @@ export default function TrabalhosTecnicosTab({
 
     if (!idsValidos.length) {
       setMapaHtml('')
+      setMapaPayload(null)
       setMapaError('')
       setMapaStatus('')
       mapaRequestKeyRef.current = requestKey
@@ -375,11 +377,13 @@ export default function TrabalhosTecnicosTab({
     try {
       const resp = await api.trabalhosTecnicosMapa(idsValidos, mapaModoExibicao, avaliandoPayload)
       setMapaHtml(resp?.mapa_html || '')
+      setMapaPayload(resp?.mapa_payload || null)
       setMapaStatus(resp?.status || '')
       mapaRequestKeyRef.current = requestKey
     } catch (err) {
       setMapaError(err.message || 'Falha ao gerar o mapa dos trabalhos técnicos.')
       setMapaHtml('')
+      setMapaPayload(null)
     } finally {
       setMapaLoading(false)
     }
@@ -1402,7 +1406,7 @@ export default function TrabalhosTecnicosTab({
             </div>
             {mapaError ? <div className="error-line inline-error">{mapaError}</div> : null}
             {mapaHtml ? (
-              <MapFrame html={mapaHtml} />
+              <MapFrame html={mapaHtml} payload={mapaPayload} />
             ) : (
               <div className="empty-box">
                 {mapaLoading

frontend/src/components/VisualizacaoTab.jsx

@@ -22,12 +22,46 @@ const INNER_TABS = [
 ]
 const BASE_COMPARACAO_SEM_BASE = '__none__'
 const TRABALHOS_TECNICOS_MODELOS_PADRAO = 'selecionados_e_outras_versoes'
+const SECTION_TABS = new Set([
+  'mapa',
+  'dados_mercado',
+  'metricas',
+  'transformacoes',
+  'resumo',
+  'coeficientes',
+  'obs_calc',
+  'graficos',
+])
+
+function getVisualizacaoLoadingLabel(tabKey) {
+  switch (String(tabKey || '').trim()) {
+    case 'mapa':
+      return 'Carregando mapa do modelo...'
+    case 'dados_mercado':
+      return 'Carregando dados de mercado...'
+    case 'metricas':
+      return 'Carregando métricas do modelo...'
+    case 'transformacoes':
+      return 'Carregando transformações do modelo...'
+    case 'resumo':
+      return 'Carregando resumo do modelo...'
+    case 'coeficientes':
+      return 'Carregando coeficientes do modelo...'
+    case 'obs_calc':
+      return 'Carregando observados x calculados...'
+    case 'graficos':
+      return 'Carregando gráficos do modelo...'
+    default:
+      return 'Processando dados...'
+  }
+}
 
 export default function VisualizacaoTab({ sessionId }) {
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState('')
   const [status, setStatus] = useState('')
   const [badgeHtml, setBadgeHtml] = useState('')
+  const [modeloCarregado, setModeloCarregado] = useState(false)
 
   const [uploadedFile, setUploadedFile] = useState(null)
   const [uploadDragOver, setUploadDragOver] = useState(false)
@@ -53,6 +87,7 @@ export default function VisualizacaoTab({ sessionId }) {
   const [plotCorr, setPlotCorr] = useState(null)
 
   const [mapaHtml, setMapaHtml] = useState('')
+  const [mapaPayload, setMapaPayload] = useState(null)
   const [mapaChoices, setMapaChoices] = useState(['Visualização Padrão'])
   const [mapaVar, setMapaVar] = useState('Visualização Padrão')
   const [mapaTrabalhosTecnicosModelosModo, setMapaTrabalhosTecnicosModelosModo] = useState(TRABALHOS_TECNICOS_MODELOS_PADRAO)
@@ -66,8 +101,12 @@ export default function VisualizacaoTab({ sessionId }) {
   const [baseValue, setBaseValue] = useState('')
 
   const [activeInnerTab, setActiveInnerTab] = useState('mapa')
+  const [loadedTabs, setLoadedTabs] = useState({})
+  const [loadingTabs, setLoadingTabs] = useState({})
   const deleteConfirmTimersRef = useRef({})
   const uploadInputRef = useRef(null)
+  const pendingTabRequestsRef = useRef({})
+  const modeloLoadVersionRef = useRef(0)
   const temAvaliacoes = Array.isArray(baseChoices) && baseChoices.length > 0
   const repoModeloOptions = useMemo(
     () => (repoModelos || []).map((item) => ({
@@ -79,6 +118,8 @@ export default function VisualizacaoTab({ sessionId }) {
   )
 
   function resetConteudoVisualizacao() {
+    pendingTabRequestsRef.current = {}
+    setModeloCarregado(false)
     setDados(null)
     setEstatisticas(null)
     setEscalasHtml('')
@@ -95,6 +136,7 @@ export default function VisualizacaoTab({ sessionId }) {
     setPlotCorr(null)
 
     setMapaHtml('')
+    setMapaPayload(null)
     setMapaChoices(['Visualização Padrão'])
     setMapaVar('Visualização Padrão')
     setMapaTrabalhosTecnicosModelosModo(TRABALHOS_TECNICOS_MODELOS_PADRAO)
@@ -108,32 +150,15 @@ export default function VisualizacaoTab({ sessionId }) {
     setBaseValue('')
 
     setActiveInnerTab('mapa')
+    setLoadedTabs({})
+    setLoadingTabs({})
   }
 
-  function applyExibicaoResponse(resp) {
-    setDados(resp.dados || null)
-    setEstatisticas(resp.estatisticas || null)
-    setEscalasHtml(resp.escalas_html || '')
-    setDadosTransformados(resp.dados_transformados || null)
-    setResumoHtml(resp.resumo_html || '')
-    setEquacoes(resp.equacoes || null)
-    setCoeficientes(resp.coeficientes || null)
-    setObsCalc(resp.obs_calc || null)
-
-    setPlotObsCalc(resp.grafico_obs_calc || null)
-    setPlotResiduos(resp.grafico_residuos || null)
-    setPlotHistograma(resp.grafico_histograma || null)
-    setPlotCook(resp.grafico_cook || null)
-    setPlotCorr(resp.grafico_correlacao || null)
-
-    setMapaHtml(resp.mapa_html || '')
-    setMapaChoices(resp.mapa_choices || ['Visualização Padrão'])
-    setMapaVar('Visualização Padrão')
-    setMapaTrabalhosTecnicosModelosModo(resp.trabalhos_tecnicos_modelos_modo || TRABALHOS_TECNICOS_MODELOS_PADRAO)
-
-    setCamposAvaliacao(resp.campos_avaliacao || [])
+  function applyEvaluationContext(resp) {
+    setCamposAvaliacao(resp?.campos_avaliacao || [])
+    setEquacoes(resp?.equacoes || null)
     const values = {}
-    ;(resp.campos_avaliacao || []).forEach((campo) => {
+    ;(resp?.campos_avaliacao || []).forEach((campo) => {
       values[campo.coluna] = ''
     })
     valoresAvaliacaoRef.current = values
@@ -142,6 +167,93 @@ export default function VisualizacaoTab({ sessionId }) {
     setResultadoAvaliacaoHtml('')
     setBaseChoices([])
     setBaseValue('')
+    setModeloCarregado(true)
+  }
+
+  function applyVisualizacaoSection(secao, resp) {
+    const key = String(secao || '').trim()
+    if (key === 'dados_mercado') {
+      setDados(resp?.dados || null)
+      return
+    }
+    if (key === 'metricas') {
+      setEstatisticas(resp?.estatisticas || null)
+      return
+    }
+    if (key === 'transformacoes') {
+      setEscalasHtml(resp?.escalas_html || '')
+      setDadosTransformados(resp?.dados_transformados || null)
+      return
+    }
+    if (key === 'resumo') {
+      setResumoHtml(resp?.resumo_html || '')
+      setEquacoes(resp?.equacoes || null)
+      return
+    }
+    if (key === 'coeficientes') {
+      setCoeficientes(resp?.coeficientes || null)
+      return
+    }
+    if (key === 'obs_calc') {
+      setObsCalc(resp?.obs_calc || null)
+      return
+    }
+    if (key === 'graficos') {
+      setPlotObsCalc(resp?.grafico_obs_calc || null)
+      setPlotResiduos(resp?.grafico_residuos || null)
+      setPlotHistograma(resp?.grafico_histograma || null)
+      setPlotCook(resp?.grafico_cook || null)
+      setPlotCorr(resp?.grafico_correlacao || null)
+      return
+    }
+    if (key === 'mapa') {
+      const nextChoices = Array.isArray(resp?.mapa_choices) && resp.mapa_choices.length
+        ? resp.mapa_choices
+        : ['Visualização Padrão']
+      setMapaHtml(resp?.mapa_html || '')
+      setMapaPayload(resp?.mapa_payload || null)
+      setMapaChoices(nextChoices)
+      setMapaVar((current) => (nextChoices.includes(current) ? current : 'Visualização Padrão'))
+      setMapaTrabalhosTecnicosModelosModo(resp?.trabalhos_tecnicos_modelos_modo || TRABALHOS_TECNICOS_MODELOS_PADRAO)
+    }
+  }
+
+  async function ensureVisualizacaoSection(secao, options = {}) {
+    const secaoNormalizada = String(secao || '').trim()
+    if (!sessionId || !SECTION_TABS.has(secaoNormalizada)) return
+    if (!options.force && loadedTabs[secaoNormalizada]) return
+    if (pendingTabRequestsRef.current[secaoNormalizada]) {
+      await pendingTabRequestsRef.current[secaoNormalizada]
+      return
+    }
+
+    const expectedVersion = options.expectedVersion ?? modeloLoadVersionRef.current
+    const trabalhosTecnicosModo = options.trabalhosTecnicosModelosModo || mapaTrabalhosTecnicosModelosModo
+    setLoadingTabs((prev) => ({ ...prev, [secaoNormalizada]: true }))
+
+    const request = (async () => {
+      try {
+        const resp = await api.visualizacaoSection(sessionId, secaoNormalizada, trabalhosTecnicosModo)
+        if (modeloLoadVersionRef.current !== expectedVersion) return
+        applyVisualizacaoSection(secaoNormalizada, resp)
+        setLoadedTabs((prev) => ({ ...prev, [secaoNormalizada]: true }))
+      } catch (err) {
+        if (modeloLoadVersionRef.current !== expectedVersion) return
+        setError(err.message || 'Falha ao carregar dados do modelo.')
+      } finally {
+        if (modeloLoadVersionRef.current !== expectedVersion) return
+        setLoadingTabs((prev) => ({ ...prev, [secaoNormalizada]: false }))
+      }
+    })()
+
+    pendingTabRequestsRef.current[secaoNormalizada] = request
+    try {
+      await request
+    } finally {
+      if (pendingTabRequestsRef.current[secaoNormalizada] === request) {
+        delete pendingTabRequestsRef.current[secaoNormalizada]
+      }
+    }
   }
 
   async function withBusy(fn) {
@@ -229,12 +341,20 @@ export default function VisualizacaoTab({ sessionId }) {
     setModeloLoadSource('upload')
     await withBusy(async () => {
       resetConteudoVisualizacao()
+      modeloLoadVersionRef.current += 1
+      const openVersion = modeloLoadVersionRef.current
       const uploadResp = await api.uploadVisualizacaoFile(sessionId, arquivoUpload)
+      if (modeloLoadVersionRef.current !== openVersion) return
       setStatus(uploadResp.status || '')
       setBadgeHtml(uploadResp.badge_html || '')
-
-      const exibirResp = await api.exibirVisualizacao(sessionId, TRABALHOS_TECNICOS_MODELOS_PADRAO)
-      applyExibicaoResponse(exibirResp)
+      const contextoResp = await api.evaluationContextViz(sessionId)
+      if (modeloLoadVersionRef.current !== openVersion) return
+      applyEvaluationContext(contextoResp)
+      await ensureVisualizacaoSection('mapa', {
+        force: true,
+        expectedVersion: openVersion,
+        trabalhosTecnicosModelosModo: TRABALHOS_TECNICOS_MODELOS_PADRAO,
+      })
     })
   }
 
@@ -243,12 +363,20 @@ export default function VisualizacaoTab({ sessionId }) {
     setModeloLoadSource('repo')
     await withBusy(async () => {
       resetConteudoVisualizacao()
+      modeloLoadVersionRef.current += 1
+      const openVersion = modeloLoadVersionRef.current
       const uploadResp = await api.visualizacaoRepositorioCarregar(sessionId, repoModeloSelecionado)
+      if (modeloLoadVersionRef.current !== openVersion) return
       setStatus(uploadResp.status || '')
       setBadgeHtml(uploadResp.badge_html || '')
-
-      const exibirResp = await api.exibirVisualizacao(sessionId, TRABALHOS_TECNICOS_MODELOS_PADRAO)
-      applyExibicaoResponse(exibirResp)
+      const contextoResp = await api.evaluationContextViz(sessionId)
+      if (modeloLoadVersionRef.current !== openVersion) return
+      applyEvaluationContext(contextoResp)
+      await ensureVisualizacaoSection('mapa', {
+        force: true,
+        expectedVersion: openVersion,
+        trabalhosTecnicosModelosModo: TRABALHOS_TECNICOS_MODELOS_PADRAO,
+      })
       setUploadedFile(null)
     })
   }
@@ -291,9 +419,16 @@ export default function VisualizacaoTab({ sessionId }) {
     trabalhosTecnicosModelosModo = mapaTrabalhosTecnicosModelosModo,
   ) {
     if (!sessionId) return
-    const resp = await api.updateVisualizacaoMap(sessionId, variavelMapa, trabalhosTecnicosModelosModo)
-    setMapaHtml(resp.mapa_html || '')
-    setMapaTrabalhosTecnicosModelosModo(resp.trabalhos_tecnicos_modelos_modo || trabalhosTecnicosModelosModo)
+    setLoadingTabs((prev) => ({ ...prev, mapa: true }))
+    try {
+      const resp = await api.updateVisualizacaoMap(sessionId, variavelMapa, trabalhosTecnicosModelosModo)
+      setMapaHtml(resp?.mapa_html || '')
+      setMapaPayload(resp?.mapa_payload || null)
+      setMapaTrabalhosTecnicosModelosModo(resp?.trabalhos_tecnicos_modelos_modo || trabalhosTecnicosModelosModo)
+      setLoadedTabs((prev) => ({ ...prev, mapa: true }))
+    } finally {
+      setLoadingTabs((prev) => ({ ...prev, mapa: false }))
+    }
   }
 
   async function onMapChange(value) {
@@ -416,6 +551,13 @@ export default function VisualizacaoTab({ sessionId }) {
     })
   }
 
+  function onInnerTabSelect(nextTab) {
+    setActiveInnerTab(nextTab)
+    if (SECTION_TABS.has(nextTab)) {
+      void ensureVisualizacaoSection(nextTab)
+    }
+  }
+
   return (
     <div className="tab-content">
       <SectionBlock step="1" title="Carregar Modelo .dai" subtitle="Carregue o arquivo e o conteúdo será exibido automaticamente.">
@@ -511,7 +653,7 @@ export default function VisualizacaoTab({ sessionId }) {
         {badgeHtml ? <div className="upload-badge-block" dangerouslySetInnerHTML={{ __html: badgeHtml }} /> : null}
       </SectionBlock>
 
-      {dados ? (
+      {modeloCarregado ? (
         <SectionBlock step="2" title="Conteúdo do Modelo" subtitle="Carregue o modelo no topo e navegue pelas abas internas abaixo.">
           <div className="inner-tabs" role="tablist" aria-label="Abas internas de visualização">
             {INNER_TABS.map((tab) => (
@@ -519,7 +661,7 @@ export default function VisualizacaoTab({ sessionId }) {
                 key={tab.key}
                 type="button"
                 className={activeInnerTab === tab.key ? 'inner-tab-pill active' : 'inner-tab-pill'}
-                onClick={() => setActiveInnerTab(tab.key)}
+                onClick={() => onInnerTabSelect(tab.key)}
               >
                 {tab.label}
               </button>
@@ -528,7 +670,10 @@ export default function VisualizacaoTab({ sessionId }) {
 
           <div className="inner-tab-panel">
             {activeInnerTab === 'mapa' ? (
-              <>
+              !loadedTabs.mapa ? (
+                <div className="empty-box">Carregando mapa do modelo...</div>
+              ) : (
+                <>
                 <div className="row compact visualizacao-mapa-controls pesquisa-mapa-controls-row">
                   <label className="pesquisa-field pesquisa-mapa-modo-field">
                     Variável no mapa
@@ -552,28 +697,34 @@ export default function VisualizacaoTab({ sessionId }) {
                     </select>
                   </label>
                 </div>
-                <MapFrame html={mapaHtml} />
+                <MapFrame html={mapaHtml} payload={mapaPayload} sessionId={sessionId} />
               </>
+              )
             ) : null}
 
             {activeInnerTab === 'dados_mercado' ? (
-              <DataTable table={dados} maxHeight={620} />
+              loadedTabs.dados_mercado ? <DataTable table={dados} maxHeight={620} /> : <div className="empty-box">Carregando dados de mercado...</div>
             ) : null}
 
             {activeInnerTab === 'metricas' ? (
-              <DataTable table={estatisticas} maxHeight={620} />
+              loadedTabs.metricas ? <DataTable table={estatisticas} maxHeight={620} /> : <div className="empty-box">Carregando métricas do modelo...</div>
             ) : null}
 
             {activeInnerTab === 'transformacoes' ? (
-              <>
+              loadedTabs.transformacoes ? (
+                <>
                 <div dangerouslySetInnerHTML={{ __html: escalasHtml }} />
                 <h4 className="visualizacao-table-title">Dados com variáveis transformadas</h4>
                 <DataTable table={dadosTransformados} />
               </>
+              ) : (
+                <div className="empty-box">Carregando transformações do modelo...</div>
+              )
             ) : null}
 
             {activeInnerTab === 'resumo' ? (
-              <>
+              loadedTabs.resumo ? (
+                <>
                 <div className="equation-formats-section">
                   <h4>Equações do Modelo</h4>
                   <EquationFormatsPanel
@@ -584,18 +735,22 @@ export default function VisualizacaoTab({ sessionId }) {
                 </div>
                 <div dangerouslySetInnerHTML={{ __html: resumoHtml }} />
               </>
+              ) : (
+                <div className="empty-box">Carregando resumo do modelo...</div>
+              )
             ) : null}
 
             {activeInnerTab === 'coeficientes' ? (
-              <DataTable table={coeficientes} maxHeight={620} />
+              loadedTabs.coeficientes ? <DataTable table={coeficientes} maxHeight={620} /> : <div className="empty-box">Carregando coeficientes do modelo...</div>
             ) : null}
 
             {activeInnerTab === 'obs_calc' ? (
-              <DataTable table={obsCalc} maxHeight={620} />
+              loadedTabs.obs_calc ? <DataTable table={obsCalc} maxHeight={620} /> : <div className="empty-box">Carregando observados x calculados...</div>
             ) : null}
 
             {activeInnerTab === 'graficos' ? (
-              <>
+              loadedTabs.graficos ? (
+                <>
                 <div className="plot-grid-2-fixed">
                   <PlotFigure figure={plotObsCalc} title="Obs x Calc" />
                   <PlotFigure figure={plotResiduos} title="Resíduos" />
@@ -606,6 +761,9 @@ export default function VisualizacaoTab({ sessionId }) {
                   <PlotFigure figure={plotCorr} title="Correlação" className="plot-correlation-card" />
                 </div>
               </>
+              ) : (
+                <div className="empty-box">Carregando gráficos do modelo...</div>
+              )
             ) : null}
 
             {activeInnerTab === 'avaliacao' ? (
@@ -709,7 +867,10 @@ export default function VisualizacaoTab({ sessionId }) {
         </SectionBlock>
       ) : null}
 
-      <LoadingOverlay show={loading} label="Processando dados..." />
+      <LoadingOverlay
+        show={loading || Boolean(loadingTabs[activeInnerTab])}
+        label={loading ? 'Processando dados...' : getVisualizacaoLoadingLabel(activeInnerTab)}
+      />
       {error ? <div className="error-line">{error}</div> : null}
     </div>
   )

frontend/src/main.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
+import 'leaflet/dist/leaflet.css'
+import 'leaflet.fullscreen/dist/Control.FullScreen.css'
 import App from './App'
 import './styles.css'
 

frontend/src/styles.css

@@ -1464,6 +1464,8 @@ textarea {
   border-radius: 12px;
   background: #fff;
   padding: 14px;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .trabalhos-mapa-panel {
@@ -3560,8 +3562,8 @@ button.pesquisa-coluna-remove:hover {
 }
 
 .pesquisa-card-values-modal {
-  width: fit-content;
-  max-width: min(860px, calc(100vw - 40px));
+  width: min(920px, calc(100vw - 40px));
+  max-width: min(920px, calc(100vw - 40px));
 }
 
 .pesquisa-card-values-modal-actions {
@@ -3572,7 +3574,9 @@ button.pesquisa-coluna-remove:hover {
 }
 
 .pesquisa-card-values-content {
-  max-width: min(800px, calc(100vw - 72px));
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
   padding: 12px 14px;
   border: 1px solid #d4e0eb;
   border-radius: 12px;
@@ -4929,6 +4933,361 @@ button.btn-upload-select {
   background: #fff;
 }
 
+.leaflet-map-host {
+  position: relative;
+  overflow: hidden;
+}
+
+.leaflet-map-canvas {
+  width: 100%;
+  min-height: 560px;
+}
+
+.leaflet-map-host .leaflet-container {
+  width: 100%;
+  min-height: 560px;
+  border-radius: 12px;
+  font-family: 'Sora', sans-serif;
+}
+
+.leaflet-map-runtime-error {
+  position: absolute;
+  right: 14px;
+  bottom: 14px;
+  max-width: min(360px, calc(100% - 28px));
+  border-radius: 10px;
+  background: rgba(255, 248, 248, 0.95);
+  border: 1px solid rgba(177, 63, 63, 0.22);
+  color: #8a2d2d;
+  padding: 10px 12px;
+  font-size: 0.82rem;
+  box-shadow: 0 10px 28px rgba(40, 63, 91, 0.12);
+  z-index: 600;
+}
+
+.mesa-leaflet-legend {
+  min-width: 168px;
+  border-radius: 12px;
+  padding: 10px 12px;
+  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid rgba(194, 208, 222, 0.9);
+  box-shadow: 0 10px 26px rgba(29, 52, 78, 0.14);
+  color: #24405b;
+  backdrop-filter: blur(8px);
+}
+
+.mesa-leaflet-legend strong {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 0.78rem;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.mesa-leaflet-legend-bar {
+  height: 10px;
+  border-radius: 999px;
+  margin-bottom: 7px;
+}
+
+.mesa-leaflet-legend-ticks {
+  position: relative;
+  height: 16px;
+  margin-top: -2px;
+  margin-bottom: 6px;
+}
+
+.mesa-leaflet-legend-tick {
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+  font-size: 0.68rem;
+  color: #4a6077;
+  white-space: nowrap;
+}
+
+.mesa-leaflet-legend-tick:first-child {
+  transform: translateX(0);
+}
+
+.mesa-leaflet-legend-tick:last-child {
+  transform: translateX(-100%);
+}
+
+.mesa-leaflet-legend-scale {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  font-size: 0.76rem;
+  color: #4a6077;
+}
+
+.mesa-leaflet-notice {
+  max-width: min(320px, calc(100vw - 48px));
+  border-radius: 10px;
+  padding: 8px 10px;
+  background: rgba(248, 251, 255, 0.94);
+  border: 1px solid rgba(194, 208, 222, 0.92);
+  box-shadow: 0 10px 26px rgba(29, 52, 78, 0.14);
+  color: #35506b;
+  font-size: 0.76rem;
+  line-height: 1.35;
+}
+
+.leaflet-map-host .leaflet-control-layers {
+  border: 1px solid rgba(188, 201, 214, 0.92);
+  border-radius: 12px;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 10px 24px rgba(24, 46, 71, 0.14);
+  backdrop-filter: blur(6px);
+}
+
+.leaflet-map-host .leaflet-control-layers-toggle {
+  width: 38px;
+  height: 38px;
+  position: relative;
+  display: block;
+  background-color: rgba(255, 255, 255, 0.95);
+  background-image: none !important;
+  background-size: 0 0;
+}
+
+.leaflet-map-host .leaflet-control-layers-toggle::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 18px;
+  height: 18px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 18px 18px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2324405b' d='M12 2 3 7l9 5 9-5-9-5Zm-7.5 8.6L12 15l7.5-4.4L21 12l-9 5-9-5 1.5-1.4Zm0 4.8L12 19.8l7.5-4.4L21 17l-9 5-9-5 1.5-1.6Z'/%3E%3C/svg%3E");
+}
+
+.leaflet-map-host .leaflet-control-layers-toggle:hover {
+  background-color: #eef5fb;
+}
+
+.leaflet-map-host .leaflet-control-layers-expanded {
+  padding: 6px 9px;
+  min-width: 220px;
+  max-width: min(260px, calc(100vw - 36px));
+  overflow: visible;
+}
+
+.leaflet-map-host .leaflet-control-layers .leaflet-control-layers-list {
+  display: none;
+}
+
+.leaflet-map-host .leaflet-control-layers-expanded .leaflet-control-layers-list {
+  display: block;
+  position: relative;
+}
+
+.leaflet-map-host .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
+  display: none;
+}
+
+.leaflet-map-host .leaflet-control-layers label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+  padding: 1px 4px;
+  border: none;
+  border-radius: 8px;
+  font-size: 0.74rem;
+  font-weight: 500;
+  color: #27445f;
+  cursor: pointer;
+  transition: background-color 0.18s ease, color 0.18s ease;
+  line-height: 1.12;
+  white-space: normal;
+}
+
+.leaflet-map-host .leaflet-control-layers label:hover {
+  background: #f3f7fb;
+  transform: none;
+  color: #1f5f9f;
+}
+
+.leaflet-map-host .leaflet-control-layers input {
+  accent-color: #1f6fb2;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  flex: 0 0 auto;
+  align-self: center;
+}
+
+.leaflet-map-host .leaflet-control-layers-selector {
+  margin-top: 0;
+  top: 0;
+  position: static;
+}
+
+.leaflet-map-host .leaflet-control-layers label > span {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  width: 100%;
+}
+
+.leaflet-map-host .leaflet-control-layers label > span > span {
+  display: inline-block;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding-top: 0;
+}
+
+.leaflet-map-host .leaflet-control-layers-separator {
+  margin: 3px -9px 4px;
+  border-top-color: rgba(207, 217, 227, 0.95);
+}
+
+.leaflet-map-host .leaflet-control-fullscreen,
+.leaflet-map-host .leaflet-control-measure {
+  border: none;
+  box-shadow: 0 10px 24px rgba(27, 48, 72, 0.16);
+}
+
+.mesa-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.leaflet-map-host .leaflet-bar a,
+.leaflet-map-host .leaflet-bar button {
+  border-color: rgba(193, 207, 220, 0.95);
+  color: #24405b;
+}
+
+.leaflet-map-host .mesa-leaflet-measure {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+.leaflet-map-host .mesa-leaflet-measure .mesa-leaflet-measure-toggle {
+  width: 38px;
+  height: 38px;
+  position: relative;
+  display: block;
+  background: rgba(255, 255, 255, 0.96);
+  border: 1px solid rgba(193, 207, 220, 0.95);
+  border-radius: 10px;
+  box-shadow: 0 10px 24px rgba(27, 48, 72, 0.16);
+}
+
+.leaflet-map-host .mesa-leaflet-measure .mesa-leaflet-measure-toggle::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 18px;
+  height: 18px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 18px 18px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2324405b' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25Zm2.92 2.33H5v-.92l8.12-8.12.92.92-8.12 8.12ZM20.71 7.04a1.003 1.003 0 0 0 0-1.42l-2.34-2.33a1.003 1.003 0 0 0-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.83Z'/%3E%3C/svg%3E");
+}
+
+.leaflet-map-host .mesa-leaflet-measure .mesa-leaflet-measure-toggle:hover {
+  background: #eef5fb;
+}
+
+.leaflet-map-host .mesa-leaflet-measure-interaction {
+  width: min(270px, calc(100vw - 36px));
+  margin-top: 8px;
+  padding: 10px 12px 12px;
+  background: rgba(255, 255, 255, 0.97);
+  border: 1px solid rgba(188, 201, 214, 0.92);
+  border-radius: 12px;
+  box-shadow: 0 12px 28px rgba(24, 46, 71, 0.16);
+  backdrop-filter: blur(6px);
+}
+
+.leaflet-map-host .mesa-leaflet-measure-title {
+  margin: 0 0 6px;
+  font-size: 0.84rem;
+  font-weight: 700;
+  color: #24405b;
+}
+
+.leaflet-map-host .mesa-leaflet-measure-hint {
+  margin: 0;
+  font-size: 0.74rem;
+  line-height: 1.4;
+  color: #4a6077;
+}
+
+.leaflet-map-host .mesa-leaflet-measure-results {
+  margin-top: 10px;
+  display: grid;
+  gap: 8px;
+}
+
+.leaflet-map-host .mesa-leaflet-measure-row {
+  display: grid;
+  gap: 2px;
+  padding: 7px 8px;
+  border-radius: 10px;
+  background: #f5f8fc;
+  border: 1px solid #dce5ef;
+  color: #24405b;
+  font-size: 0.74rem;
+  line-height: 1.35;
+}
+
+.leaflet-map-host .mesa-leaflet-measure-row strong {
+  font-size: 0.73rem;
+  color: #1f4d7a;
+}
+
+.leaflet-map-host .mesa-leaflet-measure-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 10px;
+}
+
+.leaflet-map-host .mesa-leaflet-measure-btn {
+  appearance: none;
+  border: 1px solid #c8d6e4;
+  border-radius: 8px;
+  background: #fff;
+  color: #24405b;
+  font: inherit;
+  font-size: 0.73rem;
+  font-weight: 600;
+  line-height: 1;
+  padding: 7px 10px;
+  cursor: pointer;
+}
+
+.leaflet-map-host .mesa-leaflet-measure-btn:hover {
+  background: #f3f7fb;
+}
+
+.leaflet-map-host .mesa-leaflet-measure-btn.is-primary {
+  background: #1f6fb2;
+  border-color: #1f6fb2;
+  color: #fff;
+}
+
+.leaflet-map-host .mesa-leaflet-measure-btn.is-primary:hover {
+  background: #175a90;
+}
+
 .table-wrapper {
   overflow: auto;
   border: 1px solid #d8e2ec;