3.1.Librerias de mapas, ejemplo Mapox GL JS

Introducción

Existen múltiples libreria javascript para programar visores de mapas

Algunas librerías geo Javascript

MapBox GL JS

ArcGis API JavaScript

Librería Mapbox GL JS

Mapbox GL JS es una librería de JavaScript para mostrar mapas en páginas web. Es parte de la plataforma Mapbox y está diseñada para ser utilizada junto con otras herramientas y servicios de Mapbox. Algunas de las características de Mapbox GL JS son:

Estilos de mapas personalizados: Mapbox GL JS te permite crear estilos de mapas personalizados utilizando Mapbox Studio o utilizar alguno de los muchos estilos prediseñados que están disponibles.

Mapas interactivos: Mapbox GL JS proporciona una serie de funcionalidades interactivas, como panorámica y zoom, marcadores y ventanas emergentes, y capas.

Datos en tiempo real: Mapbox GL JS puede mostrar datos en tiempo real en tus mapas, como información de tráfico, actualizaciones del tiempo, etc.

Geocodificación y reverse geocodificación: Mapbox GL JS incluye funcionalidades de geocodificación y reverse geocodificación, que te permiten convertir direcciones y nombres de lugares en coordenadas geográficas y viceversa.

Navegación: Mapbox GL JS ofrece APIs de navegación y enrutamiento que se pueden utilizar para crear indicaciones paso a paso y otras funcionalidades de navegación para tus aplicaciones.

Páginas indispensables para trabajar con MapBox GL

API Reference

https://www.mapbox.com/mapbox-gl-js/api/

Ejemplos

https://docs.mapbox.com/mapbox-gl-js/example/

Siempre que utilizemos la librería de Mapbox GL JS deberemos añadir nuestro Access Token

¿Cómo empezar?

Descargamos geoweb.zip y descomprimir el contenido dentro de nuestro directorio geoweb de nuestro proyecto en local. Deberíamos tener esta estructura

  /geoweb
      ├── /css  
      ├── /datos 
      ├── /images
      ├── index.html
      ├── /js
      └── README.md

Paso 1 Abrimos VSCODE y creamos mapbox-basico.html dentro de nuestro directorio /geoweb

Añadiremos el siguiente código que es la estructura básica de una página :

  <html lang="es">
  <head>
  <title>Mapbox básico</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="autor"/>
    <meta name="description" content="descripción página">
    <meta name="robots" content="index,follow">
  </head>
  <body>
  </body>
  </html>

Vamos a crear un mapa con Mapbox, para ello incluiremos en la cabecera <head> : * La librería JavaScript mapbox-gl.js (que contiene el código de la libería) * La hoja de estilo mapbox-gl.css (con la hoja de estilos de la librería):

   <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css" />
   <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>

Dentro de la etiqueta <body> encontramos el marcado para el mapa, que genera un único elemento de documento. También damos al contenedor <div> un atributo id para que podamos hacer referencia a él en nuestro código:

<body>
<div id="map"></div>
</body>

Nuestra página tendria este aspecto

<html lang="es">
<head>
<title>Mapbox básico</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="autor"/>
  <meta name="description" content="descripción página">
  <meta name="robots" content="index,follow">
  <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css" />
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>

Añadiremos un estilo al mapa para que ocupe toda la página web, dentro la etiqueta <style/> dentro del <head>

<style>
  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  #map {
    height: 100%;
    width: 100%;
  }
 </style>

Ahora nuestra página tendria este aspecto

<html lang="es">
<head>
<title>Mapbox básico</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="autor"/>
  <meta name="description" content="descripción página">
  <meta name="robots" content="index,follow">
  <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css" />
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
  <style>
  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  #map {
    height: 100%;
    width: 100%;
  }
 </style>
</head>
<body>
<div id="map"></div>
</body>
</html>

Crearemos la función init() para crear un Mapa -mapboxgl.Map- y añadir un estilo

El objeto principal del mapa en Mapbox gl js se llama mapboxgl.Map

mapboxgl.Map

Es el constructor principal del mapa https://docs.mapbox.com/mapbox-gl-js/api/#map

    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
        center: [-74.5, 40], // starting position [lng, lat]
        zoom: 9 // starting zoom
        });

Las opciones del mapa o controles siempre se pasan de la misma forma

    {
      nombre_opcion1 : "valor_opcion2",
      nombre_opcion2 : "valor_opcion2",
      ...
    };

