fbpx

Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Plugin MapSVG: Mapas interativos no WordPress

Você está em:

Plugin MapSVG: Mapas interativos no WordPress
Revisão do plug-in MapSVG: crie mapas interativos no WordPress

MapSVG é um plugin WordPress bacana que ajuda você a criar mapas interativos e responsivos em seu site WordPress. Graças a um conjunto de recursos interessantes, você pode converter qualquer arquivo SVG em um mapa interativo. Isso não é tudo, você pode criar plantas baixas detalhadas, infográficos, mapas do Google, mapas cloropléticos, mapas de imagens e muito mais.

Nesta revisão, analisamos os recursos que tornam o  MapSVG um dos melhores plugins de mapeamento para WordPress na web. Também testamos o plug-in, então fique por aqui e leia até o fim. Este é definitivamente um bom negócio, então pegue uma caneca de café e vamos rolar.

Mapas interativos MapSVG para WordPress

Trazido a você pelo extraordinário desenvolvedor Roman Stepanov, o MapSVG torna a criação de mapas interativos fácil e divertido. Eu me diverti muito brincando com as várias opções, mesmo tendo que ler a documentação primeiro. Dito isso, vejamos os recursos disponíveis no MapSVG.

Mais de 100 mapas prontos

Para ajudá-lo a começar a trabalhar, o MapSVG vem com mais de 100 mapas geocalibrados. Existe um mapa-múndi, e já está subdividido em regiões clicáveis (países). Então você tem mapas de países com os respectivos estados/províncias. Você também recebe alguns mapas especiais.

E como a maioria dos mapas são calibrados, você pode adicionar marcadores aos mapas usando um endereço ou coordenadas. Além disso, você pode criar seus próprios mapas SVG e carregá-los no MapSVG.

Tudo o que você precisa fazer é criar uma imagem SVG usando qualquer software de edição vetorial, como Inkscape ou Adobe Illustrator, fazer o upload da maldita coisa e personalizar.

Você sabe o que isso significa? Isso significa que você pode projetar diagramas interativos e visualizar estatísticas (e geralmente melhorar a experiência do usuário) sem se preocupar.

Objetos de banco de dados

O MapSVG permite criar objetos e adicioná-los a áreas específicas do seu mapa. Isso permite que você enriqueça seus mapas com informações, oferecendo aos visitantes da web uma experiência imersiva.

Para fins de ilustração, vamos supor por um minuto que você é um corretor de imóveis com propriedades para vender em todo o país. Você está indo muito bem e gostaria de mostrar as propriedades disponíveis em um mapa. Você gostaria de exibir informações como tamanho, endereço, preço, fotos e coisas assim.

O MapSVG permite que você adicione esses detalhes a um banco de dados e, em seguida, anexe as informações a uma ou várias áreas do seu mapa. Sempre que um usuário clica na área que você define, digamos um estado, os detalhes são exibidos em um belo popover, visualização de detalhes ou dica de ferramenta.

Diretório filtrável e pesquisável

Como se não bastasse adicionar objetos de banco de dados, o MapSVG permite que você crie um diretório e o exiba próximo ao seu mapa. Indo com nossa analogia imobiliária, você pode querer mostrar todas as propriedades (ou agentes) disponíveis em um determinado estado. O MapSVG torna isso muito possível.

Os usuários podem filtrar itens no diretório usando filtros suspensos ou uma caixa de pesquisa. Além disso, os usuários podem filtrar objetos clicando em uma área específica no mapa. Esse recurso de diretório facilita a compreensão até mesmo dos diagramas e mapas mais complexos. Além disso, os usuários podem encontrar informações facilmente, o que é uma vantagem para o seu UX.

Aprimore o Google Maps

Eu mencionei que você pode integrar o MapSVG com o Google Maps? Sim, você pode e você só precisa de uma chave de API do Google. Normalmente, você não pode personalizar o Google Maps extensivamente, o que é ou pode ser limitante em alguns cenários. O MapSVG permite que você supere esse desafio.

