Content tagged with: view

Creating a Google Map showing user locations using the Content Profile, Location, and GMap modules

Submitted by Eric on Sat, 09/26/2009 - 23:32

In this blog entry I'll show how you can create a Google map showing where your users are located using CCK, Content Profile, Views, GMap, and Location modules. Once you've downloaded and extracted those modules, enable the following modules (and set permissions accordingly):

Content
Location
Location CCK
Content Profile
GMap
GMap Location
Views
Views UI

Next you'll need to configure these new modules. On the GMap settings page (admin/settings/gmap) you'll need to add your API Key and enable the setting to Use AutoZoom. On the Location settings page (admin/settings/location) enable the checkbox to use a Google Map to set latitude and longitude and enable JIT geocoding. On the geocoding settings page (admin/settings/location/geocoding), you'll have to enable Google Maps for the desired countries.

The Content Profile module creates a new content type called "Profile". You'll need to add a new field to this content type for the user's location (admin/content/node-type/profile/fields). Enter a label for the node type (Location), enter a field name (field_location), choose "Location" for the field type, and choose "Location Field" for the widget.

On the next screen edit the Locative information sections (Collection and Display) to your liking, and save the field settings. For my example, I enabled Street location, Additional, City, State, Postal code, Country, and Coordinate Chooser.

Now if you create your profile node (node/add/profile) you can enter your location information and save the new node. If all is working at this point, if you return to the profile node edit screen and scroll down to the location information, you should now see a marker on map for your location and the geocoded information will be shown.

Now you can add a new view (admin/build/views/add) to show the user's profile locations. Enter a name for your view, choose node for the view type, and click the next button. Add a new filter for "Node: Published" is true and "Node: Type" is one of "Profile". Add a new relationship for Content: Location (field_location). Add fields for "Location: Latitude" (using the Location relationship), "Location: Longitude" (using the Location relationship), and any additional fields you'd like to display in the GMap marker (title, parts of the address, etc). For the Style of the view choose "GMap". For the GMap style settings, select "Choose latitude and longitude fields" for the Data Source and ensure the Latitude and Longitude fields as set.

Lastly, I added a page view so I could see the results in action..

ps> special thanks to everyone at CommonPlaces for their great technical discussions about these modules!

8 comments

Embedding the Fivestar widget in a view

Submitted by Eric on Fri, 06/19/2009 - 09:20

The Fivestar module offers a great way to allow users to rate your content. Enabling this functionality for a node type was straight forward. My next goal was to show the fivestar widget in a view for each node row. Unfortunately, the row styling for my view was "Fields", so the fivestar widget would not appear. Apparently, the fivestar widget is only available for the teaser & full node display options.

No worries, you can always override the themable output of a view. Using the "Theme information" section on the view edit screen, I decided to create a new template file in my theme directory for "Row style output". For example:

views-view-fields--MY-VIEW-NAME.tpl.php

I then copied the contents of default view template into this file.

<?php
// $Id: views-view-fields.tpl.php,v 1.6 2008/09/24 22:48:21 merlinofchaos Exp $
/**
 * @file views-view-fields.tpl.php
 * Default simple view template to all the fields as a row.
 *
 * - $view: The view in use.
 * - $fields: an array of $field objects. Each one contains:
 *   - $field->content: The output of the field.
 *   - $field->raw: The raw data for the field, if it exists. This is NOT output safe.
 *   - $field->class: The safe class id to use.
 *   - $field->handler: The Views field handler object controlling this field. Do not use
 *     var_export to dump this object, as it can't handle the recursion.
 *   - $field->inline: Whether or not the field should be inline.
 *   - $field->inline_html: either div or span based on the above flag.
 *   - $field->separator: an optional separator that may appear before a field.
 * - $row: The raw result object from the query, with all data it fetched.
 *
 * @ingroup views_templates
 */
