badulaques, gadgets e outros…

Sempre existiu diversas formas de saber a localização física do usuário através de sites que prestavam este serviço e claro, os mais eficientes eram pagos e a integração (ao menos dos que testei) eram horríveis.

Com a API Geolocation que está vindo com HTML5, saber a localização de quem visita seu site se tornou bem simples. As aplicações para esta API são inúmeras e a qualidade do serviços prestados por sites podem melhorar significativamente com esta facilidade, e o melhor, de forma gratuita.

Lembrando que nem todos os navegadores novos suportam esta API. Fiz testes no Google Chrome 5.0.375.99, Firefox 3.6.6 e no Opera 10.60 (todos na versão Linux, claro). Li por aí que o Internet Explorer 8 tem uma implementação de teste. Então se alguém testar no IE, favor deixar nos comentários informações sobre seu suporte.

A API Geolocation prevê a captura da posição geográfica, ou seja, latitude e longitude. E isso já resolve tudo. Com as coordenadas geográficas é possível integrar com outras ferramentas e obter o logradouro e até mesmo integrando com o Google Maps gerar um mapa com a localização do usuário.

Lembrando: Se você tem dúvida se o seu navegador suporta esta API, use o site html5teste.com e procure por Geolocation.

Segurança

Se você está preocupado com a segurança e não quer que determinados sites saibam sua localização, a documentação da API prevê autorização prévia do usuário para o compartilhamento dessa informação com o site em que você está navegando.

Ao acessar um site que deseja utilizar sua localização para agregar algum serviço, provavelmente você verá a mensagem abaixo (Opera):

Muito mais justo do que qualquer site saber a sua localização sem o seu consentimento.

Exemplo Simples: Obtendo as Coordenadas Geográficas

Para entender o funcionamento da API vamos a um simples exemplo para obter as Coordenadas Geográficas:

// verifica o suporte do navegador a API Geolocation
if(navigator.geolocation){
	// Obtem a posição atual
	navigator.geolocation.getCurrentPosition(

	// Em caso de sucesso, obtem a latitude e a longitude
	function(position){
		var lat = position.coords.latitude;
		var lon = position.coords.longitude;
		alert('Latitude:' + lat + ', Longitude: ' + lon);
	},
	// Caso ocorra algum erro (Ex.: O usuário não autorizar o compartilhamento da localização)
	function(error){
		alert('Erro ao capturar localização geográfica.');
	});
}
// Caso o navegador não tenha suporte
else{
	alert('Seu navegador não tem suporte a API Geolocation.');
}

Clique aqui para ver o exemplo funcionando.

Agora que temos as Coordenadas Geográficas, o que fazer com esses números?

Podemos simplesmente saber em qual cidade se localiza essas coordenadas:

Obtendo o Endereço Através das Coordenadas

Existem algumas maneiras de se obter o endereço através de coordenadas. Este processo é chamado de “reverse geo-coding”. Como no Brasil nós não temos um web service que faz esse trabalho a exemplo do geoNames.org que possui os endereços dos EUA, nós temos que arrumar outra solução.

Então vamos criar uma solução utilizando a API do Google Maps. De acordo com os Termos e Utilização da API do Google Maps, você somente pode usar essas informações para exibi-las em um mapa. Qualquer outra forma de exibição é proibida. Porém, existe um meio de extrair essas informações sem imprimi-las em um mapa e que será demonstrado. Lembrando que o código a seguir é apenas um estudo de caso e não pode ser utilizado por ir contra os Termos de Utilização da API do Google Maps.

Para começar, vamos precisar chamar a API do Google Maps e para isso antes temos que gerar uma Chave para autenticação de acordo com o domínio que você for utilizar:

<script type="text/javascript" src=http://maps.google.com/maps?file=api&v=2.x&key=sua-chave"></script>

Para conseguir obter os dados de endereçamento, vamos utilizar um método chamado GClientGeocoder. Originalmente, este método serve para gerar um endereço que será marcado em um mapa (como no último exemplo deste artigo). Mas não vamos trabalhar com mapas ainda. O código a seguir é capaz de pegar informações separadamente, como na imagem abaixo.

Vamos aproveitar o primeiro exemplo para obter a Latitude e a Longitude da sua localização e depois pegar os dados do endereço. Veja o código a seguir:

if(navigator.geolocation){
	navigator.geolocation.getCurrentPosition(
		function(position){
			var lat = position.coords.latitude;
			var lon = position.coords.longitude;

			// Iniciando o GeoCoder
			var geocoder = new GClientGeocoder();
			// Informamos a localização e chamamos uma função no retorno da solicitação
			geocoder.getLocations("("+lat+','+lon+")",localizacao);
			//alert(geocoder);

			function localizacao(retorno){
				if (!retorno || retorno.Status.code != 200) {
					alert("Erro: " + retorno.Status.code);
				} else {
					// Placemark é o objeto que contém as infos do endereço
					// Veja no exemplo as informações que contém no Placemark
					endereco = retorno.Placemark[0];
					alert(endereco.address);
				}
			}
		}
	);
}

Clique aqui para ver este código em funcionamento.

Até aqui já obtivemos as Coordenadas Geográficas, já conseguimos as Informações de Endereço e agora vamos mostrar no Mapa a localização do usuário.

Exibindo a Localização no Mapa com Google Maps

Para exibir no mapa, vamos continuar utilizando a API do Google Maps modificando o exemplo acima. Veja como fica:

if(navigator.geolocation){
	navigator.geolocation.getCurrentPosition(
		function(position){
			var lat = position.coords.latitude;
			var lon = position.coords.longitude;

			// Iniciando o Mapa
			map = new GMap2(document.getElementById("mapa"));
			// Centralizando na localização
			map.setCenter(new GLatLng(lat,lon), 15);
			// Iniciando o GeoCoder para fazer o Reverter
			geocoder = new GClientGeocoder();
			// Marcando a localização no Mapa
			geocoder.getLocations('('+lat+','+lon+')', exibeEnd);

			// Personalizando a marcação
			function exibeEnd(retorno){
				map.clearOverlays();
				if (!retorno || retorno.Status.code != 200) {
					alert("Erro: " + retorno.Status.code);
				} else {
					place = retorno.Placemark[0];
					point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
					marker = new GMarker(point);
					map.addOverlay(marker);
					marker.openInfoWindowHtml(
					'Coordenadas: ' + place.Point.coordinates[1] + "," + place.Point.coordinates[0] + '
' +
					'Logradouro: ' + place.AddressDetails.Country.AdministrativeArea.Locality.DependentLocality.Thoroughfare.ThoroughfareName+ '' +
					'Bairro: ' + place.AddressDetails.Country.AdministrativeArea.Locality.DependentLocality.DependentLocalityName + '
' +
					'Cidade: ' + place.AddressDetails.Country.AdministrativeArea.Locality.LocalityName + '
' +
					'País: ' + place.AddressDetails.Country.CountryNameCode);
				}
			}
		}
	);
}

Clique aqui para ver este código em funcionamento.

Nenhum exemplo desse blog armazena informações do usuário e serve apenas para demonstrar o funcionamento da API Geolocation.

Conclusão

A API Geolocation realmente abre um leque de possibilidades e o que podemos esperar são aplicações cada vez mais ricas e interativas, que possam oferecer serviços de acordo com a localização do usuário, assim como já fazem alguns aplicativos para dispositivos móveis, ou simplesmente uma empresa poderá exibir em sua página de contato um “como chegar” a partir da sua localização. Isso pode ser facilmente implementado com poucas modificações no código do artigo “Traçando Rota com o Google Maps” publicando neste Blog.

Todo mundo já deve ter visto em alguns sites, ao inserir a imagem do profile, uma tela onde vc seleciona parte da imagem que vc fez upload para ser recortada. A maioria já pré-estabelece a proporção correta para que seu avatar não fique feio ao ser exibido no layout do site.

O bom dessas ferramentas, é que elas podem ser usadas em sistemas CMS onde usuários leigos podem inserir tranquilamente a imagem da matéria de capa sem ter que depender de um designer (e sem estragar o layout dele).

Uma ferramenta poderosa é o Jcrop, ela oferece bloqueio de proporção, animação e você ainda pode personalizar o css e deixar mais a cara da sua aplicação. E ainda é cross-browser.

Como usar é bem simples, basta incluir o arquivo do plugin e aplicar o plugin com o seguinte comando:

$(function(){
	$('#id-da-imagem').Jcrop();
});

Claro que esta é a forma mais simples, mas na área de exemplos do site existem os códigos para você incrementar este código da maneira que você precisar.

Mas não pára por aí, não adianta selecionar a parte da imagem que você quer se não houver o corte da imagem. Para isso vou usar o exemplo do próprio autor utilizando a biblioteca GD do PHP.

Antes de mais nada, precisamos postar as posições a serem cortadas. Para isso, utilize campos input hidden da seguinte forma:

E a seguinte função para popular esses campos:

jQuery(function(){
        jQuery('#id-da-imagem').Jcrop({
                aspectRatio: 1,
                onSelect: updateCoords
        });
});

function updateCoords(c)
{
        jQuery('#x').val(c.x);
        jQuery('#y').val(c.y);
        jQuery('#w').val(c.w);
        jQuery('#h').val(c.h);
};

Postado as coordenadas da imagem, utilizamos o seguinte código PHP para criar a nova imagem:

$targ_w = $targ_h = 150;
$jpeg_quality = 90;

$src = 'demo_files/flowers.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
    $targ_w,$targ_h,$_POST['w'],$_POST['h']);

header('Content-type: image/jpeg');
imagejpeg($dst_r, null, $jpeg_quality);