Conforme falamos na parte 1, o objetivo deste post é mostrar a implementação da solução. Portanto, vamos logo ao código.
O projeto está no nosso GitHub, ele é apenas uma demo totalmente funcional, para facilitar a explicação e entendimento de como usar o Google Maps para mostrar pontos dinamicamente no mapa de localizações.
Abaixo, segue uma explicação de cada parte do sistema.
RESOURCES.RB
Neste arquivo está toda a parte da aplicação que fornece os dados, criamos usando o Sinatra para facilitar o entendimento, uma vez que o foco do post é mostrar a parte de integração com o Maps e não a Intranet.
Nele temos a declaração da class Resource, que é responsável por armazenar e fornecer os recursos, que neste caso são as comunidades freirianas. Na class tem o método to_json que fornece os dados dos recursos em JSON, de acordo com a condição passada. Este método é chamado quando a página com a visualização da comunidade Freiriana, consulta esta aplicação para buscar e filtrar os dados das comunidades.
Após a class Resource temos um código para popular a base em SQLite, onde usamos a gem Geocoder, que faz interface com API de geolocalização do Google, para pegar a latitude e longitude da comunidade, e também usamos a gem Faker para criar dados genéricos. Por fim temos as duas actions que fornecem os dados de comunidades, categorias e países utilizados pela página. Na primeira todos os dados são buscados e na segunda ocorre o filtro de acordo com os parâmetros informados na url.
PUBLIC
Na public estão os arquivos da página.
index.html
O html em si, contendo um form para filtrar os dados, uma div onde o mapa é renderizado e outra div onde as informações de uma comunidade são apresentadas.
cumunidadesFreirianas.js
Aqui é onde a “mágica” acontece. A primeira coisa que a página faz é carregar o mapa com todas as informações das comunidades, por meio da function initializeMap. Nela é feita uma consulta na aplicação em Sinatra via AJAX e como a implementação que fizemos era cross domain, precisamos utilizar o JSONP, uma vez que você não pode fazer uma requição AJAX para um domínio diferente.
Como pode se notar no parâmetro jsonpCallback, que sobrescreve o nome da função de callback da request, sendo importante notar que para funcionar e você conseguir pegar os dados em JSON, retornados pela aplicação, você precisa adicionar o parâmetro de callback no retorno, como pode ser visto no arquivo resources.rb no final de cada action.
Após fazer a requisição, nos usamos a API do Google Maps, passando os dados de longitude e latitude de cada comunidade. Adicionamos um listener para ao clicar na posição do mapa mostrar as informações daquela comunidade no painel a direita e por fim montamos os selects de categorias e países.
Há ainda a function showInfo que é responsável por mostrar os dados no painel a direita do mapa e é chamada no listener. E por fim a function filter, responsável por fazer a requisição quando o usuário que filtrar as comunidades por categoria e/ou país, nela há um tratamento para a centralização do mapa, pois quando um país é selecionado, o mapa fica centralizado neste, caso contrário, ele exibe o “mundo inteiro”.
Para rodar o projeto, é recomendado usar o RVM, após instalar ele, instale o Bundler (gem install bundler) e rode o bundle install para instalar as gems do projeto. A aplicação pode ser iniciada com o shotgun (shotgun resources.rb), e após isso é só abrir o arquivo index.html que está na public. Se tudo tiver certo, você verá uma página parecida com essa:
Se tiverem alguma dúvida sobre o código, só fazer um comentário que respondemos. =D
Publicação feita por Fabrício Ferrari (@fabricioffc) e Vitor Margis (@vitormargis).
Recentes
-
Web Summit 2019 – Quarto Dia
Presidente de Portugal no encerramento No último dia aconteceu a trilha FullSTK, focada...
-
Festa julina de 10 anos
Eita, sô! Chegamos ao décimo aniversário da Vizir! Chegamos em um momento...
-
Web Summit 2019 – Terceiro Dia
Terceiro dia de evento. Fila para entrar, muita gente de novo, mas faz parte! Tudo...
-
Impressões do Web Summit – primeiro e segundo dia
Palco principal do WebSummit, as luzes dele são legais! No primeiro dia, ou melhor,...
-
Venha fazer parte da Vizir, estamos contratando…
Estamos contratando Desenvolvedores(as)! Apaixonados por resolver problemas reais e que...