Vocês viram aquele mapa das eleições do G1? Eu particularmente achei ele bem interessante, ainda mais em saber que utilizaram Jquery!
Mas e se fôssemos fazer isto utilizando apenas JS puro? Como isto ficaria?
Aqui temos um mapa do estado de Roraima na qual queremos saber as informações de suas microrregiões.
O que queremos fazer aqui, é que ao passar o mouse em cima de cada região, a região em questão altere sua cor e que ao clicar que suas informações apareçam ao lado do mapa.
Primeiro de tudo, vamos criar 3 divs. Um que será nosso container, um para nosso svg e por fim para as informações das microrregiões.3
Em seguida adicionaremos nosso SVG dentro da nossa div de cor aquamarine.
CAGOU TUDO! E agora? Vou ter que refazer toda minha imagem no Corel/Photoshop? Claro que não! O truque aqui, vai ser remover o width e height do nosso svg fazendo que ela herde estas propriedades da nossa div, tornando a sua manipulação mais simples.
Shoooooww!!!
Agora é que começaremos a fazer a mágica. Dentro do nosso elemento svg, temos vários outros elementos genéricos utilizados para definir formas, alguns deles polygon, path, line, dentre outros. No nosso caso, teremos o path.
Estes elementos path representarão em nosso mapa as regiões na qual manipularemos a seguir. Para recuperar estes elementos de nossa DOM vamos usar a função querySelectorAll() do JS.
Uma vez recuperados, utilizaremos o forEach() para acessar cada elemento da lista retornada e adicionar os nossos listerners e alterar os atributos do elemento.
Coisa de mais de uma vez? Calma que eu explico!
Com addEventListener estamos definindo qual o evento e o que deve ser feito quando este evento ocorrer. Neste caso, estamos dizendo com o ‘mouseover’, que quando o ponteiro do mouse estiver sobre o elemento ele deve executar nossa função. Dentro desta função, estamos definindo os atributos do nosso elemento usando o setAttribute(). Passamos então o primeiro parâmetro que corresponde a qual dos atributos que iremos alterar, e logo em seguida o valor a ser alterado. Mas peraí?! E esse ‘hover’ aí? Este ‘hover’ é uma classe css que usaremos para definir a nova cor da região. Você pode defini-la normalmente como qualquer classe css, como dentro do svg:
Você já deve ser capaz de alterar as cores das microrregiões apenas passando o mouse por cima – pelo menos aqui compila.
Mas a um problema no nosso código, ao remover o mouse de cima do elemento a cor permanece e não é isso que queremos neste exemplo. Para resolver isto, vamos adicionar outro evento, o mouseout.
Funciona da mesma forma, a diferença agora é que estamos passando a classe fill no lugar de hover.
Shooow!
E aquela parte vazia ali? Vai ficar assim mesmo?!
Não, não! Ali colocaremos as informações das nossas regiões como já dito antes. Vamos colocar duas divs, uma para o nome da microrregião e outra para o que seria a descrição da microrregião.
Para a div que irá conter o nome da nossa região definiremos o seu id de “microregiao_nome” e também uns estilos para organizar o texto. Na div da nossa descrição definiremos seu id de “microregiao_descricao”, colocaremos também uma tag de parágrafo a onde ficará um breve lorem ipsum para representar o conteúdo.
Quase pronto! Lembra do elemento path? Então, agora iremos definir os seus ids com o nome de cada região, e exibir ela para usuário para que ele saiba com qual microrregião ele está interagindo.
Ids definidas e agora como faz para mudar de acordo com a interação?
Muito simples! Adicionaremos mais um evento ao nosso elemento para que quando este for disparado altere o conteúdo da nossa div.
Passamos o “click” como nosso evento, logo, quando o usuário clicar em uma das regiões o evento irá executar nossa função. Veja aqui que utilizamos querySelector() no lugar de querySelectorAll() como anteriormente. O querySelector() retorna apenas o primeiro elemento passado no parâmetro, enquanto o querySelectorAll() retorna uma lista destes elementos.
Dando continuidade ao nosso código, utilizando a propriedade textContent estamos dizendo que queremos alterar o conteúdo do elemento definido pelo querySelector() pelo valor do id do mesmo elemento. E pronto! Nosso mapinha ficou uma belezinha!
Aí funcionou? Aqui compilou! Qualquer coisa comenta aí e dá uma olhada no github do blog. 😉
Até a próxima, galera!
Aqui Compila 
Parabéns Uriel! Muito obrigado pelo post. Há muito tempo eu procuro algo desse tipo para implementar no svg da América do Sul.
CurtirCurtir