> Manuales > Taller de HTML5

Generalidades. El API de geolocalización de HTML 5.

Lo primero que deberemos comprobar es la disponibilidad del API de geolocalización de HTML 5 en el explorador del usuario. El Listado 1 hace simplemente eso y ese código podría, y en parte debería, estar presente en todos los ejemplos que siguen del presente artículo. Lo obviaremos por innecesario para lo que de ilustrativo de ciertos conceptos se supone son.

Listado 1: En el listado que sigue, comprobamos sin más que el API de geolocalización es soportado por el explorador:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" lang="es-es">
<title>Geolocalización 0</title>
</head>
<body>

<h1>Geolocalización</h1>

<script>
if(navigator.geolocation) {
alert('El explorador soporta geolocalización');
} else {
alert('El explorador NO soporta geolocalización');
}
</script>

</body>
</html>

Mediante el objeto navigator.geolocation disponemos de los siguientes tres métodos:

Así pues, todo comienza realmente con una llamada a getCurrentPosition(function(){}, function(){}). Observe que toma como parámetros dos funciones optativas; puede haber una definida, las dos, o ninguna –caso de mera comprobación, dado que nada obtendremos de la llamada-. Se nos pedirá permiso como usuarios para acceder a nuestra posición. En caso de que el usuario dé su permiso, se llamará a la primera función pasada; en el caso contrario, o si ocurriera un error de acceso, sería llamada la segunda función pasada como argumento del método.

En el listado que sigue, haremos simplemente una simulación del proceso, ya que la llamada nos lleva a una vía muerta –faltan los contenidos funcionales de las respuestas positivas y negativas-, a ello llegaremos seguidamente. Valga como ejemplo.

Nota: La tabla que sigue, nos informa del estado de soporte por parte de casi todos los exploradores de importancia del mercado:
Firefox IE Chrome Safari Opera iPhone Android BlackBerry
Versión 3.5+ 9.0+ 5+ 5+ 10.63+ 3.2+ 2.1+ OS 6.0

Geolocalización en mapas Nokia

Los sitios de Internet oficiales que sugerimos para consulta inicial son:
Nota: Para la utilización de los mapas Nokia hemos de obtener un registro de usuario, en la dirección URL http://api.maps.nokia.com/en/index.html, como se muestra en figuras adjuntas.

Posteriormente deberemos rellenar convenientemente el código:

<script type="text/javascript">
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
</script>

Sin la presencia de éste código no se ejecutará el Nokia Maps API.

Hardcoded geolocalización

En este apartado nos fijaremos solamente en lo referente al modo de acotar y representar un mapa obtenido del servidor de Nokia.

En esencia, en éste ejemplo, basado en la documentación más elemental de Nokia Maps API, se realizan las siguientes tareas:

Listado 2: En el listado que sigue, ilustra un mapa –fijado por geolocalización- en el que se pasan las cotas –latitud y longitud- predeterminadas:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" lang="es-es">
<title>Geolocalización Nokia Maps</title>

<script src="http://api.maps.nokia.com/2.2.0/jsl.js"></script>
<script>

var latitud = 43.3629;
var longitud = -8.40989;
var map;
var maker;

navigator.geolocation.getCurrentPosition(function(){
map = new nokia.maps.map.Display(document.getElementById("mapContainer"),
{
zoomLevel: 14,
center: [latitud, longitud]
});

marker = new nokia.maps.map.StandardMarker([latitud, longitud], {text: "Hola",});
map.objects.add(marker);
});

</script>

<script type="text/javascript">
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
</script>

<style type="text/css">
#mapContainer {
height: 500px;
width: 800px;
border:10px solid #eaeaea;}
</style>
</head>
<body>
<div id="mapContainer"></div>
</body>
</html>

Ejemplo completo de geolocalización

Las líneas generales son: Listado 3: El listado que sigue, ilustra un mapa –fijado por geolocalización- en el que se pasan las cotas –latitud y longitud- detectadas mediante el API de HTML 5:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" lang="es-es">
<title>Geolocalización Nokia Maps</title>

