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

O MapSVG é um plugin bacana do WordPress que ajuda você a criar mapas interativos e responsivos no 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 detalhadas, infográficos, mapas do Google, mapas de Chloropleth, mapas de imagens e muito mais.


Nesta revisão, examinamos 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 final. Definitivamente, é um bom negócio, então compre uma caneca de café e vamos rolar.

Mapas interativos do MapSVG para WordPress

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

Mais de 100 mapas prontos

Para ajudá-lo a acelerar, o MapSVG vem com mais de 100 mapas geo-calibrados. Existe um mapa do mundo e já está subdividido em regiões (países) clicáveis. 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 é calibrada, você pode adicionar marcadores aos mapas usando um endereço ou coordenadas. Além disso, você pode criar seus próprios mapas SVG e enviá-los para o MapSVG.

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

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

Objetos de banco de dados

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

Para fins de ilustração, vamos supor por um minuto que você é um agente imobiliário 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ê deseja exibir informações como tamanho, endereço, preço, fotos e coisas assim.

O MapSVG permite adicionar esses detalhes a um banco de dados e anexar 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 uma boa popover, exibição de detalhes ou dica de ferramenta.

Diretório filtrável e pesquisável

Como se adicionar objetos do banco de dados não fosse suficiente, o MapSVG permite criar um diretório e exibi-lo ao lado do seu mapa. Seguindo nossa analogia com imóveis, convém 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 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 ao Google Maps? Sim, você pode e precisa apenas de uma chave da API do Google. Normalmente, você não pode personalizar o Google Maps extensivamente, o que é ou pode ser limitativo em alguns cenários. O MapSVG permite que você supere esse desafio.

Quão? Você pode colocar mapas vetoriais em camadas sobre qualquer tipo de mapa do Google (terreno, satélite, estrada ou híbrido). E como as imagens vetoriais são interativas, você pode modificar seu mapa do Google até soltar. 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. Associe esses controles aos recursos do MapSVG e você literariamente deixará seus usuários loucos de emoção. Eles serão como, “Como diabos eles fizeram isso?” Esse recurso permite aprimorar 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 fundamentado isso nos editores bacanas de CSS e JavaScript. Desde que você conheça o código, pode levar suas ilustrações interativas ao limite.

Para iniciantes, você pode estilizar seus mapas e diagramas com CSS conforme desejar e sem precisar se preocupar. 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 padrão do mapa.

Além disso, você obtém um editor de modelos que 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 é bem simples, graças a um painel de administração intuitivo que facilita a criação de mapas. A criação de mapas e outras ilustrações interativas com o MapSVG é combinada 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 as alterações em tempo real. Agora você não precisa se perguntar como seus mapas serão exibidos após a conclusão. Além disso, você não precisa ir e voltar (ou atualizar uma página) para ver a aparência dos seus mapas. Que doce?

Mapas de imagem

Mencionamos mapas de imagem há alguns minutos atrás, mas eu tive que abordar esse recurso por conta própria porque acho impressionante. Já sabemos que o MapSVG converte arquivos SVG em mapas interativos automaticamente. Basta desenhar um arquivo SVG, enviá-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 rasterizadas. Como isso é útil? Você pode desenhar plantas interativas, plantas, rotas, planos da cidade, mapas de assentos e muito mais.