Quão? Você pode sobrepor mapas vetoriais em qualquer tipo de Google Map (terreno, satélite, estrada ou híbrido). E como as imagens vetoriais são interativas, você pode modificar seu Google Maps até cair. O resultado final óbvio aqui é que você pode fornecer mais usabilidade.

Lembre-se de que os mapas do Google vêm com um conjunto de controles. Junte esses controles com os recursos do MapSVG e você literalmente deixará seus usuários loucos de emoção. Eles vão ficar tipo, “Como diabos eles fizeram isso?” Esse recurso permite que você aprimore seu mapa do Google destacando pontos de referência e tornando qualquer coisa clicável.

Editores de CSS, JavaScript e modelos

Qual é a utilidade de um mapa que você não pode personalizar ou estender? Roman parece ter esse fundamento com editores CSS e JavaScript bacanas. Contanto que você conheça o código, você pode levar suas ilustrações interativas ao limite.

Para começar, você pode estilizar seus mapas e diagramas com CSS como desejar e sem suar a camisa. Você pode estilizar muitos elementos de dicas de ferramentas, popovers e outros contêineres de informações. Além disso, você pode aproveitar o poder do JavaScript para estender a funcionalidade de mapa padrão.

Além disso, você obtém um editor de modelos que o ajuda a criar modelos personalizados para popovers, marcadores e dicas de ferramentas. O editor de modelos é fácil de usar, não esperamos que você tenha problemas.

Painel de controle intuitivo com visualização ao vivo

Trabalhar com o MapSVG é bastante simples graças a um painel de administração intuitivo que facilita muito a criação de mapas. A criação de mapas e outras ilustrações interativas com o MapSVG é feita com facilidade do início ao fim.

Além disso, o plug-in vem com um recurso de visualização ao vivo que permite ver suas alterações em tempo real. Agora você não precisa se perguntar como seus mapas ficarão após a conclusão. Além disso, você não precisa ir e vir (ou atualizar uma página) para ver a aparência de seus mapas. Que doce?

Mapas de imagem

Mencionamos mapas de imagens há alguns minutos, mas tive que abordar esse recurso sozinho porque acho impressionante. Já sabemos que o MapSVG converte arquivos SVG em mapas interativos automaticamente. Basta desenhar um arquivo SVG, carregá-lo e personalizar.

Mas você sabia que também pode criar mapas a partir de imagens PNG e JPEG? Parece interessante agora, certo? O MapSVG vem com ferramentas de desenho brilhantes que permitem criar mapas interativos (clicáveis) a partir de imagens raster. Como isso é útil? Você pode desenhar plantas interativas de casas, plantas, rotas, plantas de cidades, mapas de assentos e muito mais.

Graças a esses recursos e suporte incrível , nada deve impedi-lo de criar mapas e ilustrações interativas fora desta galáxia. O céu é o limite aqui, já que o MapSVG é um plugin de mapa prático (e provavelmente o melhor) para WordPress.

Como configurar o MapSVG e criar um mapa

Configurar o MapSVG é tão fácil quanto instalar qualquer outro plugin WordPress típico. Você está pronto para começar a criar mapas interativos assim que instalar e ativar o plug-in. Você não precisa configurar nada, pois o MapSVG funciona imediatamente.

OBTER MAPSVG

Vamos ter alguma experiência prática. Pegue uma cópia do MapSVG e siga as instruções a seguir. Faça login no painel de administração do WordPress e navegue até  Plugins> Adicionar novo.

revisão do plugin mapsvg wordpress

Em seguida, pressione o  botão Carregar (1) ,  Escolha Arquivo (2) e pressione o  botão Instalar Agora (3) conforme mostrado abaixo.

revisões do mapsvg

Aguarde a conclusão do processo de instalação e clique no botão  Ativar Plugin .

revisão do mapsvg

E é isso; o plugin está pronto para uso após a ativação. Clique no  item MapSVG no administrador do WordPress para iniciar o painel de controle.

mapasvg

Até aí tudo bem, acho que você vai concordar que o processo é simples. No painel de controle, você pode escolher um dos mapas pré-fabricados, criar um mapa do Google (precisa primeiro de integração, que é tão fácil quanto copiar e colar uma chave de API), construir um mapa de imagem, fazer upload de um arquivo SVG ou baixar um Arquivo SVG com mapa do Google.

