Skip to Content

drupal

Open Data and Beautiful Maps

This past weekend I attended the Pacific Northwest Drupal Summit and gave an introduction to open data and beautiful maps. I talked about open data, covered the creation of a map in under 10 minutes, and discussed how to create beautiful maps using advanced techniques like custom tilesets. The video is already online thanks to the hard work of Justin Carlson, posted on his blog here and embedded below:

Tylor Sherman: Open Data & Beautiful Maps from Carlson Media on Vimeo.

Paraphrasing some of the questions and comments at the end of the video:

Question 1: How does generating views with OpenLayers differ than with GMap?
Question 2: Can you use the Google Maps API when using OpenLayers and a Google Maps tileset?
Question 3: How does location.module differ from others storage methods? How do you decide which storage method to use?
Question 4: Can I use tiles to display polygon data and still interact with it?
Question 5: If I have a database of address how can I convert them into latitude and longitude?
Question 6: What other input data types are supported by mapping modules?
Question 7: Can I use a shapefile to generate an overlay?
Question 8: What other tilesets can I use with OpenLayers?
Question 9: Have you played with polygons and highly granular shapefiles?
Question 10: How did you get the Google Map API entry step into the install profile?
Question 11: Ben comments that using geo.module instead of text fields is helpful if you have a lot of data because it decreases the server load by speeding up your queries.

For the talk I created an install profile and drush make file to build a simple and lean Drupal mapping distribution, which for now I have named Quickmaps. The source code for the distribution is available at github.com/tylor/quickmaps. I am making the slides available as a PDF here and have been tracking my Mapnik and Quantum GIS source files at github.com/tylor/vancouver-mapping.

The inspiration for this talk comes from my Water! drinking fountains map for Vancouver. This is a map I created just over a year ago now and it has been really engaging to see it being discussed and used in so many different ways. Here is the original screencast showing how to set up a water fountain map in under ten minutes:

Water! from tylor on Vimeo.

I had a great time sharing this presentation and it led to some great conversations throughout the rest of the summit. Thanks to all of the organizers for putting on such a successful event!

Pager keys for Drupal and Views

About a half hour ago I found a really great script on Github for quickly browsing posts on a page. If you are on the homepage of my site, try typing the following hotkeys:

Key Action
h Next page
j Next post
k Previous post
l Previous page

