Guia sencilla para usar MapBox

Después de que Google Maps cambiara al plan de precios de pago

por uso para sus API que se usaban para servicios de mapeo en
sitios web y aplicaciones, muchos desarrolladores y otras
plataformas que lo usaban comenzaron a buscar servicios
alternativos que brindaran las funcionalidades de Google pero a
precios más económicos. Entonces vino Mapbox a rescatar.

Mapbox es una plataforma que ofrece servicios de mapas a través

de sus API a precios muy razonables y la mejor parte es que no
requieren la información de facturación si está utilizando su
generoso nivel gratuito. Por lo tanto, los desarrolladores que
solo querían probar sus aplicaciones o que aún no están listos
para pagar por los servicios hasta que sus aplicaciones o sitios
web obtengan grandes visitas se salvan de cualquier problema de
facturación.
Mapbox proporciona un código simple que puede usar para integrar
mapas en su sitio web o aplicación, pero sus documentos son
bastante engorrosos de revisar. Por lo tanto, le ahorraré
problemas al desglosarlo de una manera simple y fácil para
ayudarlo.
Hay dos formas de integrar mapas:
1. Forma sencilla pero menos controlada
2. Tipo de forma sencilla

Para empezar, es usar la etiqueta iframe para incluir el mapa en nuestra aplicación

<iframe src='https://api.mapbox.com/styles/v1/mapbox/streets-v11.html?
title=true&zoomwheel=false&access_token=YOUR_ACCESS_TOKEN#15/37.771/-122.436'></iframe>

Nota: Incluir este código en la aplicación y estará listo, para que funcione, necesita un token de acceso que se explica más adelante.

Mapbox: el HTML devuelto con este método (iframe) solo devuelve el estilo del mapa y no admite ventanas emergentes u otras interacciones de
características.

Según los documentos de mapbox, es posible que no pueda acceder a algunas de las funciones que vienen con el mapa.

A veces también puede romper su diseño, al incluir un iframe.

La manera simple

Trabajaremos con Mapbox GL JS, que es una biblioteca de JavaScript que usa WebGL para representar mapas interactivos a partir de mosaicos
vectoriales (solo un formato para almacenar los datos del mapa, es decir, datos vectoriales geoespaciales como puntos, líneas y polígonos) y
estilos de mapbox.

Solo necesitamos saber sobre el objeto de mapa que básicamente define el mapa que queremos incluir, especifica todas las propiedades que
desea que tenga su mapa y, en el nivel más básico, es así:

let map = new mapboxgl.Map({

container: 'map', // container id
style: 'mapbox://styles/harsh-khurana/ck970tots6kk91ik5zxo9i1ng', // stylesheet location
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});

Nota: Debe declarar esto en su archivo JS o las etiquetas de script en su html.

Propiedades del mapa una por una:

Contenedor: su valor es el elemento html o el ID de cadena donde representaremos nuestro mapa.
Estilo: El tipo de estilo que tenga su mapa. Hay vista de calles, vista oscura y muchas más. Es posible que también desee personalizar sus
estilos con mapbox studio. Pero te sugiero que te ciñas a los básicos, ya que ya son bastante buenos.
Centro: Este es el punto central geográfico inicial del mapa, es decir, lo que se muestran los mapas en la carga y su valor está en formato
de longitud y latitud.
Zoom: es el nivel de zoom inicial del mapa, es decir, la cantidad de área que se muestra al cargar, un zoom más grande significa más cerca
de la superficie.
Además de estas propiedades mencionadas, hay muchas propiedades presentes, pero las buenas ya son verdaderas por defecto y el resto es un
problema innecesario.

Access Token
Para usar todo este mapa necesitas un token de acceso, que es una clave que le da Mapbox cuando te registras como usuario para que cada vez
que acceda a los servicios de Mapbox a través de su API. El token de acceso es como un código de seguridad para usar los servicios de
Mapbox. Y puede obtenerlo de forma gratuita simplemente registrándose aquí, lo que le proporcionará un token público o puede crear uno nuevo
desde la sección de su cuenta en el sitio web de mapbox. Puede crear este otro token con restricciones de URL (que hacen que se pueda
acceder al mapa solo desde determinadas URL). Simplemente haga clic en crear token que abrirá una ventana donde, debajo, veras un cuadro de
entrada donde puede agregar las URL (generalmente la URL de su sitio web) que les permite realizar solicitudes exitosas a la API de Mapbox.
Entonces, después de tener su token, simplemente ir a sus scripts o su archivo JS e incluya lo siguiente sobre su objeto de mapa:

mapboxgl.accessToken = ‘ACCESS_TOKEN’;

Lo incluimos en el sitio web al incluir la biblioteca de mapbox y las etiquetas en nuestra aplicación donde queremos que se vea nuestro mapa
y también algunos estilos para establecer el ancho y la altura del mapa.
 <!DOCTYPE html><html><head>
<meta charset="utf-8" />
<title>Display a map</title>
<meta name="viewport" content="initial-scale=1,maximum- scale=1,user-scalable=no" />
// Mapbox API links
<script src="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.css" rel="stylesheet" /> <style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style></head><body>
<div id="map"></div>
</body>
</html>

Hemos proporcionado la propiedad central con valores codificados fijos, es decir, su mapa es estático y siempre mostrará la misma ubicación
según las coordenadas en cada carga a menos que cambiemos esas coordenadas centrales cada vez para una ubicación diferente.
Entonces, ¿no sería bueno tener una ubicación dinámica mostrada en el mapa?
Y eso nos lleva al concepto de geocodificación, que es un proceso de tomar una dirección o nombre de un lugar y convertirlo en valores de
latitud y longitud.
Hay dos tipos de codificación geográfica:
Reenviar geocodificación que convierte texto en coordenadas geográficas.
Geocodificación inversa que convierte las coordenadas geográficas en una descripción de texto.
Haremos la codificación geográfica directa en nuestra aplicación.
Y en realidad, hay dos formas de implementar esta codificación geográfica directa:

1. Agregar directamente como entrada del geocodificador

Al usar la codificación geográfica, daremos el control a los usuarios, a quienes se les proporcionará un cuadro de búsqueda dentro de la
ventana del mapa donde pueden escribir la dirección y obtener la ubicación representada en el mapa. Es bastante simple hacer esto, todo lo
que tiene que hacer es incluir el siguiente código en su aplicación ya existente:
// Include this code in HTML body
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.css" type="text/css" />
// Promise polyfill script required to use Mapbox GL Geocoder in IE 11
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
map.addControl(
new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
mapboxgl: mapboxgl
})
);

2. Usando la API de recuperación

A veces queremos tener un cuadro de búsqueda fuera de nuestra ventana de mapa, o es posible que deseemos usar la ubicación ya almacenada en
alguna base de datos para representar el mapa al cargar en lugar de que el usuario escriba por nosotros, pero este es un proceso largo, así
que mantengamos eso para otra lección para mantener esta guía simple y para que no se sienta abrumado.

Haciendo su mapa un poco más interactivo

Tu mapa está listo ahora. Hagamos que el mapa sea un poco más interactivo agregando los controles de zoom y rotación (es decir, los signos
más y menos que lo ayudan a acercar y alejar el mapa y la rotación es la que lo ayuda a mover el mapa en varios grados) y también un
marcador en el centro.
Para agregar controles de navegación, simplemente agregue después de declarar su objeto de mapa:
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());

Para agregar marcador, haga:

map.on("load", function () {
map.loadImage("https://i.imgur.com/MK4NUzI.png", function(error, image) {
if (error) throw error;
map.addImage("custom-marker", image);
/* Style layer: A style layer ties together the source and image and specifies how they are displayed on the map. */
map.addLayer({
id: "markers",
type: "symbol",
source: {
type: "geojson",
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: "Point",
coordinates: [-74.5, 40]
}
}
]
}
},
layout: {
"icon-image": "custom-marker",
}
});
});
})
La imagen es la imagen de su marcador y no olvide proporcionar las coordenadas para colocar el marcador (por lo general, lo colocaría en el
centro, igual que el centro del objeto del mapa).
hjkh