eamexicano

Geolocalización

Categories:

Es una API – borrador en la w3.org – con la cual se puede obtener la ubicación del dispositivo que la está utilizando.

El uso de la API depende de la compatibilidad del navegador – IE9+, lista completa de compatibilidad en caniuse – que se esté utilizando, además se tiene permitir el uso de la misma.

Si el navegador es compatible y se acepta el uso de la API, es posible obtener la ubicación del dispositivo. La ubicación se obtiene en coordenadas. Dentro de las coordenadas se encuentran: latitud, longitud, precisión. Con las coordenadas podemos visualizar la ubicación en un mapa utilizando distintos servicios.

Documento de referencia

Documento que se va a utilizar para obtener las coordenadas y visualizar en un mapa la ubicación del dispositivo.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
  body { width: 700px; margin: 0 auto; background: #f0f0f0;}
  .titulo {width: 490px; height: 30px; margin: 10px auto; overflow: scroll; font-family: sans-serif; line-height: 30px;}
  #mapa { width: 500px; height: 500px;  margin: 0 auto; border: 1px solid #ccc; background: #fff;}
  .registro {width: 490px; height: 50px; margin: 16px auto; overflow: scroll; font-family: monospace;}
  </style>
</head>
<body>

<div class="titulo"></div>
<div id="mapa"></div>
<div class='registro'></div>

</body>
</html>

Obtener la ubicación con el API de geolocalización

Para obtener la ubicación podemos hacer lo siguiente:

  1. Conocer si el navegador es compatible con el uso de la geolocalización
    navigator.geolocation
  2. Si es compatible utilizamos la función getCurrentPosition para obtener la ubicación actual.
    navigator.geolocation.getCurrentPosition()
  3. getCurrentPosition acepta como parámetros dos funciones “callback” que indican lo que se tiene
    que hacer en caso de éxito o en caso de error.
  4. Al definir la función de éxito podemos utilizar un parámetro que contiene las coordenadas.
    var latitud = posicion.coords.latitude;
    var longitud = posicion.coords.longitude;
    var precision = posicion.coords.accuracy;
  5. Al definir la función de error podemos utilizar un parámetro que contiene el error que se obtuvo.
    error.message

Nota:
Si el documento se visualiza directamente desde el sistema de archivos – que el URL comience con file:///archivo.html – es probable que se muestre un error donde se indica que el usuario no permitió el uso de la geolocalización – User denied Geolocation.
En este caso hay que utilizar un servidor web para visualizar el documento.
Para asegurar que el documento se visualiza utilizando un servidor web el URL donde se visualice el documento debe comenzar con http://

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
  body { width: 700px; margin: 0 auto; background: #f0f0f0;}
  .titulo {width: 490px; height: 30px; margin: 10px auto; overflow: scroll; font-family: sans-serif; line-height: 30px;}
  #mapa { width: 500px; height: 500px;  margin: 0 auto; border: 1px solid #ccc; background: #fff;}
  .registro {width: 490px; height: 50px; margin: 16px auto; overflow: scroll; font-family: monospace;}
  </style>
</head>
<body>

<div class="titulo"></div>
<div id="mapa"></div>
<div class='registro'></div>


<script>
var titulo = document.getElementsByClassName("titulo")[0];
var mapa = document.getElementById("mapa");
var registro = document.getElementsByClassName("registro")[0];

// Verificar que el navegador pueda utilizar el API de geolocalización
;(function () {
  if (navigator.geolocation) {
    titulo.innerHTML = "El navegador si acepta geolocalización";
    obtener_posicion_actual();
  }
  else {
    titulo.innerHTML = "El navegador no acepta geolocalización";
  }
}());

function obtener_posicion_actual() {
  registro.innerHTML += "Obtener posición actual...<br>";
   navigator.geolocation.getCurrentPosition(procesar_posicion, procesar_error);
}

// Si se obtienen las posiciones se manda llamar esta fución
function procesar_posicion(posicion) {
  registro.innerHTML += "Procesando posición...<br>";  
  // Mostrar en consola el objeto posición
  console.log(posicion);
	var latitud = posicion.coords.latitude;
	var longitud = posicion.coords.longitude;
	var precision = posicion.coords.accuracy;
  
  registro.innerHTML += "Latitud: " + latitud + "<br>";
  registro.innerHTML += "Longitud: " + longitud  + "<br>";
  registro.innerHTML += "Precisión: " + precision + "<br>";
}

// Si hubo un error al obtener la posición se indica en pantalla
function procesar_error(error) {
  registro.innerHTML += "Procesando error...<br>";    
  // Analizar el error que se envió desde el API
  console.log(error);
  registro.innerHTML += "Código: " +  error.code + "<br>";      
  registro.innerHTML += "Mensaje: " +  error.message + "<br>";      
}

</script>

</body>
</html>

Visualizar la ubicación

Podemos visualizar la ubicación del dispositivo en un mapa utilizando distintos servicios. En este caso vamos a utilizar Google Maps y Open Street Map con Open Layers.

Google Maps

Para utilizar google maps:

  1. Incluimos el API desde el URL de google.

    <script src=”//maps.google.com/maps/api/js?v=3.exp&sensor=false”></script>
  2. Definimos algunas opciones – propias del API de google – para la visualización del mapa.

    var mapOpts = {
    zoom: 15,
    center: new google.maps.LatLng(lat, long),
    mapTypeControl: true,
    navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    Para definir la ubicación donde se encuentra el dispositivo vamos a utilizar los valores de longitud, latitud que obtuvimos con la API de geolocalización.
  3. Seleccionamos un nodo del documento html para posicionar el mapa y creamos el mapa con las opciones que definimos anteriormente.

    var map = new google.maps.Map(mapa, mapOpts);
     
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
  body { width: 700px; margin: 0 auto; background: #f0f0f0;}
  .titulo {width: 490px; height: 30px; margin: 10px auto; overflow: scroll; font-family: sans-serif; line-height: 30px;}
  #mapa { width: 500px; height: 500px;  margin: 0 auto; border: 1px solid #ccc; background: #fff;}
  .registro {width: 490px; height: 50px; margin: 16px auto; overflow: scroll; font-family: monospace;}
  </style>
</head>
<body>

<div class="titulo"></div>
<div id="mapa"></div>
<div class='registro'></div>

<script src="//maps.google.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var titulo = document.getElementsByClassName("titulo")[0];
var mapa = document.getElementById("mapa");
var registro = document.getElementsByClassName("registro")[0];

// Verificar que el navegador pueda utilizar el API de geolocalización
;(function () {
  if (navigator.geolocation) {
    titulo.innerHTML = "El navegador si acepta geolocalización";
    obtener_posicion_actual();
  }
  else {
    titulo.innerHTML = "El navegador no acepta geolocalización";
  }
}());

function obtener_posicion_actual() {
  registro.innerHTML += "Obtener posición actual...<br>";
   navigator.geolocation.getCurrentPosition(procesar_posicion, procesar_error);
}

// Si se obtienen las posiciones se manda llamar esta fución
function procesar_posicion(posicion) {
  registro.innerHTML += "Procesando posición...<br>";  
  // Mostrar en consola el objeto posición
  console.log(posicion);
	var latitud = posicion.coords.latitude;
	var longitud = posicion.coords.longitude;
	var precision = posicion.coords.accuracy;
  
  registro.innerHTML += "Latitud: " + latitud + "<br>";
  registro.innerHTML += "Longitud: " + longitud  + "<br>";
  registro.innerHTML += "Precisión: " + precision + "<br>";
  
  visualizar_mapa(latitud, longitud);
}

// Si hubo un error al obtener la posición se indica en pantalla
function procesar_error(error) {
  registro.innerHTML += "Procesando error...<br>";    
  // Analizar el error que se envió desde el API
  console.log(error);
  registro.innerHTML += "Código: " +  error.code + "<br>";      
  registro.innerHTML += "Mensaje: " +  error.message + "<br>";      
}

// Visualizar mapa
function visualizar_mapa(lat, long) {
	var mapOpts = {
		zoom: 15,
		center: new google.maps.LatLng(lat, long),
		mapTypeControl: true,
		navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(mapa, mapOpts);
}
</script>
</body>
</html>

Open Street Maps con Open Layers

Para utilizar Open Street Map con Open Layers:

  1. Descargamos y descomprimimos Open Layers.
  2. Copiamos el archivo OpenLayers.js y la carpeta theme a la ubicación donde está el documento html.
    La carpeta theme tiene que estar dentro en la misma carpeta donde está OpenLayers.js
  3. Incluimos el archivo OpenLayers.js en el documento html.

    <script src=”js/OpenLayers.js”></script>
  4. Para visualizar el mapa necesitamos crear un mapa en un nodo del documento.
    var visualizar = new OpenLayers.Map(“mapa”);
  5. Necesitamos crear una capa, es aquí donde se va a “dibujar” el mapa.
    var capa = new OpenLayers.Layer.OSM();
    En este caso indicamos que la capa va a utilizar imágenes de Open Street Map.
  6. Para visualizar correctamente el mapa necesitamos definir los sistemas de coordenadas que se van a utilizar. –
    http://spatialreference.org/ref/epsg/4326/

    var proyeccion_original = new OpenLayers.Projection(“EPSG:4326”);
    var proyeccion_final = new OpenLayers.Projection(“EPSG:900913”);
  7. Obtenemos la posición que queremos visualizar – con las coordenadas que tenemos -, y ajustamos el sistema de coordenadas que se va a utilizar para obtener la ubicación actualizada.

    var posicion_actual = new OpenLayers.LonLat(long,lat).transform( proyeccion_original, proyeccion_final);
  8. Elegimos el acercamiento que queremos para la visualización (entre 15 y 18).

    var zoom = 15;
  9. Al mapa que creamos le agregamos la capa que contiene las imágenes de Open Street Map.
    Finalmente, para que se visualice correctamente, definimos el centro utilizando la posición actual y el acercamiento que queremos.

    visualizar.addLayer(capa);
    visualizar.setCenter(posicion_actual, zoom );
     
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
  body { width: 700px; margin: 0 auto; background: #f0f0f0;}
  .titulo {width: 490px; height: 30px; margin: 10px auto; overflow: scroll; font-family: sans-serif; line-height: 30px;}
  #mapa { width: 500px; height: 500px;  margin: 0 auto; border: 1px solid #ccc; background: #fff;}
  .registro {width: 490px; height: 50px; margin: 16px auto; overflow: scroll; font-family: monospace;}
  </style>
</head>
<body>

<div class="titulo"></div>
<div id="mapa"></div>
<div class='registro'></div>

<script src="js/OpenLayers.js"></script>
<script>
var titulo = document.getElementsByClassName("titulo")[0];
var mapa = document.getElementById("mapa");
var registro = document.getElementsByClassName("registro")[0];

// Verificar que el navegador pueda utilizar el API de geolocalización
;(function () {
  if (navigator.geolocation) {
    titulo.innerHTML = "El navegador si acepta geolocalización";
    obtener_posicion_actual();
  }
  else {
    titulo.innerHTML = "El navegador no acepta geolocalización";
  }
}());

function obtener_posicion_actual() {
  registro.innerHTML += "Obtener posición actual...<br>";
   navigator.geolocation.getCurrentPosition(procesar_posicion, procesar_error);
}

// Si se obtienen las posiciones se manda llamar esta fución
function procesar_posicion(posicion) {
  registro.innerHTML += "Procesando posición...<br>";  
  // Mostrar en consola el objeto posición
  console.log(posicion);
	var latitud = posicion.coords.latitude;
	var longitud = posicion.coords.longitude;
	var precision = posicion.coords.accuracy;
  
  registro.innerHTML += "Latitud: " + latitud + "<br>";
  registro.innerHTML += "Longitud: " + longitud  + "<br>";
  registro.innerHTML += "Precisión: " + precision + "<br>";
  
  visualizar_mapa(latitud, longitud);
}

// Si hubo un error al obtener la posición se indica en pantalla
function procesar_error(error) {
  registro.innerHTML += "Procesando error...<br>";    
  // Analizar el error que se envió desde el API
  console.log(error);
  registro.innerHTML += "Código: " +  error.code + "<br>";      
  registro.innerHTML += "Mensaje: " +  error.message + "<br>";      
}

// Visualizar mapa
function visualizar_mapa(lat, long) {
  var visualizar = new OpenLayers.Map("mapa");
  var capa = new OpenLayers.Layer.OSM();
  var proyeccion_original = new OpenLayers.Projection("EPSG:4326");     
    var proyeccion_final   = new OpenLayers.Projection("EPSG:900913"); 
  var posicion_actual = new OpenLayers.LonLat(long,lat).transform(proyeccion_original, proyeccion_final);
  var zoom = 15;
  visualizar.addLayer(capa);
  visualizar.setCenter(posicion_actual, zoom );
}
</script>

</body>
</html>

Además de estas opciones, existen otras – tanto propietarias como libres – para visualizar la ubicación en mapas, algunas son: Yandex, leaflet.js, Modest Maps, Polymaps.

En los ejemplos únicamente visualizamos la ubicación con las opciones generales. Algunos servicios cuentan con más opciones tanto de visualización, control y del entorno donde se visualice el contenido.