Desabilite seu adblock e script blocker para visualizar esta página

Mapa do Brasil em svg com links

Mapa do Brasil em svg com links

Postado em Javascript, SVG   - Tags , ,

Neste post irei ensinar como fazer o mapa do Brasil em svg com links para cada estado, utilizando o Framework Raphaël JS.

Primeiro passo é criar uma pasta para colocar os arquivos do mapa, pois é legal deixar bem organizado cada projeto que se inicia.

O mapa que utilizo neste tutorial é encontrado no site do wikipedia, para baixar o mapa do Brasil em SVG acesse o link: https://commons.wikimedia.org/wiki/File:Brazil_Political_Map.svg;

Ao baixar o mapa, coloque-o dentro da pasta criada. Baixe o mapa em Download > Full resolution e salve com o nome que deseja para seu mapa.

Após baixar o mapa é preciso abrir o arquivo em um editor de vetores que leia SVG (utilizei o Illustrator, mas pode ser aberto no Gimp ou InkScape). Neste post irei falar utilizando o software Adobe Illustrator.

Clique no mapa e retire o contorno que tem no arquivo SVG, pois assim como eu, você pode ter visto o mapa todo estranho com contornos gigantes em volta do mapa;

Você poderá editar o arquivo do mapa como desejar, se caso queira modificar as curvas que estão bem complexas e com isso ficará bem grande o código SVG gerado depois.

Depois de arrumar o que desejar no mapa é hora de salvar o mapa em File > Save As…  Ao abrir a caixa de diálogo do illustrator, nomeie o arquivo para o nome que desejar e salve ele dentro da pasta criada. Após irá abrir outra caixa de diálogo SVG Options, clique no botão SVG Code ( isso permitirá que você salve sua imagem para SVG em formato XML ) e após clique em OK; Pronto, o arquivo que iremos utilizar para construir o mapa está finalizado.




