Creating Beautiful, Highly Customized Maps with Mapbox and Drupal

There are many map options out there (Google, Esri, Yahoo, etc.), but I’ve found one that stands out above the rest. – Mapbox.

While Google is the favored technology among many, it has a limited set of base maps that doesn’t allow you to create completely custom designs. Mapbox allows for the creation of beautiful, highly customized maps that fit well with your branding across a variety of platforms. Their map editor, Mapbox Studio, is an extremely powerful tool, but fairly easy to use. It allows you to completely customize maps, including things like road and land colors and much more.

The benefit to your organization is that you can have a uniquely styled map that stands out from the competition and meshes nicely with the rest of your branding. These maps can be used on websites, mobile applications, and elsewhere to create a consistent look and feel across your products. The Mapbox Studio app allows you to print them out as well, or export to a high-resolution image for use in print materials. Furthermore, Mapbox is completely open source, and they provide a freemium service for hosting your tilesets once you’ve created them.

Customizing Mapbox for Your Website or Application

With the OpenLayers module for Drupal, you can incorporate Mapbox maps into your website or application and display geotagged content on them. In this post, we’ll walk through a little bit of how this works and a couple examples of the customize maps you can make.

This is an example of Mapbox Studio, the cross-platform map editor which you can use to create custom map tilesets. Here, I’ve updated the roadway colors to use shades of “DOOR3 Blue”. Mapbox Studio uses a stylesheet language called CartoCSS that looks a bit similar to LESS, including variables, functions, and the like. As can be seen below, it has a lot of stuff that is specific to maps and there is a good reference for that online as well as within the app via the Docs tab.

Once you’ve created a map style, you can upload it to the mapbox.com server (once you’ve created an account and authorized the Studio application to connect to it) via the Settings tab:

After you’ve uploaded it, you can view it on your Mapbox account:

The important bit is the text right below the map name, in this case seanr.0d81f662 - that’s the map ID, which you’ll need to format into a URL like this for integration with Drupal:

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

Now, with the OpenLayers module for Drupal, you can go add a new layer under Structure -> OpenLayers -> Layers, Add Layer and enter it there as an XYZ layer, making sure to set the layer as a base layer:

After saving the new layer, we can now create a map to use this layer in. Under the maps tab, add a new map, and under Layers and Styles, you’ll want to change the base layer to use our new layer from above. You’ll also need to set the center and bounds for the map, which you can do through the map provided on that tab, or by entering the coordinates manually if you have them. I’ve also found that a good default zoom level for a street map like this is 16.

In a follow up post, I’ll explain the Add Map tool in OpenLayers and how to configure the content type and views on the Drupal side development to pull all of this together, including custom icons for locations, but the end result will be something like this (with historic locations from the 1960’s in the West Village, in this case):

Sean Robertson is a Senior Developer at DOOR3.