Above is the signup form from Brompt, the blog reminder service I built a few years ago for undisciplined bloggers like myself. I'm very proud of this form: it's clear, it contextualizes the data being requested within the functionality of the application, and it drives people to action.

There are a few areas for improvement: asking for your RSS feed rather than your blog's URL is a bit roundabout (autodetection is still in the feature parking lot) and it could use a little explanation at the top in case you bypassed the front page's explanation of the service.

Another reason I'm proud of this form is that it was built using Drupal's Forms API---and Drupal uses awful, unintuitive forms like they were going out of style.

Related posts:

1. The 48 hour mobile web app: Drunken Stumble Last weekend I participated in the Boston Hack Day Challenge, a 48 hour (so I’m not sure why they called...
2. 7 years in Boston This August marks the completion of my 7th year in Boston, with the loose exceptions of the 1 month I...
3. Meet AmeriCorps no more This month, the lights on Meet AmeriCorp—a directory and messaging service for AmeriCorps members that launched in 2006—has gone dark...

Last weekend I participated in the Boston Hack Day Challenge, a 48 hour (so I'm not sure why they called it a hack day) competition sponsored by the Boston Globe and held in the MassChallenge workspace. The goal of the event was to develop tools that would improve the lives of Bostonians. My team won "Best Mobile App" as well as the "Crowd Favorite" award for the pub crawl app we built: Drunken Stumble.

Update: You can also read about the process from some of my teammates: @nikibrown on the design, @unruthless on frontend and whip-cracking, and @mikemiles86 on the backend and interface.

(And if you're wondering how a pub crawl app would improve the lives of Bostonians, you must not be from Boston.)

About the Project

Our team formed Friday night. On the frontend we had @nikibrown (designer) and @unruthless (frontend developer)---who knew each other prior to the event. On the backend we had @mikemiles86 (application developer) and myself (API and interface developer)---who happened to be standing near the cheese table.

Together---and with the muse of the open bar---we came up with the idea of creating an application that would help people perform a pub crawl. While other teams proposed concept demos and APIs, we set our goal to be the delivery of a complete product by the end of the weekend. Defining a minimum viable product meant keeping a lot of great ideas in the parking lot (like drink lists and multi-user crawls) but helped us focus on delivering a tight, attractive and functional pub-crawl application that lets you:

• use your smartphone to find nearby pubs
• get walking directions to that pub
• invite your friends to the pub via social media (Twitter and Facebook)
• find the next pub for your crawl and get directions to there from your current pub
• track your nightly progress (or revisit it the next morning)
• call a cab home at the end of the night

About the App

We built Drunken Stumble as an HTML5 mobile web application---testing it on both iPhone and Android. As an HTML5 mobile web app, we can access smartphone features (like GPS and Portrait/Landscape modes) as well as quickly write, test and deploy. Both @mikemiles86 and myself are Drupal/PHP developers so (with some reservations) we decided to use Drupal as a framework---using its paths, forms, database and template systems and nothing else.

I focused most of my development on interfacing with external APIs. Originally we planned on using Yelp to provide business data for locating pubs, but their API is extremely limited with only 100 lookups per day. Fortunately, we found an awesome service called SimpleGeo that currently offers unlimited lookups for businesses based upon location. Using SimpleGeo we were able to quickly write a rich, location-aware application that works anywhere in the United States, not just in Boston.

Once we knew we had a source for business data, the next step was telling the application where you are. HTML5 offers native geolocation which means we can (politely) request exact location data based on your smartphone's GPS. If your smartphone doesn't have GPS (or it's turned off) you can type in an address and we use Google Maps to geocode it into a latitude/longitude. If you do use your GPS, we also do a reverse geocode (again using Google Maps) to show you your street-level address to confirm that's actually where you are ("42.331528,-70.94425" could be in the middle of Boston Harbor for all I know).

Google Directions is the special sauce that ties it all together. We provide your starting location and the location of your next pub and Google Directions provides walking instructions and waypoints along the way. We display the walking directions and overlay the waypoints on top of a (static) Google Map. Unfortunately, Google Direction's API also has a rather low limit of lookups (2,500/day), so should we go over our limit (as we did about 2am Sunday morning), we alternatively display a link that will launch your smartphone's native maps app (or push you to Google Maps directly) to get directions there.

There was one last benefit of using SimpleGeo's well-populated business database: our app's design isn't limited to just pubs. For example, we decided rather late in the process to offer a list of local taxicab phone numbers at the end of the pub crawl. Because we had already tapped into the SimpleGeo API, we just needed to filter nearby businesses for "taxis", rather than "bars & pubs". Which is an important thing to keep in mind: with a few minor changes, our app can facilitate routing for any type of business or geographically based event---like a taco crawl or artists' open studios.

About the process

The process was awesome. We got down to business about 8:00pm on Friday night and went live at 1:45pm on Sunday. Sure, we missed deadlines, our final feature list shrunk (and the parking lot grew), the architecture is far from "robust", and the final design didn't match our initial sketches (it was better!), but we met our goal of delivering a complete and functional product.

I think it was our focus on "completeness" that helped us win more awards than any other team (2 awards). Other than a few all-hands decisions, our small and diverse team focused separately on our individual areas and integrated as necessary---@mikemiles86 and I used Git to sync progress on the backend, while I think the frontend mostly looked over each other's shoulders. For me that meant moving from API wrangling at the start of the project to templating at the end. I also can't overstate the value of @mikemiles86 pulling an all nighter on Saturday (the rest of us ejected at 3am for about 4 hours of sleep)

The Crowd Favorite award was not only a function of our easy-to-understand concept, but also the stellar work of our frontend team. @nikibrown quickly produced strong branding and interface mockups that were key to creating early buzz: as other teams walked around and mingled, we could easily show off our idea. @unruthless became our de facto project manager and spokeswomen, explaining the app to visitors and pushing progress updates to Twitter and the #bostonhack hashtag for the event. We also lived our values, bringing in a wide selection of beer to carry us through Saturday and Sunday (and sharing it didn't hurt our chances of winning the Crowd-Favorite award either).

About the future

It's only been a few days since the event but we've kept up a steady stream of chatter over Twitter and pushed a few minor updates to the server too. The intensive hack model worked really well for building a minimally viable product, but time will tell whether we can keep the momentum and updates coming---turning Drunken Stumble into a maximally functional application.

In the meantime though, happy stumbling, sober or otherwise.

Related posts:

1. A modest web-app proposal Advanced algorithms analyze your social graph to provide deep introspection through animal shapes and SEO-optimized pithy sayings. Once we close Series...
2. 7 years in Boston This August marks the completion of my 7th year in Boston, with the loose exceptions of the 1 month I...
3. A form from my favorites Above is the signup form from Brompt, the blog reminder service I built a few years ago for undisciplined bloggers...

One of the coolest pieces of Drupal is how simple it is to quickly enter a street address and have it show up on a dynamic map on your website using Location and GMap modules. To make it happen, a lot of stuff goes on behind the scenes. Unfortunately, in typical Drupal fashion, when something goes wrong, you aren't provided much information to fix it.

A big issue if you're having regular users enter information into your website is malformed addresses that can't be automatically converted into latitude/longitude coordinates (geocoding) for display on a map. Out of the box, the Location module doesn't give you a warning if it's unable to geocode an address. On my website MappingAccess.org--a community maintained directory of Cable Access Television stations---I average about an email a week from a visitor saying "I added my station but it's not showing up on the map". Usually it's a simple matter of using a PO Box or wacky abbreviation, but the website itself should be telling them there is a problem, not me.

So I whipped up a simple module that checks everytime a new station is submitted to see if the address was properly geocoded. If not, it displays a message with some tips on how to correct the issue.

You can download the module for Drupal 6.x by clicking here.

To be nitpicky, I'd rather the message show up during the validation stage---before the node is submitted---with the option to say "Please edit the address or press submit again to publish with the understanding that it will not show up on the map." Unfortunately, in Drupal 6 you can't make changes to node form during the validation stage---which I would use to set a flag in a hidden form element so that the validation message only gets triggered once. The current implementation calls a drupal_set_message in hook_nodeapi's insert/update operations. It can be enabled on a per-content-type basis (on the Content Type Configuration screen).

Related posts:

1. The 48 hour mobile web app: Drunken Stumble Last weekend I participated in the Boston Hack Day Challenge, a 48 hour (so I’m not sure why they called...

One of ReCaptcha’s problems is that the words are sometimes hard to read. To deal with that, I used this tip from a Stumbleupon developer in the comments of this post entitled ReCAPTCHA’s quality is going down? : putting a link to reload—Recaptcha.reload()—the CAPTCHA in the explanation. To do that, I pasted this into the Challenge Description setting on the CAPTCHA admin page:


To prevent spam, please type the two words you see below separated by a space. <a href="javascript:Recaptcha.reload();" title="Get a new set of words">Can't read the words?</a>


I also used CSS to hide the fieldset border box and title from the comments to cut down on the cruft too.

No related posts.

Update: this functionality can now be achieved with the iTweak_upload module . Thanks to Damon for the tip!

I made a custom override for Drupal 6.x's Upload.module's attachments table that is displayed at the bottom of a node when you create file attachments. That table is, in my opinion, one of the ugliest common and default presentations in Drupal core. Below is an example of the before and after:

To use it, unzip and drop the included folder into your active theme's directory (e.g. /sites/default/all/garland), it should take effect without any other modifications---though you may have to reset the theme cache (goto admin/build/themes and click save without making any other changes).

Click Here to Download (shiny_upload.zip)

Also, I don't know what the name is for these types of theme overrides: it's not a module, and it's not a whole theme. I posted this to a Drupal Group that, I think, calls them "Themer Packs".

The icon code is based on the CCK filefield module---but the current 6.0 version is kind've clunky and I wanted to port it to the core Upload module. The namespace is "shiny_upload".

Also, as an aside, the reason island94.org doesn't currently have this enabled is because it's still running on Drupal 5.x branch

Related posts:

1. The 48 hour mobile web app: Drunken Stumble Last weekend I participated in the Boston Hack Day Challenge, a 48 hour (so I’m not sure why they called...
2. A form from my favorites Above is the signup form from Brompt, the blog reminder service I built a few years ago for undisciplined bloggers...

http://aspirationtech.org/events/mntp-sf

http://mntp.aspirationtech.org/index.php/Event_Agenda

Becket divx …maybe I’ll clean this up someday.

—-
!!!Basic Stages of a Project
1. Initiate
* define project
* talk about start and end points, budget, participants/roles, timeline
2. Plan
* defining scope, requirements, use cases
3. Implement

4. Monitor

5. Close
*how do you know when you’re done with the project you’re working on?

*upkeep/maintenance phase?

*in “waterfall” style projects, there is just one of each step
*in “agile” style projects, the plan -> implement -> monitor cycle repeats
*know which style project it is at the beginning!

—-
!!!Content inventories
For redesign processes, figure out what content and navigation is currently present and how it’s organized. Include things like creation dates and web statistics; talk about the value of old content to users. This can affect how much of the content is migrated, and can give organizations insight into how they intend to communicate vs. how they’re actually communicating. For example, one PM working on the ACLU site inventoried 15,000 pages; the ACLU decided to migrate 8,000 of those, and rethought their style of technical & legal language to a more personal approach.

—-
!!!Scope Creep
*postpone things to phase 2
*define project endpoints in the “initiate” phase
*specifications that include what ”won’t” be included
*review scope and recently developed features regularly
*revisit goals to regain focus as scope creep starts to take over
*saying no: make sure that people are aware of the depth of their requests, especially if they’re out of scope. inform people about research or dev time required just to estimate cost for a feature.

—-
!!!Recognizing Impending Doom
*chunking projects: dividing projects into smaller chunks will make overages more obvious.
*development time = developer + QA + PM + client + risk + padding.
*define checkin points in the web plan
*be upfront/honest/immediate when you’re feeling uncomfortable
*be proactive about input–consider what input people will have before you ask them for it
*one attendee mentioned that they “had been trying to stay with this FOSS community which was politically important, but they were making incredibly bad engineering decisions” and they eventually had to break with the FOSS group.
*beware of working with volunteers who aren’t web professionals
*notice the point where transparency starts to drop

—-
!!!Client Panic
*lack of communication: presenting a product that the client hasn’t seen before and they aren’t happy
*role changes on either the client or dev side can trigger less dialouge
*when you’re behind, don’t just work harder: restructure dev roles, reopen lines of communication with client
*sign of panic: abusive emails. one dev mentioned having a “2 strike rule” for abusive communication; he immediately calls higher-ups re: lack of tolerance for abusive/blame email/interaction
*learn how to identify ”good” things about a client relationship

”‘recovery stragegy”’: regaining trust is remotely is difficult. Highly structured communication can help; for example, frequent meeting at consistent times with a repeated agenda.

#highly structured communication
#revisit goals
#talk to other members of the client org
#re-structure the project
#fire the client

—-
!!!Turning a Project into a Product
*forces you into more standardization
*documentation becomes exponentially more important
*languages & international users: translators can be your most active outside contributors

—-
!!!Other
*build test cases alongside app development
*involve real-life people–external stakeholders–in the process
*make sure there is someone within the nonprofit who can maintain the solution
*can you narrow your website’s focus? working with the client to focus the project; can be used to reduce the feature set and budget, AND/OR to clarify the client’s communication strategy.
*get clients to take notes at meetings and send them to you so that you know what they’re taking away/expecting
*discussions about “which tools?” can obscure discussions of needs
*blog or message board for a project: for both issues and for cheerleading
*“the smallest organizations need the most hand-holding“
—-
EOF

No related posts.

• John Birch Society

No related posts.

• WidgEditor — stupid simple
• TinyMCE — way complicated powerful

But Super Capers neither of them work well enough for me to want to use them. The trade-off for using these is that it’s easy to make pretty text, but if you ever need to manually edit, it’s incredibly painful. The biggest problem is that they don’t make new lines for paragraph breaks, smashing everything together into one huge, ugly block. And since Drupal has a nice, built-in filter for creating paragraph elements, it’s redundant (and infuriating).

The only markup you need is bold, emphasis, links, pictures and a way to turn it off. WordPress seems to get it.

No related posts.

0
1|Checkbox title

No related posts.

I recently did some Drupal development work for Cambridge Community Television. As part of the really amazing work they are doing combining new media with traditional Cable Access Television, CCTV has been mapping videos their members produce. They call this project the Mediamap.

I was really excited to work on the Mediamap with CCTV because of my long involvement with Cable Access Television, most notably the now-defunct DigitalBicycle Project and the community maintained directory of Cable Access Stations I built and administer: MappingAccess.com.

Despite CCTV running their website on Drupal, their first proof-of-concept version of the Mediamap was created manually, using the very capable Mapbuilder.net service and copy-and-pasted embedded flash video. While simple from a technological standpoint, they were running to problems optimizing the workflow of updating the map; changes had to be made via the Mapbuilder.net interface, with a single username and password, then manually parsed to remove some coding irregularities, and finally copy and pasted whole into a page on their website.

I was asked to improve the workflow and ultimately take fuller advantage of Drupal's built-in user management and content management features. For instance, taking advantage of CCTV's current member submitted video capabilities and flowing them into the map as an integrated report, not a separate and parallel system.

In my discussions with them, a couple of issues came up. Foremost was that CCTV was running an older version of Drupal: 4.7. While still quite powerful, many newer features and contributed modules were not available for this earlier release. The current version of Drupal, 5.1, has many rich, well-developed utilities for creating reports and mapping them: Content Construction Kit (CCK) + Views + Gmap + Location. As it was though, with the older version, I would have to develop the additional functionality manually.

The following is a description, with code examples, of the functionality I created for the Mediamap. Additionally, following this initial development, CCTV upgraded their Drupal installation to 5.1, giving me the opportunity to demonstrate the ease and power of Drupal's most recent release---rendering blissfully obsolete most of the custom coding I had done.

Location and Gmap was used in both versions for storing geographic data and hooking into the Google Map API. One of Drupal's great strengths is the both the diversity of contributed modules, and the flexibility with which a developer can use them.

Adding additional content fields

CCTV already has a process in which member's can submit content nodes. In 4.7, the easiest way to add additional data fields to these was with a custom NodeAPI module. CCTV was interested in using embedded flash video, primarily from Blip.tv, but also Google Video or YouTube if the flexibility was needed. To simplify the process, we decided on just adding the cut-and-paste embed code to a custom content field in existing nodes.

To do this, I created a new module that invoked hook_nodeapi:


/**
* Implementation of hook_nodeapi
*/
function cambridge_mediamap_nodeapi(&$node, $op, $teaser, $page) {
switch ($op) {

case 'validate':
if (variable_get('cambridge_mediamap_'. $node->type, TRUE)) {
if (user_access('modify node data')) {
if ($node->cambridge_mediamap['display'] && $node->cambridge_mediamap['embed'] == '') {
form_set_error('cambridge_mediamap', t('Media Map: You must enter embed code or disable display of this node on the map'));
}
}
}
break;

case 'load':
$object = db_fetch_object(db_query('SELECT display, embed FROM {cambridge_mediamap} WHERE nid = %d', $node->nid));

$embed = $object->embed;
$embed_resize = cambridge_mediamap_resize($embed);

case 'view':
break;
}
}


As you can see, there is a considerable amount of coding required, from defining the form, validating input and configuring database storage and retrieval calls.

Now that we have the glue for the custom field, we have to configure what node types that custom field appears on. Additionally, we need to set up administrative settings to configure where that custom field will appear, and lastly insert that field into the node edit screen:


/**
* Implementation of hook_form_alter
*/
function cambridge_mediamap_form_alter($form_id, &$form) {
// We're only modifying node forms, if the type field isn't set we don't need
// to bother.
if (!isset($form['type'])) {
return;
}

//disable the Gmap module's location map for unauthorized users
//unfortunately Gmap.module doesn't have this setting
if (isset($form['coordinates'])) {
if (!user_access('modify node data')) {
unset($form['coordinates']);
}
}

// Make a copy of the type to shorten up the code
$type = $form['type']['#value'];

// Is the map enabled for this content type?
$enabled = variable_get('cambridge_mediamap_'. $type, 0);

}
break;
}
}


As you can see, that's a lot of lines of code for what we essentially can do, in Drupal 5.1 with CCK. CCK allows you, graphically through the Drupal web-interface, to create a new content field and add it to a node type; it takes about a minute.

Building the Map

The primary goal of rebuilding the Mediamap using native Drupal was workflow optimization: it was frustrating to submit information both within Drupal and then recreate it within Mapbuilder. In essence, the map should be just another report of Drupal content: you may have a short bulleted list of the top five articles, a paginated history with teasers and author information, or a full-blown map, but most importantly, all of it is flowing dynamically out of the Drupal database.

The Gmap module provides many powerful ways to integrate the Google Map API with Drupal. While Gmap for 4.7 provides a default map of content it would not provide the features or customizability we desired with the Mediamap. Instead, one of the most powerful ways to use Gmap is to hook directly into the module's own API-like functions:


/**
* A page callback to draw the map
*/
function cambridge_mediamap_map() {
$output = '';

//Collect the nodes to be displayed
$results = db_query('SELECT embed, nid FROM {cambridge_mediamap} WHERE display = 1');

//Initialize our marker array
$markers = array();

//check to see what modules are enabled
$location_enabled = module_exist('location');
$gmap_location_enabled = module_exist('gmap_location');

return gmap_draw_map($map);
}

As you can see, this is quite complicated. Drupal 5.1 offers the powerful Views module, which allows one to define custom reports, once again graphically from the Drupal web-interface, in just a couple minutes of configuration. The gmap_views module, which ships with Gmap, allows one to add those custom reports to a Google Map, which is incredibly useful and renders obsolete much of the development work I did.

On displaying video in maps

In my discussions with CCTV, we felt it most pragmatic to use the embedded video code provided by video hosting services such as Blip.tv. While we could have used one of the Drupal video modules, we wanted the ability to host video offsite due to storage constraints. While I was concerned about the danger of code injection via minimally validated inputs, we felt that this would be of small danger because the content would be maintained by CCTV staff and select members.

The markers were themed using the embedded video field pulled from the Drupal database, along with the title and a snippet of the description, all linking back to the full content node.

/**
 * A theme function for our markers
 */

function theme_cambridge_mediamap_marker($node) {

  $output = '
';
  $output .= '
' . l($node->title, 'node/' . $node->nid) . '

';
  $output .= '
' . $node->cambridge_mediamap['embed_resize'] . '

';
  $output .= '

';

  return $output;
}

With Drupal 5.1 and Views, we still had to override the standard marker themes, but this was simple and done through the standard methods.

One of the most helpful pieces was some code developed by Rebecca White, who I previously worked with on Panlexicon. She provided the critical pieces of code that parsed the embedded video code and resized it for display on small marker windows.

/**
 * Returns a resized embed code
 */
function cambridge_mediamap_resize($embed = '') {
  if (!$embed) {
    return '';
  }

  list($width, $height) = cambridge_mediamap_get_embed_size($embed);

  //width/height ratio
  $width_to_height = $width / $height;

  $max_width = variable_get('cambridge_mediamap_embed_width','320');
  $max_height = variable_get('cambridge_mediamap_embed_height','240');

  //shrink down widths while maintaining proportion
  if ($width >= $height) {
    if ($width > $max_width) {
      $width = $max_width;
      $height = (1 / $width_to_height) * $width;
    }
    if ($height > $max_height) {
      $height = $max_height;
      $width = ($width_to_height) * $height;
    }
  }
  else {
    if ($height > $max_height) {
      $height = $max_height;
      $width = ($width_to_height) * $height;
    }
    if ($width > $max_width) {
      $width = $max_width;
      $height = (1 / $width_to_height) * $width;
    }
  }

  return cambridge_mediamap_set_embed_size($embed, intval($width), intval($height));
}

/**
 * find out what size the embedded thing is
 */
function cambridge_mediamap_get_embed_size($html) {
	preg_match('/]*width(\s*=\s*"|:\s*)(\d+)/i', $html, $match_width);
	preg_match('/]*height(\s*=\s*"|:\s*)(\d+)/i', $html, $match_height);

	return array($match_width[2], $match_height[2]);
}

/**
 * set the size of the embeded thing
 */
function cambridge_mediamap_set_embed_size($html, $width, $height) {
	$html = preg_replace('/(<(embed|object)\s[^>]*width(\s*=\s*"|:\s*))(\d+)/i', '${1}' . $width, $html);
	$html = preg_replace('/(<(embed|object)\s[^>]*height(\s*=\s*"|:\s*))(\d+)/i', '${1}' . $height, $html);

	return $html;
}

/**
 * returns the base url of the src attribute.
 * youtube = www.youtube.com
 * blip = blip.tv
 * google video = video.google.com
 */
function cambridge_mediamap_get_embed_source($html) {
	preg_match('/]*src="http:\/\/([^\/"]+)/i', $html, $match_src);
	return $match_src[1];
}

The Wrap-Up

While it may not seem so from the lines of code above, developing for Drupal is still relatively easy. Drupal provides a rich set of features for developers, well documented features, and strong coding standards---making reading other people's code and learning from it incredibly productive.

Below is the entirety of the custom module I developed for the 4.7 version of the CCTV Media Map. Because it was custom and intended to be used in-house, many important, release worthy functions were omitted, such as richer administrative options and module/function verifications.

 'cambridge_mediamap',
      'title' => t('Mediamap'),
      'callback' => 'cambridge_mediamap_map',
      'access' => user_access('access mediamap'),
    );
  }
  return $items;
}

/**
 * Implementation of hook_nodeapi
 */
function cambridge_mediamap_nodeapi(&$node, $op, $teaser, $page) {
  switch ($op) {

    case 'validate':
      if (variable_get('cambridge_mediamap_'. $node->type, TRUE)) {
        if (user_access('modify node data')) {
          if ($node->cambridge_mediamap['display'] && $node->cambridge_mediamap['embed'] == '') {
            form_set_error('cambridge_mediamap', t('Media Map: You must enter embed code or disable display of this node on the map'));
          }
        }
      }
      break;

    case 'load':
      $object = db_fetch_object(db_query('SELECT display, embed FROM {cambridge_mediamap} WHERE nid = %d', $node->nid));

      $embed = $object->embed;
      $embed_resize = cambridge_mediamap_resize($embed);

      return array(
        'cambridge_mediamap' => array(
          'display' => $object->display,
          'embed' => $embed,
          'embed_resize' => $embed_resize,
         )
      );
      break;

    case 'insert':
      db_query("INSERT INTO {cambridge_mediamap} (nid, display, embed) VALUES (%d, %d, '%s')", $node->nid, $node->cambridge_mediamap['display'], $node->cambridge_mediamap['embed']);
      break;

    case 'update':
      db_query('DELETE FROM {cambridge_mediamap} WHERE nid = %d', $node->nid);
      db_query("INSERT INTO {cambridge_mediamap} (nid, display, embed) VALUES (%d, %d, '%s')", $node->nid, $node->cambridge_mediamap['display'], $node->cambridge_mediamap['embed']);
      break;

    case 'delete':
      db_query('DELETE FROM {cambridge_mediamap} WHERE nid = %d', $node->nid);
      break;

    case 'view':
      break;
  }
} 

/**
 * Returns a resized embed code
 */
function cambridge_mediamap_resize($embed = '') {
  if (!$embed) {
    return '';
  }

  list($width, $height) = cambridge_mediamap_get_embed_size($embed);

  //width/height ratio
  $width_to_height = $width / $height;

  $max_width = variable_get('cambridge_mediamap_embed_width','320');
  $max_height = variable_get('cambridge_mediamap_embed_height','240');

  //shrink down widths while maintaining proportion
  if ($width >= $height) {
    if ($width > $max_width) {
      $width = $max_width;
      $height = (1 / $width_to_height) * $width;
    }
    if ($height > $max_height) {
      $height = $max_height;
      $width = ($width_to_height) * $height;
    }
  }
  else {
    if ($height > $max_height) {
      $height = $max_height;
      $width = ($width_to_height) * $height;
    }
    if ($width > $max_width) {
      $width = $max_width;
      $height = (1 / $width_to_height) * $width;
    }
  }

  return cambridge_mediamap_set_embed_size($embed, intval($width), intval($height));
}

/**
 * find out what size the embedded thing is
 */
function cambridge_mediamap_get_embed_size($html) {
	preg_match('/]*width(\s*=\s*"|:\s*)(\d+)/i', $html, $match_width);
	preg_match('/]*height(\s*=\s*"|:\s*)(\d+)/i', $html, $match_height);

	return array($match_width[2], $match_height[2]);
}

/**
 * set the size of the embeded thing
 */
function cambridge_mediamap_set_embed_size($html, $width, $height) {
	$html = preg_replace('/(<(embed|object)\s[^>]*width(\s*=\s*"|:\s*))(\d+)/i', '${1}' . $width, $html);
	$html = preg_replace('/(<(embed|object)\s[^>]*height(\s*=\s*"|:\s*))(\d+)/i', '${1}' . $height, $html);

	return $html;
}

/**
 * returns the base url of the src attribute.
 * youtube = www.youtube.com
 * blip = blip.tv
 * google video = video.google.com
 */
function cambridge_mediamap_get_embed_source($html) {
	preg_match('/]*src="http:\/\/([^\/"]+)/i', $html, $match_src);
	return $match_src[1];
}

/**
 * Implementation of hook_form_alter
 */
function cambridge_mediamap_form_alter($form_id, &$form) {
  // We're only modifying node forms, if the type field isn't set we don't need
  // to bother.
  if (!isset($form['type'])) {
    return;
  }

  //disable the Gmap module's location map for unauthorized users
  //unfortunately Gmap.module doesn't have this setting
  if (isset($form['coordinates'])) {
    if (!user_access('modify node data')) {
      unset($form['coordinates']);
    }
  }

  // Make a copy of the type to shorten up the code
  $type =  $form['type']['#value'];

  // Is the map enabled for this content type?
  $enabled = variable_get('cambridge_mediamap_'. $type, 0);

  switch ($form_id) {
    // We need to have a way for administrators to indicate which content
    // types should have the additional media map information added.
    case $type .'_node_settings':
      $form['workflow']['cambridge_mediamap_'. $type] = array(
        '#type' => 'radios',
        '#title' => t('Cambridge Mediamap setting'),
        '#default_value' => $enabled,
        '#options' => array(0 => t('Disabled'), 1 => t('Enabled')),
        '#description' => t('Allow the attaching of externally hosted imbedded video to be displayed in a map?'),
      );
      break;

    case $type .'_node_form':

      if ($enabled && user_access('modify node data')) {
        //create the fieldset
        $form['cambridge_mediamap'] = array(
          '#type' => 'fieldset',
          '#title' => t('Media Map'),
          '#collapsible' => TRUE,
          '#collapsed' => FALSE,
          '#tree' => TRUE,
        );
        //insert the embed code
        $form['cambridge_mediamap']['embed'] = array(
          '#type' => 'textarea',
          '#title' => t('Video Embed Code'),
          '#default_value' =>  $form['#node']->cambridge_mediamap['embed'],
          '#cols' => 60,
          '#rows' => 5,
          '#description' => t('Copy and paste the embed code from an external video or media hosting service'),
        );
        //enable or disable on map
        $form['cambridge_mediamap']['display'] = array(
          '#type' => 'select',
          '#title' => t('Display this node'),
          '#default_value' => $form['#node']->cambridge_mediamap['display'],
          '#options' => array(
            '0' => t('Disable display'),
            '1' => t('Enable display'),
          ),
        );

      }
      break;
  }
}

/**
 * A page callback to draw the map
 */
function cambridge_mediamap_map() {
  $output = '';

  //Collect the nodes to be displayed
  $results = db_query('SELECT embed, nid FROM {cambridge_mediamap} WHERE display = 1');

  //Initialize our marker array
  $markers = array();

  //check to see what modules are enabled
  $location_enabled = module_exist('location');
  $gmap_location_enabled = module_exist('gmap_location');

  //load each node and set it's attributes in the marker array
  while($item = db_fetch_object($results)) {
    $latitude = 0;
    $longitude = 0;
    //load the node
    $node = node_load(array('nid' => $item->nid));

    //set the latitude and longitude
    //give location module data preference over gmap module data
    if ($location_enabled) {
      $latitude = $node->location['latitude'];
      $longitude = $node->location['longitude'];
    }
    elseif ($gmap_location_enabled) {
      $latitude = $node->gmap_location_latitude;
      $longitude = $node->gmap_location_longitude;
    }

    if ($latitude && $longitude) {
      $markers[] = array(
        'label' => theme('cambridge_mediamap_marker', $node),
        'latitude' => $latitude,
        'longitude' => $longitude,
        'markername' => variable_get('cambridge_mediamap_default_marker', 'marker'),
      );
    }
  }

  $latlon = explode(',', variable_get('cambridge_mediamap_default_latlong','42.369452,-71.100426'));

  $map=array(
    'id' => 'cambridge_mediamap',
    'latitude' => trim($latlon[0]),
    'longitude'=> trim($latlon[1]),
    'width' => variable_get('cambridge_mediamap_default_width','100%'),
    'height' => variable_get('cambridge_mediamap_default_height','500px'),
    'zoom' => variable_get('cambridge_mediamap_default_zoom', 13),
    'control' => variable_get('cambridge_mediamap_default_control','Large'),
    'type' => variable_get('cambridge_mediamap_default_type','Satellite'),
    'markers' => $markers,
    );

  return gmap_draw_map($map);
}

/**
 * A theme function for our markers
 */

function theme_cambridge_mediamap_marker($node) {

  $output = '
';
  $output .= '
' . l($node->title, 'node/' . $node->nid) . '

';
  $output .= '
' . $node->cambridge_mediamap['embed_resize'] . '

';
  $output .= '

';

  return $output;
}

/**
 * Settings page
 */
function cambridge_mediamap_settings() {
   // Cambridge data
   //  latitude = 42.369452
   //  longitude = -71.100426

  $form['defaults']=array(
    '#type' => 'fieldset',
    '#title' => t('Default map settings'),
  );

  $form['defaults']['cambridge_mediamap_default_width'] = array(
    '#type' => 'textfield',
    '#title' => t('Default width'),
    '#default_value' => variable_get('cambridge_mediamap_default_width','100%'),
    '#size' => 25,
    '#maxlength' => 6,
    '#description' => t('The default width of a Google map. Either px or %'),
  );
  $form['defaults']['cambridge_mediamap_default_height'] = array(
    '#type' => 'textfield',
    '#title' => t('Default height'),
    '#default_value' => variable_get('cambridge_mediamap_default_height','500px'),
    '#size' => 25,
    '#maxlength' => 6,
    '#description' => t('The default height of Mediamap. In px.'),
  );
  $form['defaults']['cambridge_mediamap_default_latlong'] = array(
    '#type' => 'textfield',
    '#title' => t('Default center'),
    '#default_value' => variable_get('cambridge_mediamap_default_latlong','42.369452,-71.100426'),
    '#description' => 'The decimal latitude,longitude of the centre of the map.  The "." is used for decimal, and "," is used to separate latitude and longitude.',
    '#size' => 50,
    '#maxlength' => 255,
    '#description' => t('The default longitude, latitude of Mediamap.'),
  );
  $form['defaults']['cambridge_mediamap_default_zoom']=array(
    '#type'=>'select',
    '#title'=>t('Default zoom'),
    '#default_value'=>variable_get('cambridge_mediamap_default_zoom', 13),
    '#options' => drupal_map_assoc(range(0, 17)),
    '#description'=>t('The default zoom level of Mediamap.'),
  );
  $form['defaults']['cambridge_mediamap_default_control']=array(
    '#type'=>'select',
    '#title'=>t('Default control type'),
    '#default_value'=>variable_get('cambridge_mediamap_default_control','Large'),
    '#options'=>array('None'=>t('None'),'Small'=>t('Small'),'Large'=>t('Large')),
  );
  $form['defaults']['cambridge_mediamap_default_type']=array(
    '#type'=>'select',
    '#title'=>t('Default map type'),
    '#default_value'=>variable_get('cambridge_mediamap_default_type','Satellite'),
    '#options'=>array('Map'=>t('Map'),'Satellite'=>t('Satellite'),'Hybrid'=>t('Hybrid')),
  );

  $markers = gmap_get_markers();

  $form['defaults']['cambridge_mediamap_default_marker'] = array(
    '#type'=>'select',
    '#title'=>t('Marker'),
    '#default_value'=>variable_get('cambridge_mediamap_default_marker', 'marker'),
    '#options'=>$markers,
  );

  $form['embed']=array(
    '#type' => 'fieldset',
    '#title' => t('Default embedded video settings'),
  );

  $form['embed']['cambridge_mediamap_embed_width'] = array(
    '#type' => 'textfield',
    '#title' => t('Default width'),
    '#default_value' => variable_get('cambridge_mediamap_embed_width','320'),
    '#size' => 25,
    '#maxlength' => 6,
    '#description' => t('The maximum width of embedded video'),
  );
  $form['embed']['cambridge_mediamap_embed_height'] = array(
    '#type' => 'textfield',
    '#title' => t('Default height'),
    '#default_value' => variable_get('cambridge_mediamap_embed_height','240'),
    '#size' => 25,
    '#maxlength' => 6,
    '#description' => t('The maximum height of embedded video.'),
  );

  return $form;
}

/**
 * Prints human-readable (html) information about a variable.
 * Use: print debug($variable_name);
 * Or assign output to a variable.
 */
function debug($value) {
 return preg_replace("/\s/", " ", preg_replace("/\n/", "",
print_r($value, true)));
}

Related posts:

1. The 48 hour mobile web app: Drunken Stumble Last weekend I participated in the Boston Hack Day Challenge, a 48 hour (so I’m not sure why they called...
2. A form from my favorites Above is the signup form from Brompt, the blog reminder service I built a few years ago for undisciplined bloggers...