?>
<?php foreach ($fields as $id => $field): ?>
  <?php if (!empty($field->separator)): ?>
    <?php print $field->separator; ?>
  <?php endif; ?>

  <<?php print $field->inline_html;?> class="views-field-<?php print $field->class; ?>">
    <?php if ($field->label): ?>
      <label class="views-label-<?php print $field->class; ?>">
        <?php print $field->label; ?>:
      </label>
    <?php endif; ?>
      <?php
      // $field->element_type is either SPAN or DIV depending upon whether or not
      // the field is a 'block' element type or 'inline' element type.
      ?>
      <<?php print $field->element_type; ?> class="field-content"><?php print $field->content; ?></<?php print $field->element_type; ?>>
  </<?php print $field->inline_html;?>>
<?php endforeach; ?>

By examining the hook_nodeapi() function of the Fivestar module, I decided to use the fivestar_widget_form() function to embed the widget in my view. This function accepts one argument, the $node object. Inside the first php tag in my new template file, I added the following code to load the node object:

<?php
$node = node_load($row->nid);
?>

Last, I determined a good insertion point for the fivestar widget in this template file, and added the following code:

<?php
if (function_exists('fivestar_widget_form')) print fivestar_widget_form($node);
?>

If done correctly the Fivestar widget should now be embedded in the view for each node row.

7 comments

Integrating Open Flash Charts into a Drupal View

Submitted by Eric on Wed, 05/06/2009 - 21:41

In this tutorial I'll show how I integrated Open Flash Charts into a Drupal view to create a fancy flash based chart from CCK node data.

Let's start by creating a new CCK node type to contain the data. I called mine "graph_data".

I added an integer field called "field_data".

I created a bunch of nodes, populating them with a random integer from 0 to 100.

I added a view called "Graph" to show all of my data. I filtered by node type and published, added sort criteria, chose "Unformatted" for Style, chose how many items to show (100), and added a page view.

At this point, you'll need to download and incorporate the Open Flash Charts library. You can download the library here or by visiting their website and clicking on Downloads in the top right. Uncompress the download and copy the entire directory (version-2-ichor) into your theme directory.

Sample directory structure:

/sites/all/themes/YOURTHEME/version-2-ichor

I created a new file in my theme directory called "views-view-unformatted--Graph.tpl.php" (see: Theme Information section on the View edit page) to override it's output. I put the guts of my code in this file:

<?php
// loop through the view results and populate a numeric array
$values = array();
foreach ($view->result as $k => $v) {
  $values[] = intval($v->node_data_field_data_field_data_value);
}

// include OFC PHP library
require_once(path_to_theme() . '/version-2-ichor/php-ofc-library/open-flash-chart.php');

// create a new line object
$line = new line();

// set the view values to the line object
$line->set_values( $values );

// create a new flash object
$chart = new open_flash_chart();

// add the line object to the chart object
$chart->add_element( $line );

// create a new x_axis object
$x = new x_axis();

// set the number of steps
$x->set_steps(10);

// add the x_axis object to the chart
$chart->set_x_axis($x);

// create a new y_axis object
$y = new y_axis();

// set the range of the y axis, based on the min/max view values
$y->set_range(min($values),max($values));

// set the number of steps
$y->set_steps(10);

// add the y_axis object to the chart
$chart->set_y_axis($y);
?>

<!-- Include Javascript libraries -->
<script type="text/javascript" src="<?php print base_path() . path_to_theme(); ?>/version-2-ichor/js/json/json2.js"></script>
<script type="text/javascript" src="<?php print base_path() . path_to_theme(); ?>/version-2-ichor/js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("<?php print base_path() . path_to_theme(); ?>/version-2-ichor/open-flash-chart.swf", "my_chart", "350", "200", "9.0.0");
</script>

<!-- Add Javascript to initialize the chart and load its data -->
<script type='text/javascript'>

function open_flash_chart_data() {
  return JSON.stringify(data);
}

function findSWF(movieName) {
  if (navigator.appName.indexOf("Microsoft")!= -1) {
    return window[movieName];
  } else {
    return document[movieName];
  }
}

// output the graph data into a javascript variable
var data = <?php echo $chart->toPrettyString(); ?>;
</script>