Ahora crearemos el tag <script> justo encima de </head> y empezaremos a programar dentro del él

 <script>
  var map;  // tambien const map;
  function init() {
            mapboxgl.accessToken =
                'pk.eyJ1IjoiZ2lzbWFzdGVybTIiLCJhIjoiY2plZHhubTQxMTNoYzMza3Rqa3kxYTdrOCJ9.53B1E6mKD_EQOVb2Y0-SsA';
            map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/outdoors-v11',
                center: [2.16859, 41.3954],
                zoom: 13,
                attributionControl: false
            });

        }
  </script>

Llamaremos a la función init() desde el evento onLoad del <body>

 <body onLoad="init()">

La página final nos quedaría así

Mapbox básico final

  <html lang="es">
  <head>
  <title>Mapbox básico</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="autor"/>
    <meta name="description" content="descripción página">
    <meta name="robots" content="index,follow">
    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css" />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
  <style>
  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  #map {
    height: 100%;
    width: 100%;
  }
  </style>
  <script>
var map;  // tambien const map;
  function init() {
            mapboxgl.accessToken =
                'pk.eyJ1IjoiZ2lzbWFzdGVybTIiLCJhIjoiY2plZHhubTQxMTNoYzMza3Rqa3kxYTdrOCJ9.53B1E6mKD_EQOVb2Y0-SsA';
            map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/outdoors-v11',
                center: [2.16859, 41.3954],
                zoom: 13,
                attributionControl: false
            });

        }
  </script>
  </head>
  <body onLoad="init()">
  <div id="map"></div>
  </body>
  </html>

¿Que acabamos de hacer? Miramos dentro del tag <script>

Hemos creado la variable global map
Usamos mapboxgl.Map para instanciar el objeto mapa, pasando el id del <div> dónde irá el mapa
Utilizamos las opciones center , style y zoom iniciar el mapa

Visualizamos con Live Server!

Paso 2 Cambiamos el estilo outdoors por nuestro estilo y cambiamos nuestro token (hay que hacerlo siempre!!)

  <html lang="es">
  <head>
  <title>Mapbox básico</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="autor"/>
    <meta name="description" content="descripción página">
    <meta name="robots" content="index,follow">
    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css" />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
  <style>
  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  #map {
    height: 100%;
    width: 100%;
  }
  </style>
  <script>
var map;  // tambien const map;
  function init() {
            mapboxgl.accessToken =
                'pk.eyJ1IjoiZ2lzbWFzdGVybTIiLCJhIjoiY2plZHhubTQxMTNoYzMza3Rqa3kxYTdrOCJ9.53B1E6mKD_EQOVb2Y0-SsA';
            map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/gismasterm2/ckyiybz965inm14pp3pd3981c',
                center: [2.16859, 41.3954],
                zoom: 13,
                attributionControl: false
            });

        }
  </script>
  </head>
  <body onLoad="init()">
  <div id="map"></div>
  </body>
  </html>

¿Cómo añadiriamos la opción hash al mapa ?

Paso 3 - Podemos añadir algunos controles

Controles

https://docs.mapbox.com/mapbox-gl-js/api/markers/#navigationcontrol

NavigationControl

GeolocateControl

AttributionControl

ScaleControl

FullscreenControl

Popup

Marker

 <html lang="es">
  <head>
  <title>Mapbox básico</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="autor"/>
    <meta name="description" content="descripción página">
    <meta name="robots" content="index,follow">
    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css" />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
  <style>
  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  #map {
    height: 100%;
    width: 100%;
  }
  </style>
  <script>
var map;  // tambien const map;
  function init() {
            mapboxgl.accessToken =
                'pk.eyJ1IjoiZ2lzbWFzdGVybTIiLCJhIjoiY2plZHhubTQxMTNoYzMza3Rqa3kxYTdrOCJ9.53B1E6mKD_EQOVb2Y0-SsA';
            map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/gismasterm2/ckyiybz965inm14pp3pd3981c',
                center: [2.16859, 41.3954],
                zoom: 13,
                attributionControl: false
            });
        map.addControl(new mapboxgl.AttributionControl({compact: true}));
        map.addControl(new mapboxgl.NavigationControl());
        }
  </script>
  </head>
  <body onLoad="init()">
  <div id="map"></div>
  </body>
  </html>

¿Añadimos control GeoLocalización?

https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol

map.addControl(new mapboxgl.GeolocateControl());

o con opciones...

map.addControl(new mapboxgl.GeolocateControl({
    positionOptions: {
        enableHighAccuracy: true
    },
    trackUserLocation: true
}));

¿Que pasaría si edito mi estilo en Mapbox Studio?

¿Subimos el ejemplo al GitHub?

    git pull
    git add .
    git commit -m "mapa mapbox"
    git push