{"slug": "buscador-de-imoveis-com-mapa-marcacoes-e-multi-portais", "title": "Buscador de imóveis com mapa, marcações e multi-portais", "summary": "A developer built an interactive HTML app for property search that aggregates listings from multiple Brazilian portals (ZAP Imóveis, OLX, ImovelWeb, Chaves na Mão, Viva Real) and displays them on a map with filtering and deduplication. The app features a responsive split layout with a sidebar list and Leaflet map, and includes detailed property cards with price breakdowns, amenities, and links to all sources.", "body_md": "Copie\n\ntudodaqui pra baixo e cole no Claude (Cowork). Antes de enviar,preencha o bloco. Se você deixar algum campo em branco, o assistente vai te perguntar antes de começar.`FILTROS`\n\n```\nFILTROS\n- Objetivo: [alugar | comprar]\n- Tipo de imóvel: [apartamento | casa | qualquer]\n- Cidade(s) / região: [ex.: Grande Florianópolis-SC — São José, Palhoça, Biguaçu]\n- Bairros preferidos: [ex.: Kobrasol, Coqueiros, Estreito, Trindade | ou \"sem preferência\"]\n- Quartos (mínimo): [ex.: 3]\n- Área mínima (m²): [ex.: 100]\n- Valor máximo TOTAL (aluguel + condomínio, ou preço de compra): [ex.: R$ 6.000]\n- Vaga de garagem: [obrigatória (quantas?) | opcional]\n- Mobília/armários: [ex.: precisa de armários na cozinha e nos quartos | mobiliado | tanto faz]\n- Aceita pets: [sim | não | tanto faz]\n- Imobiliárias/anunciantes a EXCLUIR: [ex.: Fulana Imóveis | nenhuma]\n- Portais a usar: [ZAP, OLX, ImovelWeb, Chaves na Mão, Viva Real | ou os que preferir]\n- Outros requisitos: [ex.: elevador, andar alto, sol da manhã… | nenhum]\n```\n\nVocê é um assistente que monta um **app HTML interativo de busca de imóveis**. Siga as etapas abaixo.\n\n**0) Filtros.** Leia o bloco `FILTROS`\n\nacima. Se **qualquer campo estiver vazio ou ambíguo**, faça as perguntas necessárias ao usuário ANTES de buscar. Não invente critérios.\n\n**1) Fontes.** Use os portais indicados (por padrão: ZAP Imóveis, OLX, ImovelWeb, Chaves na Mão, Viva Real). Faça a busca com a ferramenta de busca web / fetch. Notas práticas:\n\n- Portais agregadores já contêm o acervo da maioria das imobiliárias — priorize-os. Sites próprios de imobiliária costumam ser bloqueados (robots/JS); tente, mas não dependa deles.\n- Alguns portais bloqueiam paginação (ex.: OLX só a 1ª página por região) e páginas individuais podem dar 429/403 — espace as requisições e siga em frente com o que abrir.\n**Respeite a exclusão de anunciantes**: confira o anunciante abrindo a página individual quando a listagem não mostrar (vários vêm sem nome na listagem e só aparecem no anúncio).- Se conseguir, use subagentes em paralelo (um por portal) para acelerar.\n\n**2) Colete e filtre.** Para cada imóvel candidato, confirme TODOS os critérios do bloco `FILTROS`\n\n(quartos, área, valor total, vaga, exclusões). Descarte o que não bater. Extraia por imóvel: bairro, cidade, endereço, aluguel, condomínio, IPTU (se houver), área, quartos, suítes, banheiros, vagas, mobília/armários, comodidades, breve descrição, anunciante, URL do anúncio e (se possível) a URL da foto principal.\n\n**3) Deduplique e junte os links.** O mesmo imóvel costuma aparecer em vários portais. Case-os por cidade + bairro + área (±3–5 m²) + valor (±5%), e por id igual quando existir. Para cada imóvel único, guarde uma lista `sources`\n\ncom **todos os portais e links** onde ele apareceu (não publique o mesmo imóvel duas vezes).\n\n**4) Localização no mapa.** Se você tiver acesso a um geocodificador, use-o para coordenadas exatas. Se não tiver (a maioria dos geocodificadores públicos bloqueia acesso automatizado), use **centroides por bairro** (posição aproximada da área, como o Airbnb faz) com um leve espalhamento para os pinos não empilharem. **Seja honesto no app**: rotule os pinos como “aproximados por bairro”.\n\n**5) Monte UM arquivo HTML autossuficiente** (`index.html`\n\n) com estes requisitos — testados e importantes:\n\n**Layout tipo Airbnb**: no desktop, split com** lista numa sidebar**à esquerda e** mapa**(Leaflet + tiles do OpenStreetMap, sem chave de API) ocupando o resto; no celular, alternador** Lista / Mapa**. Responsivo, tema claro/escuro.** Mapa não pode travar a lista**: carregue o script do Leaflet com`defer`\n\ne só inicialize o mapa depois; a lista deve renderizar mesmo se o mapa/CDN falhar (degrade com aviso). Pinos = pílulas com o preço; clicar abre um card do imóvel.**Página de detalhe** por imóvel: capa, preço (com quebra aluguel + condomínio), ficha (área, quartos, suíte, banheiros, vagas), destaque de**armários/mobília**, descrição, mini-mapa, comodidades e a** lista de todos os portais**(“Ver no ZAP / OLX / …”, cada um abre o anúncio).** Imagens sempre visíveis**: fotos de portais quase sempre** bloqueiam hotlink**. Portanto, para cada imóvel gere uma** capa embutida em SVG (data URI)**— gradiente + bairro + preço + área — que renderiza offline; por cima, tente carregar a foto real com`referrerpolicy=\"no-referrer\"`\n\ne faça`onerror`\n\ncair na capa. Nunca dependa da foto externa carregar.**Marcações do usuário** por imóvel:**🏠 Visitar**,**⭐ Intenção**,**✕ Descartar**. Salve no`localStorage`\n\n**pela ID do imóvel**(não pela posição) para que atualizações da lista NÃO apaguem as marcas. Descartados podem ter um campo de** anotação**; permita nota em qualquer imóvel também.** Filtros no topo**: “📥 Sem marca” (padrão — mostra só os ainda não avaliados, funciona como caixa de entrada), ⭐ Intenção, 🏠 Visitar, ✕ Descartados, e “Todos”. Selo visual quando um imóvel tem 2+ portais.**Sem storage externo** além do`localStorage`\n\n; tudo em memória/arquivo. Não use APIs de browser não suportadas.\n\n**6) (Opcional) Modo “dados separados”.** Se o usuário quiser atualizar os dados sem perder o app, entregue **dois arquivos na mesma pasta**: `listings.js`\n\n(`window.LISTINGS = [...]`\n\ncom os imóveis) e `index.html`\n\n(lê `window.LISTINGS`\n\nvia `