Cómo añadir un marcador en Mapbox


En este rápido tutorial veremos cómo añadir un marcador con el logotipo de vuestra empresa a un mapa de Mapbox, perfecto para vuestra página de contacto.


A continuación os dejo el Script en código html listo para insertarlo en vuestra página, recordar que debéis hacer algunas modificaciones sobre el código, como añadir vuestro token de Mapbox, cambiar el estilo por otro más personalizado o acorde a vuestros colores corporativos, cambiar la imagen del marcador y modificar las coordenadas con las de vuestra empresa.

						
<!DOCTYPE html>
<html>
<head>
	<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.js"></script>
	<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.css" rel="stylesheet">
	<style>
	 #map { height: 500px; width: 500px }
	</style>
</head>
<body>
	<div id="map"></div>
	<script>
	mapboxgl.accessToken = "Tu Token de Mapbox";

	/* Map: This represents the map on the page. */
	var map = new mapboxgl.Map({
	 container: "map",
	 style: "mapbox://styles/mapbox/dark-v10",
	 zoom: 16,
	 center: [-3.630014,40.389255]
	});

	map.addControl(new mapboxgl.NavigationControl());
	map.addControl(new mapboxgl.FullscreenControl());

	map.on("load", function () {
	 /* Image: An image is loaded and added to the map. */
	 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: A data source specifies the geographic coordinate where the image marker gets placed. */
	       source: {
	         type: "geojson",
	         data: {
	           type: 'FeatureCollection',
	           features: [
	             {
	               type: 'Feature',
	               properties: {},
	               geometry: {
	                 type: "Point",
	                 coordinates: [-3.630014,40.389255]
	               }
	             }
	           ]
	         }
	       },
	       layout: {
	         "icon-image": "custom-marker",
	       }
	     });
	   });
	});
	</script>
</body>
</html>
						
					

Si queréis aprender un poco más sobre el código para que podáis realizar las modificaciones necesarias:

Vamos a comenzar con el head, en el aparecen dos enlaces una es los estilos o CSS y otra es el JavaScript necesario para que el mapa sea interactivo.

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

Como queremos insertar el código en una parte de vuestra página de contacto añadiremos el siguiente estilo, en el que solo hemos definido la altura y la anchura del mapa.

						
<style>
  #map { height: 500px; width: 500px }
</style>
						
					

A continuación en el body añadiremos el contenedor con el id=map.

						
<div id="map"></div>
						
					

Si pasamos a la parte del Script, en primer lugar debemos insertar el token de mapbox, único para cada usuario:

						
mapboxgl.accessToken = "Tu Token de Mapbox";
						
					

En segundo lugar debemos añadiremos el mapa, en el que vamos a definir el nombre del contenedor, en nuestro caso “map”, el estilo que queremos visualizar, la escala de visualización o zoom y finalmente las coordenadas geográficas en grados decimales, Longitud y Latitud.

						
/* Map: This represents the map on the page. */
var map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/dark-v10",
  zoom: 16,
  center: [-3.630014,40.389255]
});, 
						
					

Una parte opcional del código son los controladores del mapa, nosotros vamos a añadirlos, si queréis saber un poco más os recomendamos el siguiente tutorial:


  • Cómo añadir los controles básicos a un mapa de Mapbox

    En este Tutorial veremos cómo añadir los controles básicos a nuestro mapa de Mapbox


						
map.addControl(new mapboxgl.NavigationControl());
map.addControl(new mapboxgl.FullscreenControl());
						
					

Finalmente vamos a añadir el marcador, existen varios métodos, nosotros vamos a añadirlo en formato GeoJSON, de esa manera es mucho más sencillo representar muchos marcadores a la vez.

¿Qué es un GeoJSON?

GeoJSON es un formato estándar abierto diseñado para representar elementos geográficos sencillos, junto con sus atributos no espaciales, basado en JavaScript Object Notation.

En esta parte del código es necesario indicar la ruta o url donde está alojada la imagen o vuestro logo, y en el GeoJSON añadir las coordenadas de vuestro local o empresa y el type lo definimos como "Point".

						
map.on("load", function () {
  /* Image: An image is loaded and added to the map. */
  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: A data source specifies the geographic coordinate where the image marker gets placed. */
        source: {
          type: "geojson",
          data: {
            type: 'FeatureCollection',
            features: [
              {
                type: 'Feature',
                properties: {},
                geometry: {
                  type: "Point",
                  coordinates: [-3.630014,40.389255]
                }
              }
            ]
          }
        },
        layout: {
          "icon-image": "custom-marker",
        }
      });
    });
});
						
					

Y si añadís a este mapa un formulario de contacto ya tenéis lista vuestra página de contacto o de donde estamos.

¿Alguna pregunta? ¿Quieres realizar sinergias o colaboraciones? ¿Te gustaría enviarnos feedback sobre el tutorial? No dudes en contactar a jgabas@geopois.com.



Sobre el Autor


Javier Gabás Jiménez

Soy un apasionado de los mapas y la infraestructura de datos espaciales, me divierto mucho buscando formas de comprender y presentar datos visualmente, así como entender la programación que hay debajo. Ingeniero en geomática y topografía por la Universidad Politécnica de Madrid, cuando no estoy trabajando o estudiando, estaré viajando y disfrutando de la vida junto a mi pareja.



Formamos parte del programa de emprendimiento #17actuaupm