WebDev

Making Drupal GMap Look Pretty

Fletch — Fri, 13 Dec 2013 21:00:03 +0000

Making Drupal GMap Look Pretty

Recently we built a website that uses the Location and GMap Drupal modules. Our customer is an artist and we wanted to do something slick that matches the style of her site. GMap module offers some basic styling of the map, but what we really wanted was the type of stylized maps shown on snazzymaps.com.

These maps use some JavaScript code similar to the "JavaScript style array" shown on this example, which is the style used in this blog post. Unfortunately the GMap module does not directly support this type of styling at the moment. We will need another way to add this code to a Drupal theme.

Step 1: Modules

Install Location and GMap, and configure them, along with any of the add-on location modules that enables you to attach locations to the various Drupal features such as users, nodes, or taxonomy. Our client is associating the locations with content, so we are using the "Node Locations" module to attach locations and then "GMap Location" to display the map. The example below assumes this; if your setup is different, you might have to adjust the JavaScript code.

Once you have location information attached to a page, visit Drupal's block administration page under Structure -> Blocks and enable the GMap Location block. At this point you should see a working Google map, although with the default styling.

Step 2: JavaScript

Hopefully you are working with a subtheme as explained previously. Open your theme's THEMENAME.info file and add a scripts line if you don't already have a place to put custom site JavaScript code:


scripts[] = site.js

Next create the file site.js in the same directory as THEMENAME.info and paste the following code, replacing REPLACE_WITH_STYLE_FROM_SNAZZYMAPS variable definition with a style array copied from SnazzyMaps or other source. The format is a JavaScript array that begins with "[" and ends with "]".


(function ($) {

  var mapstyle = REPLACE_WITH_STYLE_FROM_SNAZZYMAPS;

  /**
   * Apply styles to a Google map. This function waits until the Drupal GMap
   * module has finished creating the map (when Drupal.gmap.getMap() returns a
   * map instance instead of undefined variable) before applying the styles. If
   * necessary, use window.setInterval to wait for map to be ready.
   *
   * Please note that this is not the best possible solution for styling maps,
   * check back with us later for an improved solution to this issue:
   * http://monkeysatkeyboards.com/making-drupal-gmap-look-pretty
   *
   * @param mapid Map identifier. GMap module outputs it as a class on the map
   *        wrapper div, e.g... 'gmap-auto1map-gmap'. This can be a string with a
   *        single ID or an array with multiple IDs. The function only has any
   *        effect if an element is found in the document with a CSS class that
   *        matches this ID exactly.
   *
   * @param styles JavaScript styles array e.g.. from http://snazzymaps.com
   */
  function styleMaps(mapid, styles) {
    var mapids = (mapid instanceof Array) ? mapid : [ mapid ];
    for (var i in mapids) {
      if ($('.' + mapids[i]).length) {
        var gmap = Drupal.gmap.getMap(mapids[i]);
        if (typeof(gmap.map) != 'undefined') {
          gmap.map.setOptions({styles: styles});
        }
        else {
          var args = {
            gmap: gmap,
            styles: styles
          };
          args.iid = window.setInterval(function(args) {
            if (typeof(args.gmap.map) != 'undefined') {
              window.clearInterval(args.iid);
              args.gmap.map.setOptions({styles: args.styles});
            }
          }, 20, args);
        }
      }
    }
  }

  Drupal.behaviors.site = {
    attach: function (context, settings) {
      var maps = [
        'gmap-auto1map-gmap', // Names used by GMap Location
        'gmap-auto2map-gmap',
        'gmap-auto3map-gmap'
      ];
      styleMaps(maps, mapstyle);
    }
  };
}(jQuery));

Now flush your cache under Configuration -> Development -> Performance and enjoy your newly styled map!

Disclaimer

Please note that this solution ranks pretty low on the list of solutions presented in my last post, Why Drupal? The Coder's Perspective, and I am sure this is not the best way to achieve it. It works for now as a short term solution.

I suspect a better solution for this long term is to add support for this kind of style array to the GMap module itself. When I get some free time (Hah!) I will look at making a patch for GMap that would configure the settings in the admin and store them, and pass it through Drupal's regular JavaScript settings array. I'll update this post when a patch is available.

Please leave a comment if you have any suggestions on improving the above temporary solution or ideas for integrating these styles with GMap.

Fletch Fri, 12/13/2013 - 13:00

Drupal

WebDev

Google Maps

Why Drupal? The Coder's Perspective

Fletch — Wed, 11 Dec 2013 19:31:45 +0000

Why Drupal? The Coder's Perspective

Dries Buytaert, founder of Drupal, recently wrote about how it snaps together like Lego pieces, building something he calls "The Assembled Web".

Being more efficient in the way we assemble a website will allow us to focus on the things that matter more, like innovation and creativity. By standing on the shoulders of giants, we can make things look and operate more beautifully than we'd ever have expected.

This got us thinking about why we use Drupal. For us at Monkeys At Keyboards working with it is very close to the experience that Dries suggested. I love working with Drupal and something keeps me coming back to it for every website project. Drupal.org tells me that at the time of this writing I have been making Drupal websites for 7 years and 4 months.

Ewok village from lego.com

What we have learned is that some Drupal modules are flexible and adaptable. For example Views is easy to customize. My minor nitpick in Dries' otherwise darned fine idea is Drupal theming. Occasionally modules do not perform as expected so we have to change the theming to make it behave exactly how we want.