Se precisar de ajuda para criar um mapa, você pode obter ajuda rápida clicando  nos links Tutoriais ou  Suporte na parte superior do painel de controle. Vamos escolher um dos mapas pré-existentes. Eu vou com a Chinaporque tudo é feito lá hoje em dia de qualquer maneira

N/B:  O desenvolvedor recomenda o uso  de mapas geocalibrados  em vez de mapas  não calibrados  porque…

…mapas geocalibrados são mais recentes, possuem títulos de região e você pode adicionar marcadores por geocoordenadas (latitude/longitude) ou apenas digitando um endereço que está sendo convertido em coordenadas automaticamente. – Tutoriais MapSVG

Escolha China (ou qualquer outro mapa de sua preferência)  no menu suspenso Novo mapa SVG . Se você odeia a barra de rolagem, sinta-se à vontade para usar a caixa de pesquisa.

criando novo mapa no mapsvg

Na próxima tela, preencha o  Título e altere o  Texto do Pré -carregador , se desejar. Na mesma tela, você pode definir o tamanho do mapa, desativar o design responsivo (está ativado por padrão, portanto, não toque no mostrador), ativar dicas de ferramentas e popovers, entre outras coisas.

Você também notará que o mapa já está dividido em regiões (províncias da China no nosso caso) e elas já são clicáveis! Além disso, familiarize-se com os outros controles, incluindo o  menu suspenso Menu.

Vamos mudar algumas cores e ter uma ideia do plugin. Navegue até  Menu > Cores como mostrado abaixo.

editando cores do mapa no plugin mapsvg wordpress

A  tela Cores ajuda você a escolher as cores dos seus sonhos. O que quero dizer é que não há limite para as cores que você gostaria de usar. Basta trabalhar o seletor de cores até ter algo que você goste. Vou com tons de azul porque WordPress é mozão

Escolha suas cores e não se esqueça de clicar no  botão Salvar Ctrl+S como ilustramos abaixo.

Ver? Eu disse que o MapSVG é fácil de usar. Com alguns cliques, mudei as cores do meu mapa e me sinto bem – exatamente como naquela vez, muitos anos atrás, quando fiquei em primeiro lugar no Google. Editar qualquer outra parte do mapa é igualmente fácil e, para provar meu ponto de vista, adicionarei dicas de ferramentas porque isso seria divertido.

Adicionando dicas de ferramentas no MapSVG

Então, como você adiciona dicas de ferramentas que aparecem quando você passa o mouse sobre uma região em seu mapa? É fácil, e eu vou te mostrar como em um momento.

A propósito, se algo não estiver claro por um motivo ou outro, não hesite em conferir os tutoriais e a documentação oficial do MapSVG . Melhor ainda, acesse a seção de comentários no final deste post e convocarei Thor apenas para você. Esse martelo resolve tudo

Além disso, adicionar dicas de ferramentas envolve adicionar um modelo (lembra do editor de modelos que mencionamos anteriormente?). Para isso, navegue até  Menu > Modelos e escolha  Dica de ferramenta de região. 

adicionando dicas de ferramentas no plugin mapsvg wordpress

Em seguida, adicione o seguinte código no editor de modelos e pressione o botão Salvar Ctrl+S como mostrado acima.

Province: <strong>{{title}}</strong>

O código acima é HTML simples com tags Handlebars . Se você quiser mostrar apenas o título de sua região, use a tag {{title}}. Você também pode definir seus próprios campos personalizados, pois aprenderá em um momento. Mas primeiro, vamos ativar o recurso de dicas de ferramentas.

Navegue até  Menu > Configurações e ative o  recurso Dicas de ferramenta , conforme ilustramos abaixo.

revisões do mapsvg

Como você pode ver na captura de tela acima, nossas dicas de ferramentas estão ativas. Ainda assim, mencionei que mostrarei como adicionar campos personalizados para que você possa enriquecer suas dicas de ferramentas de maneiras inimagináveis. Digamos que você queira adicionar fotos e mais informações às dicas de ferramentas. Como você faria isso? Para isso, invocamos os  objetos de banco de dados que mencionamos anteriormente.

