KML overlays with GMap-enabled nodes

The GMap module is a highly useful tool for enabling Google Maps on Drupal nodes, and its integration with Location has made it the de-facto choice for this functionality on most Drupal sites. On a recent project, I was looking for a quick way to allow a user to attach KML files to a Gmap-enabled node through a CCK field and have them integrated into the resulting map.

Tirdad Chaharlengi, Senior Developer
#Mapping | Posted

The GMap module is a highly useful tool for enabling Google Maps on Drupal nodes, and its integration with Location has made it the de-facto choice for this functionality on most Drupal sites. On a recent project, I was looking for a quick way to allow a user to attach KML files to a Gmap-enabled node through a CCK field and have them integrated into the resulting map. An initial search suggested GMap Addons as a potential solution given its inclusion of overlay support, but its lack of documentation and reliance on macros make it a rather counter-intuitive process to deal with, especially given the ease of use of Google Maps’ original API. So we’re back to figuring it out with the initial Gmap module itself.

A little digging into its code yielded this key method: Drupal.gmap.getMap(mapid)

This allows you to retrieve the JS map object that will be generated, which is exactly what we need in this case. The GGeoXml class from the Google Maps API then provides us with the other half, the ability to parse the KML file to then attach it to this object.

What follows is a quick hook that associates KML files uploaded to the node’s field_file_kml field to the map. Since this is obviously dependent on GMap being enabled and configured, we’re assuming the value for googlemap_api_key has been set here.

  1. <span style="color: #000000;"><span style="color: #0000bb;"><?php
  2. </span><span style="color: #007700;">function </span><span style="color: #0000bb;">kml_support_nodeapi</span><span style="color: #007700;">(&</span><span style="color: #0000bb;">$node</span><span style="color: #007700;">, </span><span style="color: #0000bb;">$op</span><span style="color: #007700;">, </span><span style="color: #0000bb;">$a3 </span><span style="color: #007700;">= <</span><span style="color: #0000bb;">span </span><span style="color: #007700;">class=</span><span style="color: #dd0000;">"caps"</span><span style="color: #007700;">></span><span style="color: #0000bb;">NULL</span><span style="color: #007700;"></</span><span style="color: #0000bb;">span</span><span style="color: #007700;">>, </span><span style="color: #0000bb;">$a4 </span><span style="color: #007700;">= <</span><span style="color: #0000bb;">span </span><span style="color: #007700;">class=</span><span style="color: #dd0000;">"caps"</span><span style="color: #007700;">></span><span style="color: #0000bb;">NULL</span><span style="color: #007700;"></</span><span style="color: #0000bb;">span</span><span style="color: #007700;">>) {</span></span>

// Only applies to this content type
if ($node->type != 'your_content_type') {
return;
}
if (
$op != 'view') {
return;
}
if (empty(
$node->field_file_kml)) {
return;
}

$data .= '</script><script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=' . variable_get('googlemap_api_key', '') . '" type="text/javascript"></script>';

$data .= '<script type="text/javascript">
$(document).ready(function() {
var map = Drupal.gmap.getMap("google_map").map;
map.addControl(new GLargeMapControl());'
;

foreach ($node->field_file_kml as $id => $kml_file) {
$url = file_create_url($kml_file['filepath']);
$data .= 'var geoXml' . $id . ';';
$data .= 'geoXml' . $id . ' = new GGeoXml("' . $url . '");';
$data .= 'map.addOverlay(geoXml' . $id . ');';
}
$data .=     '});';

drupal_add_js($data, 'inline');
}
?>

Tirdad Chaharlengi

Senior Developer