O seu arquivo.svg vai ter um monte de <path>, (e possivelmente <rect>, <circle> etc.) tags, cada um com um atributo ‘d’ contendo <path>.
O Framework Raphaël não utiliza dados SVG, ele só usa os dados de “path”, então para converter seu arquivo usaremos um conversor de SVG para Raphaël ( recomendo http://readysetraphael.com ) para exportar nosso código a ser utilizado com o Raphaël Js.

Entre no site para converter o arquivo, clique em select file e ache o  seu arquivo SVG do mapa que está na pasta do projeto. O sistema irá converter o seu arquivo SVG em um arquivo otimizado para trabalhar com o framework. Copie o código e cole em um editor HTML como sublime, Dreamweaver, Brackets (utilizo este projeto open source da Adobe), ou qualquer outro que estiver familiarizado.

Cole o código JavaScript em um arquivo em branco no seu editor e salve-o na pasta do projeto. Eu salvei o meu como map.js.

Você precisará editar o arquivo map.js, deixando mais limpo o seu código para poder colocar os links e colocar cada variável “var” com o nome dos estados;

A cada “var” no seu arquivo, abra espaço para ficar bem visível como a imagem acima.

No local onde diz  ” var rsr = Raphael(‘rsr‘, ‘623.6’, ‘549.9’); ”   coloque “map”  –>  ”  var rsr = Raphael(‘map‘, ‘623.6’, ‘549.9’);  “

Vamos trocar o tamanho do mapa para 700px X 700px, colocando ”  var rsr = Raphael(‘map’, ‘700’, ‘700’);  “

Abaixo apague  a linha ” var Estados = rsr.seth(); ”  e  declare mais uma variável  “ var regions = []; “.

*imagem abaixo

mapa svg brasil

Para cada estado coloquei o “var” como mapa1, mapa2, sucessivamente…

Após separar cada  bloco de “var” e suas coordenadas SVG, colocar nomes nas variáveis, mapa1 e etc…

Localize em cada bloco de “var” os atributos como na imagem abaixo e exclua cada um deles; Vamos apagar todas as atribuições que vieram junto com o mapa, pois iremos colocar as nossas personalizadas.

*Não remova o fechamento ” ; ” do final de cada “var”;

mapa svg brasil

Ao excluir os atributos dos blocos, também devemos excluir no fim do código as linhas como mostra a imagem abaixo:

mapa svg brasil

Após removidos todos os atributos dos blocos, devemos inserir os atributos que queremos como links, cor de borda, opacidade e o título que irá aparecer em baixo do estado que passar o mouse. O código  abaixo mostra o que devemos utilizar para funcionar os links e outras configurações que necessitamos para nosso mapa.

Código das atribuições para cada estado:

mapa1.attr({fill: '#ffffff','stroke-width': '1','stroke-opacity': '1'}).data({'id': 'mapa1', 'region': ' '}).data({'url': 'http://www.publiquesites.com'});
regions.push(mapa1); 
mapa svg brasil

Ao final de cada “var” você deve inserir este código mudando a variável “mapaX” em cada linha que vier para a variável que for do bloco.

O ” ‘region’: ‘ nome do estado ‘ ” deve ser preenchido com o nome de cada estado respectivo do mapa do Brasil; No atributo de Data – URL, dentro das aspas simples você deverá inserir o link que deseja direcionar o usuário ao clicar no

No final do arquivo você deve adicionar o código:

// Iterate through the regions & change Yorkshire's fill colour to gold
for (var i = 0; i < regions.length; i++) {

if (regions[i].data('id') == 'heaven-on-earth') {
regions[i].node.setAttribute('fill', 'gold');
}

// Showing off
regions[i].mouseover(function(e) {
this.node.style.opacity = 0.7;
document.getElementById('region-name').innerHTML = this.data('region');
});

regions[i].mouseout(function(e) {
this.node.style.opacity = 1;
});

regions[i].click(function(e) {
location.href=this.data('url');
});
}

Pronto, aqui acabamos a edição do arquivo map.js.

Agora só falta formar o html que vai mostrar tudo isso que organizamos até agora:

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<title>Mapa do Brasil em SVG - Publique sites - utilizando raphael.js</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h3 class="titulo">Mapa do Brasil em SVG - Publique sites</h3>
<div id="map"></div>
<h3 id="region-name"></h3>
<script src="raphael-min.js"></script>
<script src="map.js"></script>
</body>
</html>

Criamos também um arquivo css para colocar estilo em nossa página com o mapa. Nomeamos ela como style.css e nesse arquivo está as características e configurações aplicadas ao mapa.

body{margin:0 auto; padding:0; background:#32a201; text-align: center; width: 100%; height: 100%; }
#map{ margin:0; padding-left:150px; cursor:pointer;}
h3{font-family: sans-serif; font-size:22px!important; color:#fff}

Agora com o arquivo do mapa JS editado e o arquivo SVG do mapa pronto, baixe o arquivo minificado do framework Raphaël Js em:  https://raw.githubusercontent.com/DmitryBaranovskiy/raphael/master/raphael-min.js e coloque ele junto a pasta do projeto.

Baixar arquivos finalizados

Post inspirado no tutorial

Sei que vai ter pessoas que querem uma solução mais rápida e pronta e por isso separei alguns links que pesquisei que fazem a mesma coisa e talvez até melhor do que estamos falando aqui neste tutorial; Segue abaixo em links para que possam agilizar sua produção, porém quero ressaltar que devemos nos esforçar em cada tutorial que aprendemos na web, pois eles podem nos dar ideias para outros projetos que não serão necessariamente iguais a este, e se você tiver feito o que falamos aqui estará habilitado a CRIAR e não somente reproduzir o que é entregue em blogs, com isso seu trabalho será muito mais valorizado!

Mapa do Brasil em CSS: https://github.com/insign/mapa_Brasil_CSS

Mapa do Brasil em SVG mapa OLX: https://github.com/felipeduardo/mapa-brasil-svg