Slicker sitemap with SlickMap CSS

We have just upgraded our sitemap from a boring XML only version that was only really useful for search engines to a beautiful new version using SlickMap CSS, that is useful for living, loving people like you and I.

Implementing this new sitemap was a piece of cake since SlickMap required ULs with special DOM Ids and our CMS already used MenuHelper for site navigation.
To enable both XML and the new HTML sitemap we simply changed our '/sitemap.xml' route and added one line:
 
Router::connect('/sitemap', array('admin' => null,'controller'=>'sitemaps','action'=>'index','plugin'=>null));
Router::parseExtensions();
 
To create a SlickMap compatible sitemap we used MenuHelper to create two menus with the DOM Ids "utilityNav" and "primaryNav" inside a DIV with the class "sitemap". The element of the "primaryNav" menu that contains our homepage had to be given the DOM Id "home" which was easily done using MenuHelper:
 
$menu->add('root', array('introducing illustrata', '/', array('title' => 'Home')),array('li' => array('id'=>'home')));
 
Full views/sitemaps/index.ctp :
 
<?php $this->layout = 'blank'; ?>
class="sitemap">
 
<?php
$html->css('slickmap', null, array(), false);
$menu->add('utility', array('Blog', '/blog', array('title' => 'Layers of information. illustrata team blog.')));
$menu->add('utility', array('Sitemap', '/sitemap'));
echo $menu->generate('utility', array('id' => 'utilityNav'));
 
$menu->add('root', array('introducing illustrata', '/', array('title' => 'Home')),array('li' => array('id'=>'home')));
 
foreach ($data as $main) {
if (!empty($main['SubMenu'])) {
$node = $html->link($main['Page']['page_title'], '/'.$main['Page']['path'],
array('title' => $main['Page']['meta_description']));
foreach ($main['SubPage'] as $sub) {
$menu->add('sub'.$main['Page']['id'], array($sub['page_title'],
'/pages/'.$sub['path'], array('title' => $sub['meta_description'])));
}
$node .= $menu->generate('sub'.$main['Page']['id']);
$menu->addElement('root',$node);
} else {
$menu->add('root', array($main['Page']['page_title'], '/'.$main['Page']['path'],
array('title' => $main['Page']['meta_description'])));
 
}
}
echo $menu->generate('root', array('id' => 'primaryNav'));
?>

 
Thanks to ajaxian for bringing this excellent CSS sitemap solution to our attention!