There are times when custom theming work is necessary to fulfill customer requirements or our own desire to reduce clumsiness in the user interface. Drupal modules sometimes are not quite designed with our exact usage in mind.

This is similar to the way the Ewok Village Lego kit has trouble making something other than the exact village that the Lego designers intended.

Fortunately, Drupal is not as rigid as Ewok Legos and there are often several workable solutions to the problem of changing how modules interact with people. As a developer, Drupal is a playground filled with equipment for teasing and tweaking the work of other people. This enables us to make it behave how we want it to.

This post could go very deep into describing how to use and not abuse the following features, but I have chosen to include a high level list of techniques that we use to glue Drupal modules together into a cohesive whole. The list is our order of preferred techniques when there are multiple options for changing things.

The first rule of theming is that if it can be done in CSS, it must be done in CSS. Normally we do this in a custom theme, which we discussed in a previous post. Be careful not to break mobile support!
Attempt to alter the HTML that Drupal is producing in a theme's template.php file using preprocessing hooks.
Create or modify theme templates to override default behavior.
Alter the behavior at the module level.
Use JQuery to rearrange or otherwise alter the DOM client side. Hax! This is a method of last resort, except for intentional uses such as AJAX.
Give up and write a custom solution using Drupal hooks, forms, and database features.

Luckily, in all but a very few cases, we don't make it to the last item on the list and write miles of custom code. CSS is powerful in modern browsers, so we take maximum advantage of this. Since CSS styling doesn't affect the operations of modules, we can focus on making websites look amazing. Stay tuned for case studies on the custom module solutions we have built.

Note: Next week we will hear about Laura the designer and project manager's take on "Why Drupal?"

Fletch Wed, 12/11/2013 - 11:31

Drupal

WebDev

Quick Guide to Drupal Subtheming

Fletch — Fri, 22 Feb 2013 08:36:51 +0000

Quick Guide to Drupal Subtheming

Drupal offers a fantastic mechanism for creating a new theme that builds on an existing theme. For example, if a Drupal theme does 99% of what you want, but you want to change the CSS or javascript in it, subtheming is a great answer. You can get started very quickly.

Why create a subtheme?

Let's just back up one second and talk about why you would want to use subtheming. If you're already convinced, then just skip below to the list of steps for creating a subtheme.

The site you are looking at right now, monkeysatkeyboards.com, is a subtheme of Zen. 90% of the work in it is CSS and Javascript customizations. So we focus on making the site look good instead of rewriting very similar HTML over and over.

When first encountering Drupal's theming system, you may have an urge to take an existing theme and just modify the files directly. While this works, it is not recommended. The primary reason is keeping your code up to date with the latest bug and security fixes. A good secondary reason is tidiness. It is cleaner to keep your customizations separated from existing themes.

If you just hack up an existing theme and then an issue is discovered in it and fixed by the original developer, how do you now apply that fix? The answer is that you have to find the exact changes in the original theme and apply them back into your own, a tedious and error prone process.

However if you used subtheming, then you can drop in the updated base theme (or really, just use the Drupal automatic update system) and this does not affect your custom code in any way. It keeps things separated and clean and really leverages the work that the original theme author is putting in to the project. For similar reasons you should not modify core or third party Drupal modules, you end up breaking the automatic updates mechanism.

To create a subtheme:

Find a base theme that you want to extend. If you want a plain theme and plan on overriding most of the functionality yourself, Zen or Omega are two fantastic base themes that don't have much in them by default, ready to make something highly custom. Otherwise pick a more rich visual theme for a base.
Create directory sites/all/themes/mytheme
Copy the info file from the base theme to the new theme, example: cp sites/all/themes/zen.info sites/all/themes/mytheme/mytheme.info . It should be named the same as your directory with a .info extension.
Copy screenshot.png from the base theme to your theme (or take an actual screenshot and crop it to that size).
Edit mytheme.info. Change the name and description and project. "project" should have the same name as your directory and the base filename of the .info file. Add line "base theme = [base theme project name]". The original value of "project" from this info file is what you put for the base theme value.
Remove the stylesheets and script lines from mytheme.info, they refer to files in the original theme. Add line "stylesheets[all][] = mytheme.css" and create file mytheme.css . Leave the list of regions, these are not inherited from the base theme.
Make a "templates" directory and an empty file called "template.php".
Enable your new theme in Drupal admin under "Appearance".

Using your subtheme:

Other theming guides around the web and on drupal.org will tell you to create templates inside the templates subdirectory or put functions into template.php. These files will override their equivelants in the original "base theme" and your "mytheme.css" will be included on every page view that uses your theme.

You can also now almost directly "hack" the files of the original theme. For example, copy sites/all/themes/zen/templates/node.tpl.php into sites/all/themes/mytheme/templates and hack that up. Now you are using your own custom node.tpl.php but everything else from Zen.

It's a good idea to try to minimize the amount of code copied from the original. For example, if you copy all of the templates and template.php from the original base theme, then you are not really leveraging subtheming at all. We want to take advantage of the HTML structure that the theme author has already put considerable time into. So the goal should be "let the base theme take care of as much as possible, only override when it's absolutely necessary." Much of the customization can be done in your subtheme's CSS file without involving a lot of custom HTML.

In a future blog post I will discuss some detailed tips and tricks to help you work with an existing theme, in order to truly leverage the work the the author put in to the base theme.

Fletch Fri, 02/22/2013 - 00:36

Drupal

WebDev

Subtheming