Introducción a MapBox, crear un mapa web y agregar marcadores

MapBox es un proveedor de mapas que ha expandido sus funciones para competir con Google Maps y OpenStreetMaps entre otros.

MapBox cuenta con un editor donde es posible modificar el color y la apariencia de los mapas, ademas cuenta con diseños listos para usar.

MapBox es usado por empresas como Foursquare, Pinterest, Evernote, Uber Technologies entre otras empresas.

Empezando Con MapBox

Para empezar a usar MapBox tenemos que ir a su pagina oficial y crear una cuenta https://www.mapbox.com/

Después de crear la cuenta, activamos la cuenta por email y accedemos al sistema de MapBox.

Desde la cuenta de MapBox podemos acceder a la documentacion, donde veremos que hay opciones para la Web, iOs, Android y Unity, algo muy genial.

Para usar los mapas de MapBox vamos a necesitar un access token, del cual ya nos dan uno.

MapBox es un servicio de pago, pero es gratis las primeras 50,000 peticiones o cargas de mapa mensuales, desde el dashboard podemos ver el uso de las peticiones.

Código

Ya que tenemos el access token podemos empezar a usar mapbox, a continuación el código para empezar. Todo el código se escribe en un archivo HTML.

Paso1. Debemos incluir los archivos css y js de mapbox en el head del documento.

<script src='https://api.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' />

Paso 2. En el Body, agregamos un elemento para el mapa y un elemento para la informacion.

<div id='map' style='width: 960px; height: 540px;'></div>
<div id="info"></div>

En el div con id “map” asignamos las medidas del contenedor.

Paso 3. A partir de aquí empieza el script para renderizar el mapa.

Lo que hacemos es ingresar el accessToken o token de acceso, aqui les dejo mi token, pero este puede cambiar y dejar de funcionar o en otro caso si lo saturan arriba de las 50000 peticiones también dejara de funcionar.

mapboxgl.accessToken = 'pk.eyJ1IjoiZXZpbG5hcHNpcyIsImEiOiJjazM2MHZtbXcwNm11M25reGY3NW1zMHhhIn0.FoA72lWHT4bXe2jxfH5uvQ';

var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-99, 18], // starting position
zoom: 5
});

También creamos el mapa, le agregamos el id del contenedor del mapa que creamos en el Paso 2, también le asignamos el estilo street-v11 y colocamos el centro del mapa.

Paso 4. Muy importante, las coordenadas en MapBox el primer parámetro es longitud y el segundo es latitud.

Esto funciona tanto para el centro del mapa, para los marcadores y todo lo demás.

Es importante notar que en Google Maps el primer parámetro es la latitud y después la Longitud.

Paso 5. Siguiendo con el Script. Ahora vamos a agregar un par de marcadores sencillos.

var marker = new mapboxgl.Marker().setLngLat([-99, 18]).addTo(map); // marcador 1
var marker2 = new mapboxgl.Marker().setLngLat([-98, 17]).addTo(map); // marcador 2

Digo sencillos por que esta es la forma mas facil y en otro post veremos como personalizarlos.

Paso 6. Vamos a agregar un Evento que se disparara cuando el mouse pase sobre el mapa, así vamos a lograr obtener las coordenadas del punto donde pase el mouse.

map.on('mousemove', function (e) {
document.getElementById('info').innerHTML =
JSON.stringify(e.lngLat.wrap());
});

Los valores los vamos a colocar en el contenedor “info” que creamos en el Paso 2.

Resultado

Codigo Completo

Les dejo el código completo en un gist de github. recuerden copiarlo y guardarlo en un archivo .html ejemplo: mapbox1.html