<script src="http://api.maps.nokia.com/2.2.0/jsl.js"></script>
<script>
if (navigator.geolocation) {
var map;
var marker;

navigator.geolocation.getCurrentPosition(function(position) {
var latitud = position.coords.latitude;
var longitud = position.coords.longitude;

map = new nokia.maps.map.Display(document.getElementById("mapContainer"),
{
zoomLevel: 15,
center: [latitud, longitud]
});

var marker = new nokia.maps.map.StandardMarker([latitud, longitud], {text: "Hola",});
map.objects.add(marker);
});
} else {
alert("El explorador NO soporta geolocalización");
}
</script>

<script type="text/javascript">
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
</script>

<style type="text/css">
#mapContainer {
height: 500px;
width: 800px;
border:10px solid #eaeaea;}
</style>
</head>
<body>
<div id="mapContainer"></div>
</body>
</html>

Un ejemplo más completo de geolocalización

Ampliaremos el ejemplo anterior dotándolo de interactividad, selección de tipo, más información y nuevas vistas.

Las clases utilizadas en éste ejemplo pueden consultarse en las siguientes direcciones URL del API de Nokia Maps:

Otras clases útiles, pero que requerirían una programación mucho más avanzada son: Listado 4: En el listado que sigue, se recoge el código de un mapa interactivo y con muchas de las funcionalidades a las que habitualmente estamos acostumbrados a manejarnos:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" lang="es-es">
<title>Geolocalización Nokia Maps</title>

<script src="http://api.maps.nokia.com/2.2.0/jsl.js"></script>
<script>
if (navigator.geolocation) {
var map;
var marker;

navigator.geolocation.getCurrentPosition(function(position) {
var latitud = position.coords.latitude;
var longitud = position.coords.longitude;

map = new nokia.maps.map.Display(document.getElementById("mapContainer"),
{
components: [
// Behavior y demás opciones de inicialización
new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.Overview(),
new nokia.maps.map.component.TypeSelector(),
new nokia.maps.map.component.ScaleBar(),
new nokia.maps.map.component.RightClick() ],
zoomLevel: 15,
center: [latitud, longitud]
});

var marker = new nokia.maps.map.StandardMarker([latitud, longitud], {text: "Hola",});
map.objects.add(marker);
});
} else {
alert("El explorador NO soporta geolocalización");
}
</script>

<script type="text/javascript">
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
</script>

<style type="text/css">
#mapContainer {
height: 500px;
width: 800px;
border:10px solid #eaeaea;}
</style>
</head>
<body>
<div id="mapContainer"></div>
</body>
</html>

Listado 5: En el listado que sigue, simplemente cambiamos, añadiendo una nueva línea de código, el tipo de mapa que inicialmente será mostrado; vista de satétile en éste caso:

<!DOCTYPE HTML>
<html>
<head>
<script src="http://api.maps.nokia.com/2.2.0/jsl.js"></script>
<script>
if (navigator.geolocation) {
var map;
var marker;

navigator.geolocation.getCurrentPosition(function(position) {
var latitud = position.coords.latitude;
var longitud = position.coords.longitude;

map = new nokia.maps.map.Display(document.getElementById("mapContainer"),
{
components: [
// Behavior y demás opciones de inicialización
new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.Overview(),
new nokia.maps.map.component.TypeSelector(),
new nokia.maps.map.component.ScaleBar(),
new nokia.maps.map.component.RightClick() ],
zoomLevel: 15,
center: [latitud, longitud]
});

// Activamos la vista tipo satélite, de modo inicial
map.set("baseMapType", nokia.maps.map.Display.SATELLITE);

var marker = new nokia.maps.map.StandardMarker([latitud, longitud], {text: "Hola",});
map.objects.add(marker);
});
} else {
alert("El explorador NO soporta geolocalización");
}
</script>

<script type="text/javascript">
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
</script>

<style type="text/css">
#mapContainer {
height: 500px;
width: 800px;
border:10px solid #eaeaea;}
</style>
</head>
<body>
<div id="mapContainer"></div>
</body>
</html>

Jaime Peña Tresancos

Escritor. Colaborador habitual de revistas de tecnología y experto en nuevas tec...

Manual