Adicionando campos personalizados por meio de objetos de banco de dados

O MapSVG permite adicionar campos personalizados aos seus mapas. Já temos o campo {{title}}, mas vamos ver como podemos adicionar mais campos personalizados. Você tem a opção de campos personalizados, incluindo  texto, área de texto, caixa de seleção, imagens  e assim por diante. Vamos adicionar algumas imagens à província de Nei Mongol.

Vá para  Menu > Regiões e clique no botão  Editar campos conforme destacamos na imagem abaixo.

adicionando campos personalizados no MapSVG

Na próxima tela, pressione o  botão Imagem e depois o  botão Salvar campos como mostrado abaixo.

Salve suas alterações clicando no botão  Salvar Ctrl+S . Lembre-se sempre de salvar suas alterações.

Em seguida, pressione o  botão Lista , conforme mostrado na imagem abaixo.

Mude seu mapa para  Editar Regiões e clique em uma região (escolhemos Nei Mongol). Você deve ver seu novo campo personalizado ( Imagens ) à direita. Aperte o  botão Procurar . Veja imagem abaixo.

Na próxima tela, adicione suas imagens e clique no botão Escolher imagens .

Você será redirecionado de volta para a  tela Edit Regions  onde você deve clicar no botão  OK (1)  . Em seguida, clique no botão  Salvar Ctrl+S (2) e volte para o  modo de visualização (3) conforme mostrado abaixo.

Se você tentar passar o mouse sobre Nei Mongol neste momento, as imagens não aparecerão na dica de ferramenta. Por quê? Bem, não criamos um modelo para as imagens. Vamos fazer isso neste minuto.

Navegue até  Menu > Modelos > Dica de ferramenta de região e altere o código para este:

Province: <strong>{{title}}</strong><br />

First image:<br />

<img src=”{{images.0.thumbnail}}” width=”40px” /><br /><br />

All images:<br />

{{#each images}}

    <img src=”{{thumbnail}}” width=”40px” />

{{/each}}

Aqui está uma imagem para mais ilustração. Lembre-se de clicar no  botão Salvar .

Agora, tente passar o mouse sobre a região selecionada (Nei Mongol no nosso caso). Diga-me o que você vê. Isso é o que está na minha tela.

Bem legal, certo? Você acabou de aprender como adicionar campos personalizados aos seus mapas MapSVG. Adicionar popovers e marcadores também é tão fácil quanto uma torta. Além disso, contanto que você conheça esses conceitos básicos, você pode criar qualquer mapa/diagrama interativo sob o sol.

Trabalhar com o MapSVG é coisa de alunos da quarta série, especialmente porque Roman Stepanov oferece ótimo suporte e orientação incrível por meio de tutoriais. Para exibir seu mapa em seu site WordPress, salve suas alterações e navegue até  Páginas > Adicionar novo.

Em seguida, aperte o  botão MapSVG como mostrado acima e escolha seu mapa. Isso adiciona o shortcode [mapsvg id=”17″ title=”China”] à sua página do WordPress. De qualquer forma, sinta-se à vontade para adicionar o mapa em qualquer lugar do seu site usando o shortcode. Não se preocupe, os mapas que você cria com o MapSVG são 100% responsivos, o que significa que ficarão ótimos em vários dispositivos.

Em seguida, clique em publicar e veja os resultados no frontend.

Conclusão

Estaríamos aqui o dia todo se passássemos por cada recurso existente, mas encorajo você a obter sua própria cópia do  plug-in de mapa MapSVG WordPress e fazer um test drive. Cá entre nós, é o único plugin de mapa do WordPress que você vai precisar.

Você tem uma pergunta ou sugestão? Por favor, não hesite em entrar em contato através da seção de comentários abaixo. Saúde!

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

Meu carrinho
🎁 Faltam R$100,00 para liberar a Black da FULL
Seu carrinho está vazio.

Parece que você não adicionou nada ao seu carrinho =(