Web APIs & Geolocalização com Leaflet.js

Desvendando Web APIs

com Geolocalização e Mapas Interativos

Nível: Iniciante a Intermediário

Web APIs & Geolocalização com Leaflet.js

Objetivos da Aula

  • Compreender o que são Web APIs e como funcionam.
  • Aprender a usar a API de Geolocalização do navegador.
  • Integrar geolocalização com uma biblioteca de mapas open-source (Leaflet.js).
  • Construir um exemplo prático de um site que mostra a localização do usuário em um mapa.
Web APIs & Geolocalização com Leaflet.js

Parte 1: O que são Web APIs?

Imagine um restaurante. Você é o cliente. A cozinha é o sistema.

O garçom é a API (Interface de Programação de Aplicativos).

  • Você (cliente) faz um pedido ao garçom (API).
  • O garçom leva o pedido para a cozinha (sistema).
  • A cozinha prepara o prato e entrega ao garçom.
  • O garçom traz a comida pronta para você.

Uma Web API é um "garçom" para a web, permitindo que diferentes softwares se comuniquem.

Web APIs & Geolocalização com Leaflet.js

Parte 2: A API de Geolocalização

É uma Web API que permite acessar a localização do dispositivo do usuário, com o consentimento dele.

Como funciona?

  1. Solicitação de Permissão: O navegador sempre pergunta ao usuário primeiro.
  2. Obtenção das Coordenadas: Usa GPS, Wi-Fi, redes celulares, etc., para determinar latitude e longitude.
  3. Retorno dos Dados: A API retorna um objeto com as coordenadas.
Web APIs & Geolocalização com Leaflet.js

Acessando a Geolocalização com JavaScript

O acesso é feito pelo objeto navigator.geolocation.

Métodos principais:

  • getCurrentPosition(sucesso, erro): Obtém a localização uma vez.
  • watchPosition(sucesso, erro): Monitora a localização continuamente.

Funções de Callback:

  • sucesso(posicao): Executada quando a localização é obtida. O objeto posicao contém as coordenadas: posicao.coords.latitude e posicao.coords.longitude.
  • erro(err): Executada se ocorrer um erro.
Web APIs & Geolocalização com Leaflet.js

Parte 3: Mapas com Leaflet.js

Agora que temos as coordenadas, vamos exibi-las em um mapa!

Leaflet.js: Uma biblioteca JavaScript open-source, leve e popular para mapas interativos.

Por que usar?

  • Leve e Rápido
  • Fácil de Usar
  • Flexível (muitos plugins)
  • Gratuito
Web APIs & Geolocalização com Leaflet.js

Parte 4: Exemplo Prático - "Onde Estou?"

Vamos criar uma página que mostra a localização do usuário em um mapa.

Estrutura:


/projeto-geolocalizacao
|-- index.html
|-- style.css
|-- script.js
Web APIs & Geolocalização com Leaflet.js

1. index.html (Estrutura)

Primeiro, preparamos o HTML para incluir o Leaflet, um contêiner para o mapa (<div id="mapa">) e nosso script.

Web APIs & Geolocalização com Leaflet.js
<!DOCTYPE html>
<html>
<head>
    <title>Onde Estou?</title>
    <link rel="stylesheet" href="[https://unpkg.com/leaflet@1.9.4/dist/leaflet.css](https://unpkg.com/leaflet@1.9.4/dist/leaflet.css)" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Onde Estou?</h1>
    <button id="btnLocalizacao">Encontrar Minha Localização</button>
    <div id="mapa"></div>

    <script src="[https://unpkg.com/leaflet@1.9.4/dist/leaflet.js](https://unpkg.com/leaflet@1.9.4/dist/leaflet.js)"></script>
    <script src="script.js"></script>
</body>
</html>
Web APIs & Geolocalização com Leaflet.js

2. style.css (Estilo)

Definimos uma altura para o nosso mapa. Sem isso, ele não aparecerá.

body {
    font-family: sans-serif;
    text-align: center;
}

#mapa {
    height: 400px; /* Essencial! */
    width: 80%;
    margin: 20px auto;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}
Web APIs & Geolocalização com Leaflet.js

3. script.js (Lógica - Parte 1)

Começamos pegando os elementos e configurando o evento de clique.

Web APIs & Geolocalização com Leaflet.js
const btnLocalizacao = document.getElementById('btnLocalizacao');
const divMapa = document.getElementById('mapa');
let mapa;
let marcador;

btnLocalizacao.addEventListener('click', () => {
    if (navigator.geolocation) {
        divMapa.innerHTML = "Obtendo sua localização...";
        navigator.geolocation.getCurrentPosition(sucesso, erro);
    } else {
        alert("Geolocalização não é suportada por este navegador.");
    }
});

function erro() {
    divMapa.innerHTML = "Não foi possível obter sua localização.";
}
Web APIs & Geolocalização com Leaflet.js

3. script.js (Lógica - Parte 2)

Função de sucesso e a função que cria o mapa.

// Função de sucesso da Geolocalização
function sucesso(posicao) {
    const latitude = posicao.coords.latitude;
    const longitude = posicao.coords.longitude;
    inicializarMapa(latitude, longitude);
}

// Função para inicializar e exibir o mapa
function inicializarMapa(latitude, longitude) {
    if (!mapa) {
        mapa = L.map('mapa').setView([latitude, longitude], 15);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap contributors'
        }).addTo(mapa);
    } else {
        mapa.setView([latitude, longitude], 15);
    }
    
    // Adiciona o marcador
    if (marcador) marcador.setLatLng([latitude, longitude]);
    else marcador = L.marker([latitude, longitude]).addTo(mapa);
    
    marcador.bindPopup("<b>Você está aqui!</b>").openPopup();
}
Web APIs & Geolocalização com Leaflet.js

Revisão do Fluxo

  1. Usuário clica no botão.
  2. script.js chama navigator.geolocation.getCurrentPosition().
  3. Navegador pede permissão.
  4. Se o usuário permitir, a função sucesso é chamada com as coordenadas.
  5. A função inicializarMapa cria o mapa Leaflet na div#mapa.
  6. Um marcador é adicionado na localização do usuário.
Web APIs & Geolocalização com Leaflet.js

Conclusão e Próximos Passos

  • Web APIs são pontes que conectam diferentes funcionalidades na web.
  • A API de Geolocalização é uma ferramenta poderosa para criar experiências baseadas em localização.
  • O Leaflet.js é uma excelente biblioteca open-source para adicionar mapas interativos.
Web APIs & Geolocalização com Leaflet.js

Desafios:

  • Usar watchPosition para atualizar o mapa em tempo real.
  • Integrar com uma API de rotas para traçar um caminho.
  • Personalizar os ícones dos marcadores.
  • Fazer geocodificação (transformar endereço em coordenadas).
Web APIs & Geolocalização com Leaflet.js

Perguntas?