En este tutorial te mostraré como construir un mapa web interactivo usando marcadores personalizados de la librería Mapbox GL JS, mediante el uso de JavaScript. Aprenderás cómo cargar datos con GeoJSON en línea y agregarlos a tus mapas dinámicamente utilizando marcadores HTML. Finalmente, agregarás ventanas emergentes cuando se haga clic en un marcador.
Empezando
Para este proyecto, te recomiendo que creas un directorio o carpeta llamada “mapbox-marcadores”,
para alojar tus archivos del proyecto dentro de dicho directorio.
Para continuar con este tutotial necesitaras:
- Un token de acceso. desde tu cuenta de mapbox. Lo puedes conseguir desde tu cuenta de mapbox
- Un editor de texto, puesto que escribiremos código HTML, CSS y JavaScript
- Imagen personalizada del marcador. En este tutorial se utiliza una imagen dentro de cada marcador HTML personalizado para mostrar la ubicación de las oficinas. Deberás descargar el archivo PNG para usarlo como su icono personalizado y guardarlo en la misma carpeta de tu proyecto.
Crear un mapa con Mapbox GL JS
¡Ahora estás listo para usar Mapbox GL JS! Para comenzar, crea un nuevo archivo HTML y lo nombras index.html y escribe el código siguiente para inicializar un mapa Mapbox GL JS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta name="robots" content="noindex, nofollow" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" /> <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js"></script> <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" /> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } .marker { background-image: url('mapbox-icon.png'); background-size: cover; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; } .mapboxgl-popup { max-width: 200px; } .mapboxgl-popup-content { text-align: center; font-family: 'Open Sans', sans-serif; } </style> </head> <body> <div id="map"></div> <script> mapboxgl.accessToken = 'pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2p0MG01MXRqMW45cjQzb2R6b2ptc3J4MSJ9.zA2W0IkI0c6KaAhJfk9bWg'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/light-v10', center: [-88.86767915737873, 13.724149743725818], zoom: 8 }); </script> </body> </html> |
Como puede ver en el código de arriba, el mapa requiere varios opciones:
- Container: Es el id del elemento <div>, que es donde se debe mostrar el mapa.
- Style: la url que contiene los estilos CSS del mapa, para este caso se esta usando los estilos de la librería mapbox: “mapbox://styles/mapbox/light-v10”.
- Center: el punto central inicial del mapa en formato [longitud, latitud].
- Zoom: el nivel de zoom inicial del mapa.
Cargar los datos con GeoJSON
Carga tus datos agregando GeoJSON a tu archivo HTML. Este GeoJSON se usará para determinar dónde aparecerán tus marcadores en el mapa.
Copia y pega lo siguiente después del código que inicializa el mapa, pero despues de la etiqueta “<script>”. Este código declara una variable geojson que se establece igual a los datos de GeoJSON.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
var geojson = { 'type': 'FeatureCollection', 'features': [ { 'type': 'Feature', 'geometry': { 'type': 'Point', 'coordinates': [-88.17680460467297, 13.50289350844075] }, 'properties': { 'title': 'San Miguel', 'description': 'Ciudad de San Miguel, El Salvador' } }, { 'type': 'Feature', 'geometry': { 'type': 'Point', 'coordinates': [-89.224613https://obedalvarado.pw/blog/wp-admin/post-new.php#69764794, 13.699886793645973] }, 'properties': { 'title': 'San Salvador', 'description': 'Ciudad de San Salvador, El Salvador' } } ] }; |
Agregar marcadores HTML
Ahora que hemos cargado los datos, agrega código para crear un elemento HTML para cada marcador y vincularlo a las características de GeoJSON utilizando el método de marcador Mapbox GL JS. Se Utilizará la imagen que descargó al inicio de este tutorial, la cual se debe guardar en la carpeta del proyecto.
Cuando agregues un marcador utilizando el método Marker, tu estarás creando un div vacío a cada punto en tu GeoJSON.
Agregar marcadores al mapa usando JavaScript
A continuación, agrega el código JavaScript necesario para crear los marcadores y agregarlos al mapa. Copia y pegue el siguiente código dentro de tu etiqueta de <script> después del final de su declaración de objeto de mapa pero antes de la etiqueta </script> “etiqueta de cierre”.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// add markers to map geojson.features.forEach(function(marker) { // create a HTML element for each feature var el = document.createElement('div'); el.className = 'marker'; // make a marker for each feature and add it to the map new mapboxgl.Marker(el) .setLngLat(marker.geometry.coordinates) .setPopup( new mapboxgl.Popup({ offset: 25 }) // add popups .setHTML( '<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>' ) ) .addTo(map); }); |
Guarda el archivo y actualiza tu navegador. Deberías ver el mapa que se muestra con sus marcadores HTML personalizados.
Producto final
El mapa final que vamos a construir se verá así:
Hemos creado un mapa utilizando marcadores interactivos con datos y estilos personalizados utilizando la librería Mapbox GL JS.
VER DEMO DESCARGAR ARCHIVOS
