PDF de programación - Ejemplos de APIs en JavaScript

Ejemplos de APIs en JavaScript

Escuela Técnica Superior de Ingeniería de Telecomunicación

Universidad Rey Juan Carlos

gsyc-profes (arroba) gsyc.urjc.es

Diciembre de 2017

GSyC - 2017

Ejemplos de APIs

1

©2017 GSyC
Algunos derechos reservados.
Este trabajo se distribuye bajo la licencia

Creative Commons Attribution Share-Alike 4.0

GSyC - 2017

Ejemplos de APIs

2

YouTube

YouTube

Insertar un reproductor de vídeo de YouTube en JavaScript es muy
sencillo

En el cuerpo del HTML incluimos un div con un identificador,
donde irá el reproductor
Cargamos el script https://www.youtube.com/iframe_api
En la función onYouTubeIframeAPIReady(), creamos una
instancia de YT.Player, y en sus atributos fijamos el tamaño
del reproductor y el identificador del video
En la función onPlayerReady(), invocamos
event.target.playVideo()

GSyC - 2017

Ejemplos de APIs

3

YouTube

// Carga asíncrona del API del IFrame Player de YouTube
let tag = document.createElement(’script’);
tag.src = "https://www.youtube.com/iframe_api";
let firstScriptTag = document.getElementsByTagName(’script’)[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Creación de un iframe, con reproductor de YouTube
let player;
function onYouTubeIframeAPIReady() {

player = new YT.Player(’mi_reproductor’, {

height: ’768’,
width: ’1024’,
videoId: ’lKCCZTUx0sI’,
events: {

’onReady’: onPlayerReady,

}
});

}

// El API llama a esta función cuando el reproductor esté listo
function onPlayerReady(event) {

event.target.playVideo();

}

GSyC - 2017

http://ortuno.es/youtube.html

Ejemplos de APIs

4

OpenStreeMap

YouTube

OpenStreetMap (OSM) es un proyecto que tiene como objetivo
crear un mapa del mundo editable y libre

Creado por Steve Coast en el Reino Unido en el año 2004
Muy similar a Wikipedia, por su filosofía y funcionamiento
Muy similar a Google Maps en cuanto a funcionalidad y
calidad
Hay mucho software y muchas APIs relacionadas con este
proyecto: captura de datos, generación de mapas, de capas,
etc
El uso básico consiste en integrar un mapa y puntos de interés
en un página HTML. Una de las APIs más populares para esto
es leaflet (http://leafletjs.com)

GSyC - 2017

Ejemplos de APIs

5

YouTube

La representación de mapas se basa en tiles (azulejos, baldosas)
Un tile es un bitmap / mapa de bits con un fragmento de
mapa. Su tamaño típico es 256x256 pixeles. Aunque en
ocasiones se usa 64x64 (para dispositivos móviles) o 512x512,
para dispositivos de alta resolución
Los datos de OpenStreetMap son libres (y gratuitos). El
servidor de tiles no lo es

Podemos contratarlo o desplegar uno propio
Para usos experimentales, con poca carga de datos, podemos
usar alguno proporcionado por la propia organización, como
tile.osm.org

GSyC - 2017

Ejemplos de APIs

6

Representación de un mapa OSM con leaflet

YouTube

Para representar un mapa OpenStreetMap en una página HTML,
usando la librería leaflet

Incluimos la librería desde el CDN
<script src="https://unpkg.com/[email protected]/dist/leaflet.js">

Esto crea un objeto global llamado L
En nuestro HTML definimos un DIV donde irá el mapa. Es
necesario que tenga definido un atributo CSS height con la
altura

<style>

#id_mapa {

height: 400px;

}

</style

...

<div id="id_mapa"></div

GSyC - 2017

Ejemplos de APIs

7

YouTube

Creamos un objeto de tipo L.map(), pasando las coordenadas
del centro del mapa deseado y el zoom inicial
(el zoom 0 es un mapa de toda la tierra, numeros mayores
van haciendo el mapa más detallado)
Invocamos el método L.tileLayer(), con la URL del mapa
en el servidor de tiles y el mensaje de atribución del mapa

GSyC - 2017

Ejemplos de APIs

8

YouTube

let latitud=40.417; //coordenada y
let longitud=-3.703; //coordenada x
let zoom=16;
let mi_mapa = L.map(’id_mapa’).setView([latitud, longitud], zoom);
L.tileLayer(’http://{s}.tile.osm.org/{z}/{x}/{y}.png’, {

attribution: ’&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>’

$(document).ready(function() {

}).addTo(mi_mapa);

});

http://ortuno.es/openstreet.html

GSyC - 2017

Ejemplos de APIs

9

Marcadores y mensajes popup

YouTube

Podemos añadir marcadores, invicando el método
L.marker(<COORDENADAS>).addTo(<OBJETO MAP)
Podemos añadir mensajes emergentes de tipo popup, con el
método .bindPopup de un marcador

let mi_marcador = L.marker(coord_labIII).addTo(mi_mapa);
mi_marcador.bindPopup("Laboratorios III").openPopup();

http://ortuno.es/openstreet2.html

GSyC - 2017

Ejemplos de APIs

10