# Especificação — Módulo de Mapa Interativo (Hub Imobiliário Litoral Norte SC) ## Contexto do projeto Plataforma/hub imobiliário em Next.js para cone

# Especificação — Módulo de Mapa Interativo (Hub Imobiliário Litoral Norte SC) ## Contexto do projeto Plataforma/hub imobiliário em Next.js para conectar pessoas que estão se mudando para o litoral norte de Santa Catarina (Balneário Piçarras, Penha, Barra Velha). O módulo de mapa é uma seção onde o usuário explora a cidade, visualiza pontos de interesse e zonas categorizadas (risco de alagamento, área verde, escolas, postos de saúde, imóveis), com camadas que podem ser ativadas/desativadas dinamicamente. ## Stack já definido no projeto - Next.js (App Router) - Tailwind CSS - shadcn/ui - Zod (validação) ## Stack a implementar para o módulo de mapa | Camada | Tecnologia | Papel | |---|---|---| | Engine de mapa | **MapLibre GL JS** | Renderização vetorial WebGL, base open-source sem custo por carregamento | | Componentes de UI do mapa | **MapCN** (`npx shadcn@latest add @mapcn/map`) | Componentes prontos no padrão shadcn (Map, MapControls, MapMarker, Routes, Clusters), copy-paste, tema light/dark automático | | Fonte de tiles | **CARTO (via MapCN)** para MVP, migrar para **MapTiler** ou **Protomaps self-hosted** (`.pmtiles`) se precisar de estilo customizado ou independência de terceiros | Basemap | | Camadas de dados (zonas/polígonos) | GeoJSON cru + API nativa do MapLibre (`addSource`/`addLayer`, tipos `fill` e `line`) | Zonas de risco, áreas verdes, delimitações | | Cálculo geoespacial | **Turf.js** | Área de polígono, ponto-dentro-de-zona, distância a POIs | | Validação de dados | **Zod** (já no projeto) | Schema por categoria de dado geográfico | | Estado global (camadas ativas) | **Zustand** | Ligar/desligar categorias sem re-render em cascata | | Estado compartilhável via URL | **nuqs** | Sincronizar filtros de camada com query params (ex.: link já filtrado para cliente) | | Estado de POI selecionado | `useState` local (React) | Efêmero, não precisa de estado global | | Modal/detalhe de POI | `Dialog` (desktop) / `Drawer` (mobile) do shadcn, alternados por `useMediaQuery` | Exibir detalhes ao clicar em um pin | | Preview leve (opcional) | `Popup` nativo do MapLibre | Hover/preview antes de abrir modal completa | | Persistência de dados geográficos | MVP: arquivos `.geojson` estáticos em `/public`. Evolução: **Postgres + PostGIS** | Fonte dos dados de zonas e POIs; PostGIS permite queries espaciais (`ST_Contains`, etc.) | ## Estrutura de dados Cada categoria é uma fonte GeoJSON independente. Schema base (Zod): ```ts const PoiSchema = z.object({ id: z.string(), category: z.enum(["risco", "area_verde", "escola", "saude", "imovel", "comercio"]), geometry: z.union([ z.object({ type: z.literal("Point"), coordinates: z.tuple([z.number(), z.number()]) }), z.object({ type: z.literal("Polygon"), coordinates: z.array(z.array(z.tuple([z.number(), z.number()]))) }), ]), properties: z.object({ nome: z.string(), descricao: z.string().optional(), imagemUrl: z.string().url().optional(), }), }); ``` Um schema Zod por cat