<!-- Output a container div for the chart -->
<div id="my_chart"></div>

Here's a screenshot of my new flash integrated view

2 comments

Adding block visibility code to show the Organic Groups Recent Members block on group node types

Submitted by Eric on Tue, 04/07/2009 - 08:28

The Organic Groups Views Integration module comes with a bunch of useful views related to groups and their members. I assigned the "Recent members" block view to a region of my theme, and the block appeared on all group nodes and nodes that belong to a group. For the Drupal site I was working on, it was desired to only appear on the group nodes (not the nodes that belong to groups). No worries, you can always add block visibility code to determine when to show the block.

I went to the blocks admin screen (admin/build/block) and clicked configure for this block. Scroll down to the fieldset titled "Page specific visibility settings". I choose the radio option "Show if the following PHP code returns TRUE (PHP-mode, experts only)." and added the following PHP snippet:

<?php
if (function_exists('_MYMODULE_block_visibility_og_members'))
  return _MYMODULE_block_visibility_og_members();
return false;
?>

Next, I added a function in my module to handle the request.

<?php
function _MYMODULE_block_visibility_og_members() {
  // lookup node id from query string
  $path = drupal_lookup_path('source', $_REQUEST['q']);

  // ensure the page is a node
  if (substr($path,0,5)=='node/') {
    // load node
    $node = node_load(substr($path,5));

    // check if node type is a group node
    return og_is_group_type($node->type);
  }
  return false;
}
?>

Now, the block only appears on group node types.

1 comment

Adding next and previous links to the calendar year view

Submitted by Eric on Fri, 04/03/2009 - 10:42

When viewing my calendar in year view, there are not previous and next links in the calendar navigation.

It possible that my calendar is not configured properly, but here's how I modified the calendar theming to insert the links. First, I copied the calendar-main.tpl.php file into my theme directory. Then I added a conditional statement to check if it's the year view and inserted some PHP:

<?php
// $Id: calendar-main.tpl.php,v 1.2.2.3 2008/10/21 14:20:33 karens Exp $
/**
 * @file
 * Template to display calendar navigation and links.
 * 
 * @see template_preprocess_calendar_main.
 *
 * $view: The view.
 * $calendar_links: Array of formatted links to other calendar displays - year, month, week, day.
 * $calendar_popup: The popup calendar date selector.
 * $display_type: year, month, day, or week.
 * $mini: Whether this is a mini view.
 * $min_date_formatted: The minimum date for this calendar in the format YYYY-MM-DD HH:MM:SS.
 * $max_date_formatted: The maximum date for this calendar in the format YYYY-MM-DD HH:MM:SS.
 * 
 */
//dsm('Display: '. $display_type .': '. $min_date_formatted .' to '. $max_date_formatted);
?>

<div class="calendar-calendar">
  <?php if (!empty($calendar_popup)) print $calendar_popup;?>
  <?php if (empty($block)) print theme('links', $calendar_links);?>
    
  <?php
  if ($display_type == 'year') {
        
    // generate the html for the calendar navigation
    $nav = theme('date_navigation', $view);
        
    // define html containers to insert links into
    $prev = '<div class="date-prev">';
    $next = '<div class="date-next">';
        
    // create link for previous/next year
    $prevLink = l('<< prev', 'calendar/' . (arg(1)-1)); 
    $nextLink = l('next >>', 'calendar/' . (arg(1)+1));
        
    // find position of end of previous div container
    $prevPos = stripos($nav,$prev) + strlen($prev); 
        
    // insert previous link
    $nav = substr($nav, 0, $prevPos) . $prevLink . substr($nav, $prevPos);
        
    // find position of end of next div container
    $nextPos = stripos($nav,$next) + strlen($next); 
        
    // insert next link
    $nav = substr($nav, 0, $nextPos) . $nextLink . substr($nav, $nextPos);
        
    print $nav;
        
  } else {
    print theme('date_navigation', $view);
  }
  ?>

</div>
?>

Now, my calendar has previous and next navigation links.

4 comments