7

Bom, eu gostaria de saber como que se faz pra criar um mapa estilo o do site bomnegocio.com. Eu não sei se naquele mapa existe uma única imagem ou várias imagens agrupadas.

Alguém poderia me da uma luz de como se faz aquele efeito?

2
  • 5
    Se está se referindo ao mapa da página inicial, ele é feito com SVG, olhe o código fonte e verá.
    – Wakim
    Commented 13/06/2014 às 17:31
  • 1
    Tem um plugin de edição e criação de SVG, muito bom! raphaeljs.com Commented 13/06/2014 às 20:00

1 Resposta 1

11

Criar um mapa interativo SVG é simples porém trabalhoso.

Primeiramente deve-se criar o arquivo SVG, É necessário criar os estado separadamente, para isso vou demonstrar utilizando o editor de imagens GIMP:

Abra o GIMP e importe uma imagem do mapa do Brasil

Mapa Brasil Gimp

Redimensione a imagem para o tamanho desejado, no exemplo o tamanho é 600px X 590px.

Selecione o primeiro estado, no exemplo selecionei o Acre, mais é indiferente.

Usando a ferramenta de seleção varinha mágica, selecione o estado.

Selecionando Estado

Após selecionado, clique no menu Selecionar > Para vetor

selecionar para vetor

Habilite a janela vetores, clicando no menu Janelas > Diálogos de encaixe > Vetores. Clique com o botão direito no vetor e exportar para vetor:

exportar para vetor

Salve e abra o arquivo, usando o notepad++, você encontrará o código:

<svg xmlns="http://www.w3.org/2000/svg"
     width="600" height="590"
     viewBox="0 0 432 428">
  <path id="seleçao" ...

Altere o id do path para id desejado do estado, exemplo:

<svg xmlns="http://www.w3.org/2000/svg"
     width="600" height="590"
     viewBox="0 0 432 428">
  <path id="acre" ...

Repita o processo para cada estado, porém nos próximos você somente utilizará o código path gerado. Dessa forma será possível gerar o código SVG do desenho e trabalhar com CSS e jQuery e manipular o mapa da forma que desejar.

No exemplo, criei uma div com id="mapa" e coloquei o código dentro desta div:

<div id="mapa">
  <svg xmlns="http://www.w3.org/2000/svg" width="600" height="590" viewBox="0 0 432 428">
    <path id="acre" data-name="Acre"
        fill="none" stroke="black" stroke-width="1"
        d="M 40.00,152.22
           C 40.00 ..." />
    <text x="15" y="160">AC</text>

    <path id="amazonas" data-name="Amazonas"
        fill="none" stroke="black" stroke-width="1"
        d="M 107.4 ..." />
    <text x="95" y="105">AM</text>
  </svg>
</div>

No CSS

#mapa svg path {
    stroke:#200772; /*cor da borda do estado*/
    fill:#4671D5; /*cor do estado*/
    cursor:pointer;
}

#mapa svg path:hover {
    fill:#be2f33;
    stroke:#be2f33;
}

Veja no exemplo simples online, com apenas dois estados JSFiddle, pois conforme mencionei é trabalhoso :)

Obs: Este é um exemplo simples de como criar, pode-se trabalhar para adicionar os textos, siglas e o que mais desejar.

4
  • Depois de tudo pronto, como eu faço para linkar pagina por pagina de cada estado?
    – user17976
    Commented 10/11/2014 às 23:26
  • @Lucas você pode colocar a tag <a xlink:href="..."></a>, ou pode abrir a página que deseja com jQuery, jsfiddle.net/E573B/38, no exemplo o estado do Acre abre com jQuery e o do Amazonas com tag <a>
    – abfurlan
    Commented 11/11/2014 às 16:01
  • Revivendo! é possível realizar o mesmo "serviço" só que com imagens "desenhas" ou seja, imagens que tenha ilustrações reais e não cor solida como o exemplo! Commented 16/02/2015 às 1:38
  • 2
    @abfurlan se eu pudesse votar com up mais de uma vez eu faria! Me ajudou muito! Commented 16/10/2015 às 17:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .