Hoje em dia está cada vez mais fácil utilizar novos recursos em páginas e sistemas web.
O Html 5 trouxe um novo recurso que é a API de geolocalização que é usada para obter a posição geográfica do dispositivo do usuário. Esta funcionalidade funciona melhor em dispositivos móveis. A localização em dispositivos que não possuam recursos localização não fica muito precisa.
Por uma questão de proteção de privacidade, este recurso só fica ativo quando o usuário concorda em autorizar que a página ou o sistema utilize este recurso. Então quando o programa ativa o recurso. O navegador abre um pop-up perguntando se o usuário autoriza que a sua gelocalização seja disponibilizada pela aplicação.
Através do código java-script:
<script> navigator.geolocation.getCurrentPosition(showPosition); </script>
Ele chama esta função showPosition():
<script>
function showPosition(position)
{
var latitude=position.coords.latitude;
var longitude=position.coords.longitude;
}
</script>
Os códigos position.coords.latitude e position.coords.longitude, trazem respectivamente os valores em números a latitude e a longitude do dispositvo.
Com poucos códigos podemos utilizar a biblioteca do openstreetmap para localizar no mapa mundi onde o usuário está.
Veja o código abaixo. Preste atenção que estou comentando cada um deles.
<!DOCTYPE HTML>
<html lang=”pt-br”>
<head>
<meta charset="utf-8">
<!-- Carrega a aparencia da página como o tamanho do mapa e propriedades de botão -->
<style>
.map {
height: 400px
}
.btn {
background-color: rgb(230 10 112 / 30%);
border: 0;
color: #fff;
padding: 10px;
text-shadow: 0 0 1px rgba(0, 0, 0, .3);
text-decoration: none;
margin: 0.5rem 0 1rem;
display: inline-block;
}
</style>
<title>Exemplo de geolocalização com o openstreetmap</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script>
//verifica se o navegador é compatível com o recurso
function getLocation(e)
{
e.preventDefault();
if (!navigator.geolocation) {
alert("Seu navegador não suporta geolocation");
}
else
{
// Se o navegador for compatível retira da tela o botão caso ele tenha sido clicado
document.getElementsByClassName("btn")[0].style.display = 'none';
/* esta função tem dois objetivos a primeira ativa a api de gelocalização e atualiza cada 5 segundos a posição do usuário
e chama a função "sucess" para pegar os valores de latitude e longitude */
window.setInterval(function(){
navigator.geolocation.getCurrentPosition(success, error)
}, 5000);
}
}
// Esta função pega a latitude e a longitude, ativa a biblioteca do OpenStreetMap e desenha onde o usuário está no mapa.
function success(position) {
/* para o mapa entrar na tela configurei as coordenadas da cidade de Brasília para mostrar antes de clicar no botão.
Também configurei a zoom do mapa para a distância 4 e também declarei as váriáveis */
var latitude=-15.7939
var longitude=-47.8828
var zoom=4
var map, marker
// Se a posição não é diferente de vazio pega a latitude e longitude
if (position!="vazio")
{
latitude = position.coords.latitude;
longitude = position.coords.longitude;
zoom=17
}
// Instanciando o mapa da leaflet
map = L.map('map').setView([latitude, longitude], zoom);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
key: '',
styleId: 103288,
maxZoom: 19
}).addTo(map);
// cria o marker (imagem da seta da gelocalização) e também escreve que você está aqui.
if (position!="vazio")
{
// Marker using leaflet
marker = L.marker([latitude, longitude]).addTo(map);
marker.bindPopup('<p>Você está aqui</p>').openPopup();
}
}
// Caso não consiga pegar a gelocalização ele escreve um alerta na tela que não conseguiu encontra a sua localização
function error() {
alert('Não conseguimos encontrar a sua localização. Exprimente acessar esta mesma página colocando https:// de vez de http://');
}
</script>
</head>
<!-- Quando carregar a página chama a função sucess com o valor vazio para carregar a localização de brasília. -->
<body onload="success('vazio')">
<!--Cria o botão para ser clicado -->
<button class="btn" onclick="getLocation(event)">Clique para saber a sua localização</button>
<!-- Em id="map" é onde o mapa do open street map vai ser carregado -->
<div id="map" class="map"></div>
</body>
</html>
Como resultado temos este exemplo:
Espero que você tenha aprendido como utilizar este recurso.