Creación de mapas personalizados con Mapbox y Drupal

Existen muchas opciones de mapas (Google, Esri, Yahoo, etc.), pero he encontrado una que destaca por encima de las demás. – Mapbox](https://www.mapbox.com/).

Aunque Google es la tecnología favorita de muchos, tiene un conjunto limitado de mapas base que no permite crear diseños completamente personalizados. Mapbox permite crear mapas bonitos y muy personalizados que encajan bien con tu marca en diversas plataformas. Su editor de mapas, Mapbox Studio, es una herramienta extremadamente potente, pero bastante fácil de usar. Permite personalizar completamente los mapas, incluyendo aspectos como los colores de las carreteras y los terrenos, y mucho más.

El beneficio para su organización es que puede tener un mapa con un estilo único que destaque de la competencia y encaje bien con el resto de su marca. Estos mapas se pueden utilizar en sitios web, aplicaciones móviles y en otros lugares para crear un aspecto coherente en todos sus productos. La aplicación Mapbox Studio también permite imprimirlos o exportarlos a una imagen de alta resolución para su uso en materiales impresos. Además, Mapbox es completamente de código abierto y ofrece un servicio freemium para alojar tus tilesets una vez creados.

Personalización de Mapbox para tu sitio web o aplicación

Con el módulo OpenLayers para Drupal, puedes incorporar mapas de Mapbox en tu sitio web o aplicación y mostrar contenido geoetiquetado en ellos. En este post, vamos a caminar a través de un poco de cómo funciona esto y un par de ejemplos de la personalización de los mapas que usted puede hacer.

Este es un ejemplo de Mapbox Studio, el editor de mapas multiplataforma que puedes utilizar para crear tilesets de mapas personalizados. Aquí, he actualizado los colores de las carreteras para utilizar tonos de “DOOR3 Blue”. Mapbox Studio utiliza un lenguaje de hojas de estilo llamado CartoCSS que se parece un poco a LESS, incluyendo variables, funciones y similares. Como se puede ver a continuación, tiene un montón de cosas que es específico de los mapas y hay una buena referencia para que en línea, así como dentro de la aplicación a través de la ficha Documentos.

Una vez que hayas creado un estilo de mapa, puedes subirlo al servidor mapbox.com (una vez que hayas creado una cuenta y autorizado a la aplicación Studio a conectarse a él) a través de la pestaña Configuración:

Una vez que lo hayas subido, podrás verlo en tu cuenta de Mapbox:

Lo importante es el texto que aparece justo debajo del nombre del mapa, en este caso seanr.0d81f662: es el ID del mapa, que tendrás que formatear en una URL como ésta para integración con Drupal:

http://a.tiles.mapbox.com/v3/seanr.0d81f662/${z}/${x}/${y}.png

Ahora, con el módulo OpenLayers para Drupal, puede ir a añadir una nueva capa en Estructura -> OpenLayers -> Capas, Añadir capa e introducirla allí como una capa XYZ, asegurándose de establecer la capa como capa base:

Después de guardar la nueva capa, ahora podemos crear un mapa para utilizar esta capa en. En la pestaña de mapas, añade un nuevo mapa, y en Capas y Estilos, querrás cambiar la capa base para usar nuestra nueva capa de arriba. También tendrás que establecer el centro y los límites para el mapa, lo que puedes hacer a través del mapa proporcionado en esa pestaña, o introduciendo las coordenadas manualmente si las tienes. También he descubierto que un buen nivel de zoom por defecto para un callejero como este es 16.

En un post de seguimiento, voy a explicar la herramienta Añadir Mapa en OpenLayers y cómo configurar el tipo de contenido y vistas en el Drupal desarrollo lateral para tirar de todo esto juntos, incluyendo iconos personalizados para los lugares, pero el resultado final será algo como esto (con lugares históricos de la década de 1960 en el West Village, en este caso):

Sean Robertson es desarrollador senior en DOOR3.