Aplicaciones Web Orientadas a Servicios • ITIID-05 •

Integración de Geolocalización con una API externa de mapas

En la clase anterior obtuvimos la ubicación del usuario mediante la API de Geolocalización del navegador.
Sin embargo, mostrar únicamente coordenadas no resulta intuitivo para la mayoría de los usuarios.

En esta sesión integraremos esas coordenadas con una API externa de mapas, demostrando cómo una aplicación web puede consumir múltiples servicios para ofrecer una mejor experiencia.

Objetivo de la práctica

Al finalizar esta clase, el estudiante será capaz de:

  • Obtener la ubicación del usuario.
  • Consumir una API externa de mapas.
  • Mostrar la ubicación en un mapa interactivo.
  • Comprender la integración de servicios dentro de una arquitectura orientada a servicios.

¿Qué es una API externa de mapas?

Una API de mapas es un servicio externo que permite a las aplicaciones:

  • Mostrar mapas interactivos.
  • Marcar ubicaciones.
  • Controlar niveles de zoom.
  • Visualizar información geográfica.

Estas APIs son un claro ejemplo de servicios reutilizables, principio fundamental de la arquitectura SOA.

API seleccionada: OpenStreetMap + Leaflet

Para esta práctica utilizaremos:

  • OpenStreetMap: proveedor de mapas abiertos.
  • Leaflet.js: librería JavaScript para integrar mapas fácilmente.

Ventajas:

  • Gratuita.
  • No requiere API Key.
  • Ideal para fines educativos.
  • Ligera y fácil de usar.

Estructura del proyecto

El proyecto contará con:

  • index.html
  • app.js
  • Librería externa Leaflet (CDN)

Paso 1: Estructura HTML

Creamos el archivo index.html:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mapa con Geolocalización</title>

  <!-- Leaflet CSS -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
  />

  <style>
    #map {
      height: 400px;
      margin-top: 20px;
    }
  </style>
</head>
<body>

  <h1>Mapa con API externa</h1>
  <button onclick="obtenerUbicacion()">Mostrar mi ubicación</button>

  <div id="map"></div>

  <!-- Leaflet JS -->
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <script src="app.js"></script>

</body>
</html>

Paso 2: Obtener la ubicación del usuario

En el archivo app.js:

function obtenerUbicacion() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(mostrarMapa, mostrarError);
  } else {
    alert("La geolocalización no es compatible con este navegador.");
  }
}

Paso 3: Mostrar el mapa con la ubicación

Integramos las coordenadas con Leaflet:

function mostrarMapa(posicion) {
  const lat = posicion.coords.latitude;
  const lng = posicion.coords.longitude;

  const map = L.map("map").setView([lat, lng], 15);

  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution: "© OpenStreetMap contributors"
  }).addTo(map);

  L.marker([lat, lng])
    .addTo(map)
    .bindPopup("Aquí te encuentras")
    .openPopup();
}

Paso 4: Manejo de errores

function mostrarError(error) {
  let mensaje = "";

  switch (error.code) {
    case error.PERMISSION_DENIED:
      mensaje = "Permiso de ubicación denegado.";
      break;
    case error.POSITION_UNAVAILABLE:
      mensaje = "Ubicación no disponible.";
      break;
    case error.TIMEOUT:
      mensaje = "Tiempo de espera agotado.";
      break;
    default:
      mensaje = "Error desconocido.";
  }

  alert(mensaje);
}

Análisis de la integración de servicios

En esta práctica se integran dos servicios diferentes:

  1. API de Geolocalización (servicio del navegador).

  2. API externa de mapas (OpenStreetMap).

Ambos servicios trabajan de manera independiente, pero se combinan en la aplicación, lo que ejemplifica:

  1. Bajo acoplamiento.

  2. Reutilización de servicios.

  3. Integración de APIs de terceros.

Actividad de la clase

Evidencia práctica

  1. Ejecuta la aplicación en el navegador.
  2. Permite el acceso a la ubicación.
  3. Visualiza tu posición en el mapa.
  4. Captura evidencia del funcionamiento.
  5. Responde en un breve reporte:

  • ¿Qué APIs se integraron?

  • ¿Qué función cumple cada una?

  • ¿Por qué esta integración representa una aplicación orientada a servicios?

Esta evidencia se integrará al portafolio de la Unidad 2.