Making Maps Beautiful at Drupalcon Chicago


Why Make Maps Beautiful?

Google has done amazing stuff with making maps on the web work well. But, Google Maps has become a bit like stock photography; it's not that exciting or novel anymore.

Part of why you want a map to be customized is to match the branding of your site, but maps are also a really powerful way of presenting information to people. The first thing that you do when you look at a map is to say "where am I on this map?" and see where you fit. Maps are a powerful way of presenting information, see the Pakistan Flood Response Map.

Different maps will show different information in their base layer; one map might be focused on walking, others might be focused on driving. Depending on what you're trying to do, you'll want to use different base layers.

Mapping Solutions in Drupal

  • OpenLayers module - the only module that has any kind of a D7 release (currently alpha.) It's got fantastic views integration, and it's built on top of ctools so you can export everything to Features. Openlayers is separate from Drupal, but there is a module to integrate. You can pull in all sorts of base layers.
  • Gmap module - Integrates with the location module, it's probably more familiar to people using Drupal. It has a simplar user interface, although it doesn't integrate with Features. No D7 release yet.
  • Mapstraction - less used, it's similar to OpenLayers, it's another JS library that lets you switch between different mapping providers. It has views integration and integration with Features and exportables. Fewer releases, unclear Drupal 7 release.

If you're confused by the choices, there's #drupal-go on IRC.

No Coding

Without any coding, you can use the Gmap location module with marker sets based on taxonomy or content type. In OpenLayers, you can do some interesting stuff. Full screen maps, for instance, and different states between when a marker is selected and when it's not, different layers which can be shown/hidden, custom markers, and different maps such as OpenStreetMap.

MapBox is a module that contains the Maki Icon Set and Map Tiles.

OpenLayersPlus is a module on GitHub, and provides permalinks (deep links into your map that let you link straight to a zoomed in map) and layer/control key.

CloudMade is a free service; OpenLayers module provides the ability to include custom Cloudmade tiles. You can specify the colors for different parts of the map via a WYSIWYG interface. If you just want something you can do without writing any code, this is an amazing way to build really beautiful maps.

Some Coding

Attribute Replacement in OpenLayers Styles - You can use views fields to define stle attributes.

Custom Gmap Markers - you can create custom markers by putting files in a specific directory and creating an .ini file, which is not too straightforward but you can put a bunch of custom markers on your map.

OpenLayers Themes - You have the ability to put in your custom image sets, for example custom panning buttons and the zoom bar. You can also use custom CSS.

Themeing GMap popups - you can do views level theming via Gmap, using the provided theming functions. Google has a very stable and native popup solution, especially compared to OpenLayers.

Advanced Coding

You can extend Gmap or OpenLayers; OpenLayers uses the Drupal behaviors system. Alan showed an attribution behavior.

AJAX Popup - There are points on a map, which are variably styled according to how much data is in each group. In this case there's a taxonomy ID tied to that. There's a click even that opens a popup, and uses the ID to pull in all the nodes that have that taxonomy term. That way we don't have to push all the HTML at the beginning when the map loads.

Radius Select - This isn't so much a visual enhancement, but it's interaction. Example from It's used to search; so if a user wants to find some restaurants in a specific area they can define the circle and make it bigger and smaller to choose what area to view.

Curved Lines - Example from E-Center. There are a number of points, and then curved lines connecting those paths. It almost looks like an airline map. It was a little tough, but the code is available on GitHub.

Connect The Dots - This was done for When a marker is clicked on by the user, it brings up all common points and connects them with dashed lines. It then grays out all the other points and icons. So, it highlights certain icons by just changing a few colors.

Styled Layers in Google - Google Maps API v3 provides styled layers. Google Maps API Styled Map Wizard provides a WYSIWYG editor that allows you to customze the map.

TileMill by MapBox - WYSIWYG editor to create custom tile sets and visual styles. It's a standalone, web-based editor. This will allow people like web editors and site builders to create a tile set and interactions that are really custom to our site, but where we don't really need to learn code. It's basically writing some CSS, which is what we already do as web developers. It's a good move in the right direction.

TileLive - DevelopmentSeed is pushing to create data-rich tiles on the fly. They're creating and rendering them over the base map on the fly, which is really hard to do!

Did you enjoy this post? Please spread the word.