clase13.md

Curso de JavaScript Avanzado para desarrolladores Front-end

POO con JS, ECMA6, Patrones de diseño, AJAX avanzado, HTML5 avanzado, APIs externas.

Clase 13

HTML5 APIS

• The Web platform: Browser technologies

Geolocalización

• Espeficicación

• Compatibildiad

• Seguridad:

  • Necesario SSL
    • HTTPS
  • Confirmación del usuario

• Precisión:

  • Wi-fi (MAC)
  • Ethernet (IP)
  • Triangulación (3G y 4G)
  • GPS (máxima precisión, pero tardará más en cargar)

Geolocalización: Métodos

Geolocation.getCurrentPosition()

    // Posición Actual
    navigator.geolocation.getCurrentPosition();

Geolocation.watchPosition()

    // Seguimiento como un GPS
    navigator.geolocation.watchPosition();

Geolocation.clearWatch()

    // Para el seguimiento
    navigator.geolocation.clearWatch();

Geolocalización: Propiedades

Latitud (en base 10)

     console.log(position.coords.latitude);

Longitud (en base 10)

     console.log(position.coords.longitude);

Precisión en posicionamiento

     console.log(position.coords.accuracy);

Altitud (metros por encima del nivel del mar)

     console.log(position.coords.altitude);

Precisión de altitud

     console.log(position.coords.altitudeAccuracy);

Rumbo (Grados respectos al norte)

     console.log(position.coords.heading);

Velocidad (m/s)

     console.log(position.coords.speed);

Timestamp

     console.log(position.timestamp);

Geolocalización: Ajustes

*enableHighAccuracy

• Mejora los datos para conexiones no GPS, pero aumenta drásticamente el consumo de batería del dispositivo.
• False por defecto

timeout

• Tiempo (ms) de espera antes de lanzar el error.
• 0 por defecto

maximumAge

• Tiempo (ms) para el almacenamiento en memoria cache de la posición actual
• 0 por defecto

Ejemplo

const opciones = {
    enableHighAccuracy: true,
    maximumAge: 1000, // 1s
    timeout: 2000 // 2s
};

Geolocalización: Ejemplos

Comprobando la compatibildiad de geolocation

if ("geolocation" in navigator) {
   console.log("Podemos usar Geolocation! :-) ");
} else {
  console.warn("Geolocation no soportado :-( ");
}

Probando la geolocalización

if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(position => {
         console.log(`Latitud: ${position.coords.latitude}\nLongitud: ${position.coords.longitude}`);
        let datos = `<h1>Te pille!</h1>
        <p>Latitud: ${position.coords.latitude.toFixed(4)}</p>
        <p>Longitud: ${position.coords.longitude.toFixed(4)}</p>`
        document.body.innerHTML = datos;
    });
} else {
  console.warn("Geolocation no soportado :-( ");
}

Mostrar la localización en una imagen estatica usando Gogole Maps

if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(position => {
        const latlon = `${position.coords.latitude},${position.coords.longitude}`;
        const img_url = `http://maps.googleapis.com/maps/api/staticmap?center=${latlon}&zoom=14&size=400x300&sensor=false`;
        document.body.innerHTML = `<img src='${img_url}'>`;
    });
} else {
  console.warn("Geolocation no soportado :-( ");
}

Gestionar los Errores y rechazos

navigator.geolocation.getCurrentPosition(geo_success, geo_error);

function geo_success(position) {
   console.log(`${position.coords.latitude},${position.coords.longitude}`);
}

function geo_error(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            document.body.innerHTML = "El usuario ha rechazado la petición.";
            console.warn(error);
            break;
        case error.POSITION_UNAVAILABLE:
            document.body.innerHTML = "La posición de usuario no es correcta.";
            console.warn(error);
            break;
        case error.TIMEOUT:
            document.body.innerHTML = "No hay respuesta en el tiempo limite previsto.";
            console.warn(error);
            break;
        case error.UNKNOWN_ERROR:
            document.body.innerHTML = "Error Desconocido";
            console.warn(error);
            break;
    }
}

Trabajando con ajustes personalizados

navigator.geolocation.getCurrentPosition(position => {
     console.log(`${position.coords.latitude}, ${position.coords.longitude}`)
}, error => {
    console.warn(`Error! - ${error}`);
}, {
    enableHighAccuracy: true,
    maximumAge: 1000, // 1s
    timeout: 2000 // 2s
});

Convirtiendo las coordenadas a hexadecimal

/**
 * From Isabel Castillo
 * http://isabelcastillo.com/convert-latitude-longitude-decimal-degrees
 * Convert longitude/latitude decimal degrees to degrees and minutes
 * DDD to DMS, no seconds
 * @param lat, latitude degrees decimal
 * @param lng, longitude degrees decimal
 */

function convertDMS( lat, lng ) {
        // Latitud
        const convertLat = Math.abs(lat);
        const LatDeg = Math.floor(convertLat);
        const LatSec = (Math.floor((convertLat - LatDeg) * 60));
        const LatCardinal = ((lat > 0) ? "n" : "s");
        // Longitud
        const convertLng = Math.abs(lng);
        const LngDeg = Math.floor(convertLng);
        const LngSec = (Math.floor((convertLng - LngDeg) * 60));
        const LngCardinal = ((lng > 0) ? "e" : "w");

        return `${LatDeg + LatCardinal + LatSec}<br />${LngDeg}${LngCardinal}${LngSec}`;
}

