Desarrolla tu propio mapa con Mapbox

Sobre este sitio web

En mi artículo sobre las mejores herramientas de integración de mapas, presenté cuatro soluciones diferentes para agregar un mapa a un sitio web o blog. Entre estas soluciones se encuentra Mapbox, una tecnología que permite mostrar mapas en un sitio web, similar a el servicio de Google Maps.

Como veremos, hacer una integración personalizada de mapas es la solución que es al mismo tiempo la más compleja, pero también la menos costosa si lo haces por ti mismo. También es la que te permitirá obtener el mejor resultado, a tu imagen, si tienes tiempo para dedicarle.

Si no tienes tiempo o no tienes habilidades para desarrollar un mapa con Mapbox o Google Maps, te invito a encontrar otras soluciones en este artículo de blog, pero ten en cuenta que la que te permitirá obtener el resultado más cercano a una integración personalizada y más rápida será muy probablemente TraveledMap.

Esta nota anterior no es casual. Cuando desarrollé TraveledMap, lo hice con el objetivo de simplificar el uso de tecnologías como Mapbox y Google Maps, para las personas que no tienen tiempo o habilidades para hacerlo.
Es importante destacar que principalmente utilicé Mapbox con React, un framework que acelera el desarrollo, haciendo que el sitio sea más receptivo y generalmente más confiable (con menos errores), pero es muy probable que tu caso de uso esté más orientado a una integración de Mapbox en Javascript puro y simple. Por lo tanto, explicaré cómo integrar un mapa con Mapbox sin framework y prestando especial atención al desarrollo para un sitio WordPress.

Contenido

Crear el mapa

Para comenzar con Mapbox, es necesario crear una cuenta, de lo contrario no podrás mostrar un mapa. Te invito a visitar su sitio web para crear una cuenta. Una vez que la cuenta esté activa, tendrás acceso a tu panel de control, que contiene información que nos interesa en particular:
Tu token de acceso (que debe comenzar con pk.)

Este token de acceso es una clave que se requiere para identificarte cuando solicites mostrar un mapa. Tiene un doble propósito:

Permite establecer el vínculo entre el mapa y tu cuenta, teniendo en cuenta las modificaciones que hayas realizado en los mapas de tu cuenta de Mapbox. Por ejemplo, puedes crear estilos personalizados con Mapbox Studio, que son privados de forma predeterminada y no se encontrarían si usaras el token de otra persona.
También permite contar el número de mapas que has mostrado para fines estadísticos y de pago.

Mapbox ofrece 50,000 cargas de mapa por mes, lo cual es suficiente en la mayoría de los casos. Sin embargo, si estás creando un sitio que tendrá rápidamente más de 50,000 visitas en la página donde se encuentra el mapa (lo cual es muy difícil de lograr), en ese caso tendrás que pagar $5 por cada 1000 vistas, después de las 50,000 vistas gratuitas.
Ten en cuenta que también existen soluciones alternativas a Mapbox con un precio más bajo para tales cantidades de visualizaciones. También ten en cuenta que esto no excluye el desarrollo del mapa con las herramientas de Mapbox, utilizando otra API de visualización.

¡Aquí vamos, ahora podemos mostrar nuestro primer mapa!
Te explicaré paso a paso cómo hacerlo, pero no te preocupes, el código final se encuentra al final de la página.

Abre el archivo que contiene el código HTML de tu página, o en WordPress, edita la página en la que deseas agregar el mapa agregando un bloque HTML personalizado, y agrega el siguiente contenido:

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


<div id="map" style="height: 500px; width: 100%"></div>

<script>
    mapboxgl.accessToken = 'Asegúrate de reemplazar esto por tu Access Token';
    var map = new mapboxgl.Map({
        container: 'map', // el identificador del contenedor del mapa.
        style: 'mapbox://styles/mapbox/light-v10', // URL du style à utiliser
        center: [2, 45], // posición predeterminada [lng, lat]
        zoom: 2 // zoom predeterminado
    });
</script>

¡Guarda, previsualiza y ... tadaaaa 🎉 !
Deberías ver el mapa mostrándose.

Tu primer mapa en tu sitio con Mapbox

Si desglosamos este código:

Dos líneas para cargar los recursos necesarios para que el mapa funcione correctamente:
```
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css" rel="stylesheet" />
```
Ten en cuenta que la ubicación de estas líneas afecta el tiempo de carga de tu página. Idealmente, deberían colocarse al final de la etiqueta <body> de tu sitio.
Una línea para colocar el mapa en la página, que también contiene el estilo del contenedor del mapa (500px de altura y 100% de ancho):
```
<div id="map" style="height: 500px; width: 100%"></div>
```

Y finalmente, un script en el que ejecutamos el código para cargar el mapa:

<script>
    mapboxgl.accessToken = 'Asegúrate de reemplazar esto por tu Access Token';
    var map = new mapboxgl.Map({
        container: 'map', // el identificador del contenedor del mapa.
        style: 'mapbox://styles/mapbox/light-v10', // URL du style à utiliser
        center: [2, 45], // posición predeterminada [lng, lat]
        zoom: 2 // zoom predeterminado
    });
</script>

Asegúrate de reemplazar el texto con tu token de acceso, de lo contrario, el mapa no se cargará.
Los parámetros pasados a la función mapboxgl.Map se pueden cambiar:

