RaphaelJs é uma biblioteca incrível para desenho vetorial em um site, especialmente adequada para gráficos interativos. Em um projeto recente, criei um mapa interativo RaphaelJs para as províncias espanholas que você pode testar aqui:
http://mapasvgtest.theagilemonkeys.com
Ou bifurcar aqui:
https://github.com/javiertoledo/spain-map
O processo de criação de tal mapa a partir de um arquivo SVG requer algum processamento e ajustes na fonte SVG:
- Extração de strings de caminho SVG e criação de um objeto JSON para RaphaelJs
Eu escrevi um script ruby simples para analisar o arquivo SVG, extrair pontos e construir caminhos finais a partir deles. Como meu arquivo de origem tinha caminhos mistos, polilinês e polígonos, tive que normalizá-los como caminhos para simplificar as etapas posteriores. Você pode encontrar o script aqui:
https://github.com/javiertoledo/spain-map/blob/master/utils/jsonize.rb
Descobri mais tarde que existem serviços online projetados para fazer esse trabalho, como http://readysetraphael.com/
- Ajustando e juntando alguns caminhos.
Existem províncias em Espanha compostas em mais de um território, por exemplo aquelas compostas por ilhas. Para unificar a detecção de eventos para a província, concatenamos todos os territórios da província em uma única string de caminho por província. Você pode fazer isso porque a primeira operação em cada string é um “movimento do cursor”, então Raphael irá renderizar exatamente o mesmo, mas com um único objeto Path.
É assim que fica o meu arquivo de caminhos depois de extrair e ajustar, também adicionei alguns campos de conveniência para cada caminho, um número e um nome:
https://github.com/javiertoledo/spain-map/blob/master/src/spain -map.coffee
- Carregando e renderizando caminhos
Depois de chegar a este ponto, as coisas se tornam mais simples, basta inicializar um objeto Raphael Paper e iterar sobre caminhos desenhando e adicionando alguns ouvintes de evento a eles.
- Opcionalmente, você pode ajustar o mapa no div do contêiner adicionando os caminhos a um conjunto Raphaël e, a seguir, centralizando a visualização do RaphaelJ em sua caixa delimitadora com Paper.setViewBox (…). (Então percebi que essa não era a melhor ideia, veja a atualização abaixo)
Aqui está o carregador completo que renderiza e centraliza o mapa:
https://github.com/javiertoledo/spain-map/blob/master/src/main.coffee
Atualização: Algumas pessoas notaram sérios problemas de desempenho com o mapa no Firefox e no IE e, após alguma investigação, descobri que o gargalo estava nos cálculos da caixa delimitadora do mapa. Como esses dados são sempre iguais, substituí esse cálculo por valores pré-calculados, obtendo melhorias significativas no desempenho.