If you have used the hotkeys in GMail or Google Reader, you will have likely used these shortcuts before. This usability pattern is showing up in quite a few places and I really like it. Take a look at how effective it is for browsing images on The Big Picture (make sure you're on a post), on Flickriver, and on FFFFOUND!.

Drupal is a great candidate for this pattern since quickly browsing through a list of nodes is quite common. Also, since Drupal comes with jQuery, adding the script wasn't too difficult. Here are some small adjustments to make it work.

This guide assumes that you are using Views to generate a list of nodes but it should be easy to adapt to other situations.

  1. Snag the jQuery version provided on Git and save it to your theme's directory.
  2. Add the page_keys.js to Drupal by adding the line scripts[] = paging_keys.js to your theme's .info.
  3. We have to make a few small adjustments to the script to make it play nice with Drupal. Go take a look at the settings array found on line 84 of paging_keys.js. Let's change it to the following:

    var config = {
      nodeSelector: '#main .node h2.node-title a',
      prevPageSelector: '.pager-previous a',
      nextPageSelector: '.pager-next a',
      pagingNavId: 'paging-nav',
      keyNext: 'j',
      keyPrev: 'k',
      keyNextPage: 'h',
      keyPrevPage: 'l',
      keyRefresh: 'r',
      additionalBodyClass: 'paging-keys',
      bottomAnchor: 'bottom'
    };

    This assumes that the list of nodes will be under the div '#main', but you will probably want to change this to be more specific. For my own site I've also used the view name in the selector to ensure that there is not any weird behaviour. The only other changes to the config array were for the Drupal pager.

  4. We want to add the anchor "bottom" to the last node of the View, allowing the script to move nicely between pages. To do this, we can add a small snippet to the node title link in node.tpl.php. Here is what my revised node title code looks like:

    <h2 class="title node-title">
      <a href="<?php echo $node_url; ?>"<?php if($view) { end($view->result)->nid == $node->nid ? print 'name="bottom"' : NULL; } ?>><?php echo $title; ?></a>
    </h2>

    This will check if we are displaying the last node for this view and add 'name="bottom"' to it's title link.

And you are done! Hopefully everything is working great. If you encounter problems, make sure that caching is turned off while you try to integrate this.

Update and content elsewhere

I have been pretty busy so far this summer and have been neglecting updates to this blog. I have a couple half written blog posts that I hope to get up soon: a summary of my user centred design course from last spring, a summary (and maybe discussion) of Jaron Lanier's essay Digital Maoism, a discussion of some of the text editors I've been using, and maybe an outline of my current ideas for a personal “toolbox” for business development. No promises on any of these, but if I hear requests I'm sure they will come up sooner.

I have been creating content elsewhere and here are a couple of posts on the Affinity Bridge blog that I'm proud to share:

I haven't really been taking photos with my good camera either but I will leave you with some snaps of circles from my iPhone.

photo.jpg photo.jpg

photo.jpg photo.jpg

photo.jpg photo.jpg

photo.jpg photo.jpg

Business Cards for Violin and Stuff - Music for weddings

Casey and I spent some time over the weekend with our friend Adrienne putting together a brand for their little music collective, which is named Violin and Stuff. Casey plays cello and Adrienne plays violin and together they play wedding music and are also available for studio work. They are both classically trained but what makes them special is their indie-feel and ability to play creatively by ear. They offer a base of normal wedding pieces and will also learn your requests to make each performance unique.

We created a nice logo that has some of the feel of what they represent. Casey really wanted a highly typographic logo with a serifed, traditional font and we thought it might be neat to incorporate the F-hole from a violin or cello. We started with some more traditional fonts like Caslon, Garamond, and Times but none looked quite right. We eventually drifted towards Jos Buivenga's fantastic free font, Fontin. To get an F-hole we needed a nice italic F. Fontin's F wasn't quite what we wanted so we ended up blending together the stem from Garamond with the serifs from Fontin. Here is our final result:

Violin and Stuff

Next we needed to make some nice business cards so that they can market themselves in the real world (a lot of their business will be word of mouth). We pictured something handcrafted and because Casey had some of the equipment hanging around, ended up silkscreening them. We bought neon pink paint and some nice paper from Opus. We had some friends over and had a little business card making party — and with a lot of help from our friend Caitlin they turned out great:

DSC_8003 DSC_8011

DSC_8013 DSC_8017

DSC_8018 DSC_8026

DSC_8028 DSC_8037

DSC_8006 DSC_8041

DSC_8046 DSC_8060

DSC_8059 DSC_8065

Finally, since all that the business cards have is a URL we needed to get the site up as soon as possible. I created a design mockup a few weeks back and it was just a matter of translating it to real HTML and CSS. It is built in Drupal and should be easy to extend and for Casey and Adrienne to change when they like. Now that the basics are done, I would eventually like to get a Muxtape-like player up in order to easily sample their music.

Violin and Stuff Website

I'm very happy with how this turned out. We created a strong brand for them to market themselves and we have so many good ideas on how to build on this in the future — we're even thinking of a photo shoot sometime soon!

EECE 375/474 Project

For the past three and a half months I have been working with a group of my engineering peers at UBC to build a complete system for managing a library. We did our final demo today and everything went smoothly. The system uses RFID tags to keep track of books and communicates wirelessly using a ZigBee module. There is a built in charging circuit which helps keep the five NiMH powered up and an AtMega88 microcontroller to handle all the logic. Everything else is taken care of by a Drupal website with a few custom modules. Here is a quick demo of the unit:

The system supports adding new users (who have library cards with an embedded RFID tag), inserting new books, checking books in and out, passively finding lost books, and providing directions to find books in the library. Here are a few photos of the final construction process:

DSC_7316 DSC_7288 DSC_7286

DSC_7299  DSC_7290

DSC_7283  DSC_6684

I would say the project was a great success; we finished our integration testing early on and even had time to make library cards and build a nice metal case. Lots of credit goes out to the other members of my team: Aaron, Henry, Roland, and Steve. Very glad to be done!

Busy busy busy

It's been a very busy past couple of weeks. I finished up a co-op report, helped present at DrupalCamp Vancouver, and started my next co-op job at Raincity Studios.

DSC_4487

DrupalCamp was really great and I was glad to have presented on the first day; the stress of presenting and submitting a co-op report gave way to some great talks. Highlights included:

My new job at Raincity Studios is pretty exciting. We're building on the SMS Framework module to provide some better Drupal interaction with SMS. There's a public code repository here. Looking forward to building on this and it seems like there are already a lot of people interested in what we're doing. Expect a post on the Raincity Studios blog about this sometime soon.

Drupal module list currently in use on this website

Note: This is an old article and my site has changed a lot. At the time, the codebase was using Drupal 5.x and this is still a good reference for that.

I've heard before that one of the easiest ways to contribute to the Drupal community is to write up a big ol' list of the modules you use in Drupal. So I'm going to do some more meta-blogging and list the modules currently used to power this site and why.

Two common modules that are missing from my install are TinyMCE and CCK. TinyMCE just outputs awful HTML and for me it's not worth the wrangling. I wish there was a better way but I currently edit all of my content as raw HTML. On my list of things to do is to integrate CodePress, which is a nice little syntax highlighter for textareas. I'd love to pair up a syntax highlighter with some simple autocompletion... that to me would be perfect for advanced content editing. There's a stub here, so maybe that can built on. Also missing is CCK. This module is a part of most Drupal installations but so far I haven't needed it. Any custom content types I have were defined in their own module.

Without further ado, here is my module list:

Core

  • Blog — provides simple blog functionality
  • Comment — provides commenting
  • Menu — provides menu items, primarily used for admin navigation but also holds custom menus for 'People' and 'Sources' in the footer of each page.
  • Statistics — provides the number of reads found in the info for each post, I used Google Analytics for real site statistics
  • Taxonomy — provides tagging for each post. I only have one vocabulary for freetagging of every piece of content.

Bookmarklet

This is a series of custom modules that allow me to publish using a 'bookmarklet' (a link from you bookmarks toolbar). I am hoping to one day wrap this into a tumblr-like install profile and integrate with CCK.

  • Bookmarklet — bookmarklet functionality
  • Bookmarklet Link — defines a custom content type for links
  • Bookmarklet Quote — defines a custom content type for quotes

Image

  • Image — for handling images within Drupal, mostly default settings
  • Image Import — comes bundled with image module for importing batches from FTP, only used this once but it worked well
  • Image assist — inserting images into content is still tricky in Drupal and for me this is the easiest solution. Another drop-in solution to the same problem would be IMCE.

Other

  • Akismet — wouldn't leave home without this one monitoring spam
  • Comment Notify — allows for follow up emails to users who leave comments
  • Comment Mail — sends me an email when a comment is posted to the site, probably could handle this with actions but this works fine for now
  • Google Analytics — simple Google Analytics integration for the site.
  • Open ID — trying to embrace the future with Open ID. Still working on integrating this module since I would like the login form to show up inline with comments. This site is mostly for blogging and not community so that would probably make most sense. Excited to see this module eventually work as an Open ID server.
  • Theme Settings API — to take advantage of some of the Zen theme's advanced doings
  • Trackback — this is to ping blogs that I have linked to in an attempt to build some SEO
  • Tylor Helper — just a custom helper module to do form alters. It currently adds some extra CSS classes to the comment form.

SimpleFeed

I've used this for a while to import my flickr, delicious, and twitter feeds. This module works great but I will eventually move to the much more powerful FeedAPI module.

  • SimpleFeed — defines the SimpleFeed engine
  • SimpleFeed Item — defines the feed item content type

Views

I use views to create my custom front page and tumblog page by restricting what types of content can appear on what page.

  • Views — main Views module
  • Views RSS — creates RSS feeds for my custom views
  • Views UI — default UI bundled with the module

And that's it! I'd like to see what other modules people are using, so leave me a comment if I missed anything good or if you compiled your own list. Also, if anyone has time to work on a CodePress module, I'd like to collaborate. I think having an extra set of hands would help bring some focus.

Syndicate content