sábado quente em Londrina pra variar! A um bom tempo sem escrever, prova de certificação bem próxima e o tempo vai ficando um pouco escasso, chega de desculpas baratas "HAHA" e vamos lá (...)
Post de hoje pretendo expor a vocês uma nova API que venho estudando e pude participar de um "Hackathon" com uma galera muito fera, que o intuito era apresentar essa API e suas funcionabilidades. Falando um pouco sobre a API, ela se chama Plante Aqui você pode encontrar mais sobre no Plante Aqui no Facebook ou se preferir no site oficial http://www.planteaqui.org/ lá você vai encontrar sobre a ideia da API e a proposta que a mesma está divulgando que é bastante interessante por sinal.
Aqui vou apresentar algo bastante básico e utilizar o recurso de consultas que a API (Plante Aqui) me fornece.
Após você ter dado uma lida nos links que repassei vamos explicar o nosso programa de exemplo:
1 - Desenvolver uma interface mobile com JQuery Mobile.
2 - Repassar os dados consultados a API(Plante Aqui).
3 - Com o retorno de sucesso da API(Plante Aqui) vamos utilizar a API(Google Maps) para mostrar os resultados em tela.
Considerando que você leu a ideia central do Plante Aqui a nossa interface cliente basicamente vai receber os dados de latitude e longitude informados pelo usuário que seria as coordenadas em que você quer saber se naquele ponto existe um local adequado para se plantar uma arvore se as coordenadas forem encontradas vamos repassar elas a nosso maps marcando o local.
Chega de papo e vamos codar =)
Começamos a implementar a parte visual:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps vs Plante Aqui</title>
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="docs/_assets/css/jqm-docs.css" />
<script src="js/jquery.js"></script>
<script src="docs/_assets/js/jqm-docs.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
</head>
<script type="text/javascript">
</script>
<body>
<div class="ui-body ui-body-a">
<div data-role="fieldcontain">
<label for="latitude">Latitude:</label>
<input type="text" name="latitude" id="latitude" value="" />
</div>
<div data-role="fieldcontain">
<label for="longitude">Longitude:</label>
<input type="text" name="longitude" id="longitude" value="" />
</div>
<button type="button" data-theme="b" id="enviar" name="enviar" onclick="buscarEndereco();">Verificar Disponibilidade
</button>
</div>
<div id="map_canvas" style="width: 100%; height: 500px"></div>
</body>
</html>
O próximo passo seria implementar o codigo que será responsável em "desenhar" o mapa.
Não sei se você teve a oportunidade de trabalhar com alguma integração das API do google porém vai ver que é bastante simples de entender e aplicar nos seus programas as inúmeras funcionabilidades que a google apresenta.
Sobre o google maps em questão você vai encontrar a documentação aqui: https://developers.google.com/maps/documentation/javascript/v2/introduction neste link tem os exemplos de códigos e parametros que você pode utilizar para enriquecer teu programa.
Voltando a nosso exemplo implemente essa função.
var map = null;
var geocoder = null;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 1);
map.setMapType(G_HYBRID_MAP);
map.setUIToDefault();
geocoder = new GClientGeocoder();
}
}
Se você deu uma lida rápida no link que repassei sobre a API do Google Maps creio que ficou bastante fácil entender o meu código a seguir! "hehe" De modo geral eu instancio a classe GMap2() repassando para o construtor da classe o elemento HTML criado na minha pagina que irá receber o canvas do mapa gerado.
O restante do código se trata de configurações propriamente falando do mapa. O método SetMapType(G_HYBRID_MAP); por exemplo defini o tipo de mapa que será apresentando ao inicializar o programa, no meu caso eu escolhi o "SATÉLITE".
O nosso próximo passo seria adicionar a função a seguir no onload da pagina:
<body onload="initialize()" onunload="GUnload()"> <script src="http://maps.google.com/maps?file=api&v=2&key="SUA_CHAVE"
type="text/javascript"></script>
Mais informações para obter a sua KEY:
https://developers.google.com/maps/documentation/javascript/tutorial
Fazendo isso você já verá algum resultado (...)
Vamos agora para a nossa próxima implementação que seria a função de busca das coordenadas informadas.
No evento onclick="" do button "Verificar Disponibilidade" vamos chamar a seguinte função:
function buscarEndereco(button){
var iLatitude = $('#latitude').val();
var iLongitude = $('#longitude').val();
if(iLatitude != '' || iLongitude != ''){
$.getJSON('http://www.planteaqui.org/api/position?lat='+iLatitude+'&lon='+iLongitude+'',
function(data) {
// dados retornados do Plante Aqui
point = new GLatLng(data[0].positions.lat,data[0].positions.lon);
marker = new GMarker(point);
map.addOverlay(marker);
}
);
}else{
alert('Informe a Latitude e a Longitude para buscar!');
}
}
veja que a requisição é assíncrona e no segundo parâmetro você deve criar a sua função que receberá o retorno que no nosso caso é um JSON, após o retorno instancio a classe
GLatLng(LATITUDE, LONGITUDE);
repassando as coordenadas encontradas pela API Plante Aqui o retorno da função será guardada em uma VAR que será também repassada a classe GMarker(); que receberá as coordenadas retornando um ponto a ser marcado que por final será adicionado ao objeto principal do mapa. =)
Tranquilo né?
A nível acadêmico alcançamos o nosso objetivo que seria mostrar como consumir uma API em RestFull e também a integração com o maps do google.
Fica o reforço da dica para você dar uma melhor olhada na API Plante Aqui veja que a documentação explica exatamente como "sugerir um local para se plantar" e outros métodos vale dizer também que a API está em constante alterações e novas melhorias vem ai.
Ficamos por aqui, com o agradecimento em especifico ao pessoal do Plante Aqui que abriu a oportunidade e a iniciativa.
Download do projeto completo
Até a próxima. :)