container: debe ser el mismo que el id del elemento que coloca tu mapa (ver arriba)
style: es el estilo de tu mapa. Puedes personalizar tus mapas creando nuevos estilos en Mapbox Studio. Por defecto, tienes disponibles 4 o 5 estilos. Previsualízalos aquí.
center: es el centro predeterminado del mapa. El primer número (2) corresponde a la longitud, y el segundo (45) corresponde a la latitud.
zoom: es el nivel de zoom predeterminado, debe estar comprendido entre 0, que es el nivel de zoom más bajo, es decir, el más alejado, y 20, que es el más alto, es decir, el más acercado.
En el nivel de zoom 20, estás a nivel de una casa, por lo que el nivel de zoom correspondiente al caso de uso de mostrar viajes en el mundo se encuentra entre 1 y 3.

Agregar marcadores

Ahora que tienes tu mapa y puedes elegir su centro y nivel de zoom predeterminados, así como su estilo, veamos cómo agregar información en él (como tus viajes, por ejemplo). En esta etapa, vamos a intentar definir una lista de ubicaciones y representarlas en el mapa con marcadores.

Mapbox ofrece diferentes ejemplos que se explican, en esta página.

El primer paso es agregar un marcador único para comprender cómo funciona. Agregar un marcador en el mapa no es complicado, solo tienes que mantener el código para mostrar el mapa y agregar esta línea (justo antes de cerrar la etiqueta <script />):

new mapboxgl.Marker()
    .setLngLat([2.35, 48.85])
    .addTo(map);

Esta línea agregará un pin (un marcador) en las coordenadas 2.35, 48.85, es decir, aproximadamente en París.

Mostrando un marcador en París

El segundo paso será crear una lista de viajes y mostrar un marcador para cada uno de ellos.
En JavaScript (el lenguaje utilizado para escribir las líneas anteriores), se pueden crear listas de objetos. Aquí, un objeto representa nuestro viaje y está entre llaves {}, y la lista se representa con corchetes []
Aquí tienes un ejemplo con 3 viajes:

var trips = [{ 
    coordinates: [2.35, 48.85],
}, { 
    coordinates: [-74, 40.71],
}, { 
    coordinates: [-7.99, 31.62],
}]

Ahora que tenemos una lista, debemos iterar (realizar una operación para cada elemento de la lista) sobre los viajes para mostrarlos.
Por lo tanto, puedes eliminar el ejemplo anterior (new Mapboxgl.Marker) y agregar este código en su lugar:

trips.forEach(trip => {
    new mapboxgl.Marker()
       .setLngLat(trip.coordinates)
       .addTo(map);
});

¡Ahora deberías ver 3 marcadores en el mapa! Para agregar tus propios viajes, simplemente reemplaza esos tres objetos en la lista por los tuyos, y puedes agregar tantos como desees.

Agregar el nombre de los viajes

Una mejora bastante obvia para nuestros marcadores sería agregar el nombre del viaje. Podemos hacerlo utilizando los popups de Mapbox. Los popups son bastante fáciles de usar, solo tienes que agregar dos líneas de código al mostrar el marcador:

trips.forEach(trip => {
    new mapboxgl.Marker()
        .setLngLat(trip.coordinates)
        .setPopup(new mapboxgl.Popup({ anchor: 'top' }) // agregar un popup
            .setHTML('<p>Viaje a Marrakech</p>'))
        .addTo(map);
});

Ahora deberías ver el nombre de Marrakech apareciendo en una pequeña ventana debajo del marcador cuando haces clic en él.
Por supuesto, queremos ver el nombre correcto debajo de cada marcador, por lo que vamos a agregar una propiedad a nuestros objetos de viaje:

var trips = [{ 
    coordinates: [2.35, 48.85],
    name: 'Paris'
}, { 
    coordinates: [-74, 40.71],
    name: 'New York'
}, { 
    coordinates: [-7.99, 31.62],
    name: 'Marrakech'
}]

y la vamos a utilizar dinámicamente cuando iteramos, simplemente reemplazamos.setHTML('<p>Voyage à Marrakech</p>')) por.setHTML('<p>' + trip.name + '</p>'))

Popup mostrando el nombre de París

Personalizar los marcadores

Por último, vamos a buscar utilizar una imagen que se ajuste a tu sitio web. Para hacer esto, simplemente vamos a agregar algo de estilo a nuestro mapa, utilizando la etiqueta style, que se debe colocar antes de la etiqueta <div id="map">:

<style>
  .marker {
    background-image: url('https://www.traveledmap.com/images/home/marker-traveled.png');
    background-size: cover;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
  }
</style>

También es necesario crear el marcador en un elemento que agregues tú mismo, reemplazando las líneas de creación de marcadores por las siguientes líneas (ten en cuenta que se agrega un desplazamiento de 15px, siendo 15 la mitad de la altura del marcador, definido en el estilo anterior):

trips.forEach(trip => {
  var el = document.createElement('div');
  el.className = 'marker';

  new mapboxgl.Marker(el)
    .setLngLat(trip.coordinates)
    .setPopup(new mapboxgl.Popup({ anchor: 'top', offset: 15 })
      .setHTML('<span>' + trip.name + '</span>'))
    .addTo(map);
});

Desarrolla tu propio mapa de viajes con Mapbox (nivel principiante)

Sobre este sitio web

Crear el mapa

Agregar marcadores

Agregar el nombre de los viajes

Personalizar los marcadores