Crea un mapa interactivo usando los datos del covid-19 con JavaScript y PHP

En ocasión te mostraré cómo crear un mapa interactivo usando los datos del covid-19 con JavaScript y PHP. Podrás visualizar los datos de los casos registrados, casos de personas recuperadas y personas fallecidas por el covid-19 por cada país. Todas las ubicaciones serán almacenadas previamente en una base de datos mysql.

Para este ejemplo haremos uso de la api: covid19api.com, para poder realizar una actualización de datos en nuestra base de datos mysql.

Vamos a crear un marcador en cada país, y mediante una ventana emergente nos traeremos los datos registrados previamente en la base de datos para mostrarlos.

Si eres nuevo en Mapbox GL JS, es posible que primero necesites leer la documentación sobre las aplicaciones web de Mapbox.

A continuación se muestra como quedará nuestra aplicación ya finalizada:



Empezando

Hay algunos recursos que necesitará antes de comenzar:

  • Un token de acceso a tu cuenta. Utilizarás un token de acceso para asociar un mapa con tu cuenta. tu token de acceso puedes conseguirlo en tu cuenta de mapbox.
  • Mapbox GL JS. La biblioteca JavaScript de Mapbox que usa WebGL para representar mapas interactivos usando los estilos de Mapbox GL.
  • Un editor de texto. Después de todo, escribirás código PHP, HTML, CSS y JavaScript.
  • Un servidor web local, recomiendo XAMPP, pero puedes usar el que tu consideres necesario.
  • Un gestor de base datos MySQL. Durante el tutorial se ha recolectado los latitud y longitud de cada país para poder visualizar un marcador en el mapa.

Agregar estructura

En tu carpeta de proyecto, crea un archivo index.php. Configura el documento agregando Mapbox GL JS y CSS a su cabeza, el código de la estructura html del archivo se muestra a continuación.

El archivo que hicimos en el paso anterior, contiene una serie de funciones avanzadas que se encarga de pintar los datos en el mapa, mostrar en el mapa el listado de países . El listado de países se obtiene haciendo una llamada ajax utilizando la API Fetch de JavaScript.

Creando nuestra base de datos.

Ahora vamos a abrir nuestro gestor de base de datos mysql y vamos a crear una base de datos en blanco, para este ejemplo la llamaremos test_countries, una vez se ha creado la base de datos debemos seleccionarla y ejecutar el código sql siguiente:

La consulta SQL se encarga de crear una tabla llamada countries y también le inserta los datos de prueba.

Creando nuestro archivo de conexión a la base de datos

Ahora vamos a crear un archivo llamado config.php, siempre en el directorio root del proyecto.

El archivo anterior contiene una clase que se encarga de la conexión con la base de datos. Es muy importante que coloques los datos que corresponda a tu conexión de base de datos.

Agregar marcadores mediante PHP y MySQL

Crear un archivo en la carpeta root del proyecto y lo llamaremos data.php.

Este archivo se encarga de devolver un objeto json al archivo index.php, que es de donde se llama mediante  la API Fetch de JavaScript, para luego poder manipular los datos siempre usando JavaScript.

Actualizando los datos en la base de datos.

Finalmente vamos a crear un archivo llamado updateData.php, el cual se encargará de hacer una llamada a la api para poder traer los datos de casos registrados del covid-19. Copia y pega el código siguiente.

Este archivo recién creado se debe ejecutar para poder actualizar los datos de la base de datos mysql, hace una llamada a la API y actualiza la data, lo he hecho de esta forma para no  mandar a llamar a la api cada vez que se ejecuta el script.

Hemos creado un mapa interactivo usando los datos del covid-19 con JavaScript y PHP, para luego permitir el mostrar los datos  utilizando marcadores interactivos con datos personalizados usando la librería Mapbox GL JS. No olvides que puedes descargar los archivos fuentes y hacer tus pruebas.

VER DEMOSTRACIÓN DESCARGAR ARCHIVOS