Sigue a un usuario

navigator.geolocation.watchPosition(position => {
     console.log(`${position.coords.latitude}, ${position.coords.longitude}`)
}, error => {
    console.warn(`Error! - ${error}`);
});

ip-api.com

• Web
• Docs
• API

Carto

Documentación

• Carto
• Pricing
• Resources
• Docs
• Guides
• Blog
• CARTO en Github

Ejemplos

• Carto test by Robert Rouse
• Galería de ejemplos

Esri ArcGIS

Documentación

• Web Oficial
• ArcGIS Developers
• Ejemplos: API JavaScript de ArcGIS
• ESRI españa Github

OpenStreetMap (OSM)

Documentación

• OSM | Web oficial
• Learn OpenStreetMap Step by Step
• HOT | Humanitarian OpenStreetMap Team
• HOT | Tools & Data
• Wheelmap | Project
• Wheelmap | Map
• Awesome open street map
• OSM | Wiki
• SWITCH2OSM

Open Layers

Documentación

• Web Oficial
• Docuemntación oficial
• Ejemplos
• API
• Awesome OpenLayers
• OpenLayers Simple Example
• OpenLayers Marker Example
• Github
• @openlayers en Twitter

Leaflet

Documentación

• Web oficial
• Tutoriales
• Documentación oficial
• Descargas
• Plugins
• Blog
• Stackoverflow
• Github
• @LeafletJS en Twitter
• Ebook | Leaflet Tips and Tricks

Google Maps

Documentación

• Portal informativo
• Pricing
• Maps JavaScript API
  • Tutorial
  • API Ref.
  • Ejemplos
• Google Maps Embed API
• Google Street View Image API
• Google Static Maps API
• Biblioteca JavaScript de Google Places API

Usarlo en tu proyecto

• Librería

<script type='text/javascript' src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js&output=embed"></script>

• Centrar el mapa

function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: -3.8199647, lng: 40.4381307}
  });
}

• Markers ( Demo )

// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
const labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
let labelIndex = 0;

function initialize() {
  const bangalore = { lat: 12.97, lng: 77.59 };
  const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: bangalore
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', event => {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  const marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

• Markers Personalizados ( Demo )

// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151}
  });

  const image = 'images/beachflag.png';
  const beachMarker = new google.maps.Marker({
    position: {lat: -33.890, lng: 151.274},
    map,
    icon: image
  });
}

• InfoWindows ( Demo )

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap() {
  const uluru = {lat: -25.363, lng: 131.044};
  const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  const contentString = `<div id="content">
          <div id="siteNotice"></div>
          <h1 id="firstHeading" class="firstHeading">Uluru</h1>
          <div id="bodyContent">
              <p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large 
              sandstone rock formation in the southern part of the 
              Northern Territory, central Australia. It lies 335 km (208 mi) 
              south west of the nearest large town, Alice Springs; 450 km 
              (280 mi) by road. Kata Tjuta and Uluru are the two major 
              features of the Uluru - Kata Tjuta National Park. Uluru is 
              sacred to the Pitjantjatjara and Yankunytjatjara, the 
              Aboriginal people of the area. It has many springs, waterholes, 
              rock caves and ancient paintings. Uluru is listed as a World 
              Heritage Site.</p>
              <p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">
              https://en.wikipedia.org/w/index.php?title=Uluru</a>
              (last visited June 22, 2009).</p>
          </div>
      </div>`;

  const infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', () => {
    infowindow.open(map, marker);
  });
}

GeoJSON

• Especificación
• Web oficial
• Ejemplo de uso en Github

Ejemplos

  { "type": "FeatureCollection",
    "features": [
      { "type": "Feature",
        "geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
        "properties": {"prop0": "value0"}
        },
      { "type": "Feature",
        "geometry": {
          "type": "LineString",
          "coordinates": [
            [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
            ]
          },
        "properties": {
          "prop0": "value0",
          "prop1": 0.0
          }
        },
      { "type": "Feature",
         "geometry": {
           "type": "Polygon",
           "coordinates": [
             [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0],
               [100.0, 1.0], [100.0, 0.0] ]
             ]
         },
         "properties": {
           "prop0": "value0",
           "prop1": {"this": "that"}
           }
         }
       ]
     }

Extras

• Validador/linter online
• Awesome Geojson

Ejercicios

1 - Utiliza Google Maps para posicionar al usuario.

Solución

2 - Utiliza Leaflet para posicionar al usuario.

Solución

3 - Posiciona todos los vehículos de transporte (trenes y autobuses) de Los Angeles en el mapa.

• Información sobre la API de Metro.net
• Utiliza un esquema de color personalizado
• Snazzy, alternativa al sistema de estilos de Google Maps
• Utiliza Google Maps con un API Token
• Puedes utilizar Cluster de Google Maps

Solución