FacetWP – Map Facet

FacetWP Map Facet: O Guia Completo

O FacetWP Map Facet é um recurso poderoso que transforma a forma como interagimos com listas de dados em um site. Através dele, é possível criar um mapa interativo que exibe marcadores representando resultados geocodificados de listagens habilitadas para o FacetWP. O principal diferencial é que esses marcadores não apenas ficam fixos lá; eles podem ser filtrados por outras facetas, como uma faceta de proximidade. Quando aplicadas, o mapa se ajusta automaticamente para incluir apenas os posts ou locais que se enquadram nos parâmetros filtrados. Vamos explorar como essa ferramenta funciona, suas opções e melhorias.

Desenvolvimento

O Funcionamento do Map Facet

No cerne do FacetWP Map Facet está a compreensão de que o mapa não é uma listagem pura, mas sim uma facet. Isso significa que, embora os usuários vejam um mapa repleto de marcadores, ainda é a interação com as facetas que define a experiência de filtração. Para que isso funcione adequadamente, é necessário ter uma listagem habilitada para FacetWP na página. Sem essa ligação, o mapa e outros filtros não aparecerão. Essa listagem pode ser uma criada pelo Listing Builder ou qualquer outro tipo de template suportado. Mesmo que deseje que a listagem permaneça escondida, ela ainda precisa estar presente para que o mapa se comporte como esperado.

Quando a opção de “Ativar filtragem do mapa” é habilitada, o próprio viewport do mapa passa a atuar como um filtro para a listagem. Ao navegar pelo mapa ou alterar o nível de zoom, a listagem é instantaneamente atualizada para apresentar apenas os posts que se encontram dentro da área visível no mapa. Essa função, embora extremamente útil, pode ser desativada utilizando CSS, caso necessário.

Combinando o Map Facet com Proximity Facet

Uma das combinações mais poderosas é entre o Map Facet e a Proximity Facet. Esta última permite filtrar os marcadores com base em uma localização e um raio determinados. Ao estabelecer um ponto e um raio, o mapa ajusta seu zoom para exibir apenas os locais que estão ao alcance do critério definido. Um marcador amarelo sinaliza a localização na Proximity Facet, e essa aparência é totalmente personalizável.

Para quem deseja mais opções de personalização, uma página avançada sobre o design do mapa explica como integrar seus próprios estilos ao mapa e à faceta de proximidade.

Opções Disponíveis

O FacetWP Map Facet oferece uma gama de opções que podem ser configuradas para oferecer uma experiência de usuário rica e personalizável:

• Fonte de dados: Pode-se definir um campo personalizado que contenha coordenadas latitude e longitude embaladas em um formato específico.
• Design do mapa: Os usuários podem escolher entre uma variedade de estilos e esquemas de cores.
• Botões de ativação: A personalização das etiquetas dos botões de tempo, como “Ativar filtragem de mapa” e “Reset”, facilita a adaptabilidade para diferentes públicos e idiomas.
• Limitação de marcadores: Uma maneira de evitar visualizações sobrecarregadas.
• Tamanhos do mapa: Permite uma adaptação responsiva para caber na estrutura do tema.
• Zoom mínimo/máximo: Restringe o nível de zoom possível, de 1 a 20.
• Conteúdo do marcador: Os usuários podem inserir informações HTML e PHP que aparecerão nas janelas de informação dos marcadores.

Exigências

Para que o FacetWP Map Facet funcione, é imprescindível uma chave válida da API do Google Maps. Essa chave deve ser gerada no Google Cloud Console e deve ter os serviços necessários habilitados, como o Maps JavaScript API, Geocoding API e Places API. Uma conta de cobrança é obrigatória, mas o Google oferece um crédito mensal de $200, permitindo cerca de 28,000 cargas de mapa gratuitas. A chave deve ser adicionada às configurações do FacetWP para assegurar que o mapa funcione corretamente.

Personalização Avançada com PHP

A personalização através de PHP possibilita que desenvolvedores insiram código específico no arquivo functions.php do tema. Dessa forma, elementos que não podem ser alcançados por configurações padrão podem ser manipulados. Isso é particularmente útil para criar conteúdo dinâmico e informativo nas janelas do marcador.

Com a utilização do hook facetwp_map_marker_args, é viável criar ou modificar o conteúdo exibido nas janelas de informação dos marcadores, adicionando-se personalizações baseadas nos IDs dos posts, por exemplo, ou utilizando campos criados com Advanced Custom Fields (ACF).

Exibindo Distâncias

Ao utilizar a Proximity Facet juntamente com o Map Facet, é possível mostrar a distância dos posts em relação à localização selecionada. Um exemplo simples de código PHP pode ser adicionado para realizar essa tarefa, garantindo que a informação relevante aparece sempre que o critério de proximidade está ativo, tornando a interação ainda mais rica para o usuário.

Ao Habilitar e Ocultar Botões

Após ativar o botão de filtragem do mapa, o comportamento do viewport muda, atualizando os resultados da listagem automaticamente com a movimentação no mapa. Contudo, se a intenção é desativar essa funcionalidade, atualmente, a única solução é ocultar o botão através de CSS:

css
.enable-map-filtering-button {
display: none;
}

Essa abordagem permite àqueles que configuram o site ter um bom controle sobre como as opções aparecem e a interação do usuário com o conteúdo do site.

Em resumo, o FacetWP Map Facet oferece uma maneira inovadora e intuitiva de visualizar e filtrar listagens em um site. Não só melhora a apresentação dos dados, mas também a interação do usuário. Com seus recursos de filtragem, opções de personalização e a capacidade de combinar com outras facetas, proporciona uma experiência robusta que pode facilmente ser adaptada a diferentes necessidades e contextos.