Graças a esses recursos e incrível Apoio, suporte, nada deve impedir você de criar mapas e ilustrações interativas a partir desta galáxia. O céu é o limite aqui, pessoal, já que o MapSVG é um plugin de mapas sem sentido (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 típico do WordPress. 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 o MapSVG

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

revisão do plugin mapsvg wordpress

Em seguida, pressione o Envio botão (1)Escolha Arquivo (2), e aperte o Instale agora (3) como mostrado abaixo.

mapsvg comentários

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

revisão mapsvg

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

mapsvg

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

Se você precisar de ajuda para criar um mapa, poderá obter ajuda rápida clicando em Tutoriais ou Apoio, suporte links na parte superior do painel de controle. Vamos escolher um dos mapas pré-existentes. Eu irei com a China porque tudo é feito lá hoje em dia de qualquer maneira ��

N / B: O desenvolvedor recomenda usar geo-calibrado mapas em vez de não calibrado mapas porque…

… Os mapas geo-calibrados são mais recentes, têm títulos de região e você pode adicionar marcadores por coordenadas geográficas (latitude / longitude) ou apenas inserindo um endereço que está sendo convertido em coordenadas automaticamente. – Tutoriais do MapSVG

Escolha China (ou qualquer outro mapa que você quiser) no Novo mapa SVG menu suspenso. Se você odeia a barra de rolagem, fique à vontade para usar a caixa de pesquisa.

criando novo mapa no mapsvg

Na próxima tela, preencha o Título e mude o Texto do pré-carregador se você é tão inclinado. Na mesma tela, você pode definir o tamanho do mapa, desativar o design responsivo (está ativado por padrão, 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 Cardápio menu suspenso.

Vamos mudar algumas cores e ter uma idéia do plugin. Navegar para Menu> Cores como mostrado abaixo.

editar cores do mapa no plugin mapsvg wordpress

Cores tela ajuda a escolher as cores dos seus sonhos. O que quero dizer é que não há limite para as cores que você deseja usar. Basta trabalhar com o seletor de cores até obter o que deseja. Eu vou com tons de azul porque o WordPress é namorado ��

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

Vejo? Eu lhe disse que o MapSVG é fácil de usar. Com alguns cliques, mudei as cores do meu mapa e é bom – assim mesmo uma vez, há muitos anos, quando fiquei em primeiro lugar no Google. Editar qualquer outra parte do mapa é igualmente fácil e, para provar meu argumento, 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 do seu mapa? É fácil, e mostrarei como em um momento.

A propósito, se algo não estiver claro por um motivo ou outro, não hesite em consultar o funcionário Tutoriais e documentação 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 depois escolha Dica de região. 

adicionando dicas de ferramentas no plugin mapsvg wordpress

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

Província: {{título}}

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

Navegar para Menu> Configurações e ligue o Dicas de ferramentas apresentam como ilustramos abaixo.

mapsvg comentários

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 maneiras inimagináveis. Digamos que você gostaria de adicionar fotos e mais informações às suas dicas. Como você faria isso? Por isso, apelamos ao objetos de banco de dados nós 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ê pode escolher entre campos personalizados, incluindo texto, área de texto, caixa de seleção, imagens, e assim por diante. Vamos adicionar algumas imagens à província Nei Mongol.

Vamos para Menu> Regiões e clique no Editar campos como destacamos na imagem abaixo.

Incluindo Campos Customizados no MapSVG

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

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

Em seguida, pressione o Lista como mostrado na imagem abaixo.

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

Na próxima tela, adicione suas imagens e pressione o Escolha Imagens botão.

Você será redirecionado de volta para o Editar regiões tela em que você deve clicar no OK (1) botão. Em seguida, clique no Salvar Ctrl + S (2) botão e depois volte para Pré-visualização (3) modo como mostrado abaixo.

Se você tentar passar o mouse sobre Nei Mongol nesse 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.

Navegar para Menu> Modelos> Dica de Região e altere o código para isso:

Província: {{título}}
Primeira imagem:


Todas as imagens:
{{#each images}} {{/cada}}

Aqui está uma imagem para mais ilustrações. Lembre-se de acertar o Salve  botão.

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

Bem arrumado, certo? Você acabou de aprender como adicionar campos personalizados aos seus mapas MapSVG. Adicionar popovers e marcadores também é tão fácil quanto torta. Além disso, desde que você conheça essas noções básicas, é bom criar qualquer mapa / diagrama interativo sob o sol.

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

Em seguida, pressione 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, fique à vontade para adicionar o mapa em qualquer lugar do seu site usando o código curto. Não se preocupe, os mapas que você cria com o MapSVG são 100% responsivos, o que significa que eles 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 analisássemos cada recurso existente, mas encorajo você a obter sua própria cópia do Plug-in de mapa MapSVG WordPress e faça um test drive. Entre você e eu, é o único plug-in de mapa do WordPress que você precisará.

Você tem uma pergunta ou sugestão? Não hesite em entrar em contato através da seção de comentários abaixo. Felicidades!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me