En este momento estás viendo Cómo crear aplicaciones web de mapas con Mapbox

Cómo crear aplicaciones web de mapas con Mapbox

  • Categoría de la entrada:Mapbox
  • Tiempo de lectura:8 minutos de lectura

¿Qué es Mapbox?

Mapbox es una plataforma de desarrollo que te permite crear mapas web interactivos y personalizados usando JavaScript. Es una alternativa moderna a Google Maps, con más control sobre el diseño del mapa y cómo se comporta.

Con Mapbox, puedes:

  • Crear mapas con estilos personalizados.
  • Agregar datos (GeoJSON, capas vectoriales, imágenes).
  • Mostrar marcadores, rutas, y capas interactivas.
  • Usarlo en páginas web, apps móviles o juegos.

Mapbox usa WebGL, lo que lo hace muy rápido y visualmente atractivo.

¿Qué es HTML?

HTML (HyperText Markup Language) es el esqueleto de una página web. Es la que nos sirve para estructurar el contenido: títulos, párrafos, imágenes, botones, formularios, etc. Piensa en HTML como los ladrillos y paredes de una casa.

Ejemplo de HTML:

<h1>Mi Mapa Interactivo</h1>
<p>Este es un mapa creado con Mapbox.</p>
<div id="map"></div>

¿Qué es CSS?

CSS (Cascading Style Sheets) es el lenguaje que se usa para dar estilo al contenido HTML. Te permite cambiar colores, tamaños, márgenes, fuentes, posiciones, etc. Piensa en CSS como la pintura, muebles y decoración de la casa.

Ejemplo de CSS:

#map {
  width: 100%;
  height: 600px;
  border: 2px solid black;
}

¿Qué es JavaScript (JS)?

JavaScript es un lenguaje de programación que permite agregar funcionalidad y dinamismo a tu página web. Con JS puedes hacer que los mapas se muevan, que respondan a clics, que muestren ventanas emergentes, que cambien al hacer zoom, etc. Piensa en JavaScript como la electricidad y automatización de tu casa, hace que las cosas funcionen.

Ejemplo de JavaScript:

mapboxgl.accessToken = 'TU_TOKEN';
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [-74.0818, 4.6097],
  zoom: 12
});

Antes de iniciar necesitas:

1. Ingresa a Sublime Text y estructura tu proyecto

  • Abre Sublime Text.
  • Crea una nueva carpeta para tu proyecto. Ejemplo: mapbox_app.
  • Dentro de esa carpeta, vas a crear tres archivos esenciales (en mi caso los llame todos mapa.xx pero puedes usar la siguiente estructura):
    • index.html → estructura del sitio
    • style.css → estilos del mapa
    • main.js → código JavaScript con Mapbox

2. Diseñar el HTML del mapa (index.html)

Este archivo crea la estructura de la página. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Mapa con Mapbox</title>
  <link rel="stylesheet" href="style.css">
  <script src='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
  <div id="map"></div>
  <script src="main.js"></script>
</body>
</html>

Este HTML incluye los enlaces a:

  • Hoja de estilos style.css
  • Librería de Mapbox
  • Tu archivo JS con la lógica del mapa

3. Diseñar el CSS del mapa (style.css)

Este archivo define el tamaño del mapa. Este estilo asegura que el mapa ocupe toda la pantalla.

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

4. Codificar el JavaScript (main.js)

Aquí colocamos el access token y configuramos el mapa.

mapboxgl.accessToken = 'TU_ACCESS_TOKEN_AQUI';

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11', // estilo del mapa
  center: [-74.0818, 4.6097], // coordenadas iniciales (Bogotá)
  zoom: 12
});

5. Resultado

  • Puedes hacer zoom, mover el mapa y cambiar el estilo si lo deseas.
  • Abre tu archivo index.html en un navegador.
  • Si todo está bien, deberías ver un mapa interactivo de Mapbox centrado en Bogotá.

Los archivos los encuentras en mi repositorio de Github.

Mira el video con todo el proceso:

Etiquetas: , , ,