From d5526abb8a599c663b64263a54823fe55f19d446 Mon Sep 17 00:00:00 2001
From: Dave Bouwman <dave@davebouwman.com>
Date: Thu, 21 Mar 2013 22:45:14 -0600
Subject: [PATCH] completed fire integration

---
 css/viewer.css                    |  14 ++++
 index.html                        |  33 ++++----
 javascript/CurrentFiresModule.js  |   2 +
 javascript/EsriMapModule.js       | 129 ++++++++++++------------------
 javascript/FireInfoModule.js      |  58 ++++++++++++++
 javascript/FireManagerModule.js   |  19 ++++-
 javascript/HistoricFiresModule.js |   4 +-
 javascript/RouterModule.js        |  92 +++++++++++++++++++--
 javascript/ViewerApp.js           |   5 +-
 9 files changed, 251 insertions(+), 105 deletions(-)
 create mode 100644 javascript/FireInfoModule.js

diff --git a/css/viewer.css b/css/viewer.css
index 71dfab5..2c81ac9 100644
--- a/css/viewer.css
+++ b/css/viewer.css
@@ -161,6 +161,20 @@ border-color: rgba(0,0,0,0);
 background-image: none;
 }
 
+#fire-tooltip {
+z-index: 1000;
+position: absolute;
+margin: 5px;
+padding: 5px;
+background-color: #213F65;
+background-color: rgba(33, 63, 101,0.65);
+color: #fff;
+-webkit-border-radius: 5px;
+-moz-border-radius: 5px;
+border-radius: 5px;
+display:none;
+}
+
 /*==========================*/
 /*        Layer List        */
 /*==========================*/
diff --git a/index.html b/index.html
index 77786eb..9aec35b 100644
--- a/index.html
+++ b/index.html
@@ -21,11 +21,11 @@
             <span class='entypo-rocket'></span>
         </a>
         <div id="current-item" class="item cursorpointer">
-            <span id="current-item-name">Current Fires</span>
+            <span id="current-item-name"></span>
             <span id="menu-widget" class="entypo-plus-circled"></span>
             <span id="feedback" style="display:none">
                 <div id="working" class="entypo-cw spin" ></div>
-                <span id="actions" class="small">doing work loading...</span>
+                <span id="actions" ></span>
             </span>
         </div>
         <!-- This will contain the legends later on -->
@@ -40,6 +40,7 @@
     <!-- Container for the Layer List -->
     <div id="layer-list-region" style="display:none;" class="view"></div>    
 
+    <div id="fire-tooltip" ></div>
     <!-- The Map -->
     <div id="map" ></div>
 
@@ -50,7 +51,7 @@
         List of years for the Historic Fires view will use this<br>
     </div>
 
-    <div id="right-container" style="display:none;" class="view" >
+    <div id="right-region" style="display:none;" class="view" >
         This is the right container<br/>
         We will have charts or Fire Details here <br/>
         This text is just to take space
@@ -159,6 +160,7 @@ <h3>Select a Year to View</h3>
     <script type="text/javascript" src="./javascript/RouterModule.js"></script>
     <script type="text/javascript" src="./javascript/FireManagerModule.js"></script>
     <script type="text/javascript" src="./javascript/FeedbackModule.js"></script>
+    <script type="text/javascript" src="./javascript/FireInfoModule.js"></script>
   <!-- Configuration and Launch -->
 <script>
     //TODO: Change to use dojo.addOnLoad(function{}) when we wire in Esri Map
@@ -171,9 +173,8 @@ <h3>Select a Year to View</h3>
         //the app
 var options = {
     menuItems: [
-        { name: 'Current Fires', eventToRaise: 'View:CurrentFires' },
-        { name: 'Historic Fires', eventToRaise: 'View:HistoricFires' },
-        { name: 'Fire Danger Map', eventToRaise: 'View:FireDanger' }
+        { name: 'Active Fires', eventToRaise: 'View:CurrentFires' },
+        { name: 'Historic Fires', eventToRaise: 'View:HistoricFires' }
     ],
     toolItems: [
         {name: 'Search', eventToRaise: 'View:Search', iconclass: 'entypo-search'},
@@ -230,7 +231,7 @@ <h3>Select a Year to View</h3>
         url:'http://wildfire.cr.usgs.gov/ArcGIS/rest/services/geomac_dyn/MapServer',
         model:
         {
-            name:'Current Fires',
+            name:'Active Fires',
             layerId:0,
             perimeterLayerId:1,
             defn:''
@@ -239,15 +240,15 @@ <h3>Select a Year to View</h3>
     historicFiresConfig:{
         url:'http://wildfire.cr.usgs.gov/ArcGIS/rest/services/geomac_dyn/MapServer',
         years: [
-            {name:'2013 Fires', layerId:4,  perimeterLayerId:5, defn:'year_=2013'},
-            {name:'2012 Fires', layerId:7,  perimeterLayerId:5, defn:'year_=2012'},
-            {name:'2011 Fires', layerId:8,  perimeterLayerId:5, defn:'year_=2011'},
-            {name:'2010 Fires', layerId:9,  perimeterLayerId:5, defn:'year_=2010'},
-            {name:'2009 Fires', layerId:10, perimeterLayerId:5, defn:'year_=2009'},
-            {name:'2008 Fires', layerId:11, perimeterLayerId:5, defn:'year_=2008'},
-            {name:'2007 Fires', layerId:12, perimeterLayerId:5, defn:'year_=2007'},
-            {name:'2006 Fires', layerId:13, perimeterLayerId:5, defn:'year_=2005'},
-            {name:'2005 Fires', layerId:14, perimeterLayerId:5, defn:'year_=2005'}
+            {name:'2013 Fires',  year:2013,layerId:4,  perimeterLayerId:5,  defn:"year_='2013'"},
+            {name:'2012 Fires',  year:2012,layerId:7,  perimeterLayerId:18, defn:"year_='2012'"},
+            {name:'2011 Fires',  year:2011,layerId:8,  perimeterLayerId:18, defn:"year_='2011'"},
+            {name:'2010 Fires',  year:2010,layerId:9,  perimeterLayerId:18, defn:"year_='2010'"},
+            {name:'2009 Fires',  year:2009,layerId:10, perimeterLayerId:18, defn:"year_='2009'"},
+            {name:'2008 Fires',  year:2008,layerId:11, perimeterLayerId:18, defn:"year_='2008'"},
+            {name:'2007 Fires',  year:2007,layerId:12, perimeterLayerId:18, defn:"year_='2007'"},
+            {name:'2006 Fires',  year:2006,layerId:13, perimeterLayerId:18, defn:"year_='2006'"},
+            {name:'2005 Fires',  year:2005,layerId:14, perimeterLayerId:18, defn:"year_='2005'"}
         ]
     },
     appRoot:'marionette-map'
diff --git a/javascript/CurrentFiresModule.js b/javascript/CurrentFiresModule.js
index c76b931..666b330 100644
--- a/javascript/CurrentFiresModule.js
+++ b/javascript/CurrentFiresModule.js
@@ -29,6 +29,7 @@ if (!this.gmm || typeof this.gmm !== 'object') {
 
                 //hook up App events            
                 Viewer.vent.on('View:CurrentFires', this.setCurrentFires, this);
+               
             },
             setCurrentFires:function(){
                 var data = {
@@ -36,6 +37,7 @@ if (!this.gmm || typeof this.gmm !== 'object') {
                     url:this.options.url
                 };
                 Viewer.vent.trigger('FireLayer:ConfigChanged', data);
+                Viewer.vent.trigger('Map:ShowPerimeters',data);
                 Viewer.vent.trigger('Navbar:ChangeItemName',this.options.model.name);
                 
             }   
diff --git a/javascript/EsriMapModule.js b/javascript/EsriMapModule.js
index 2a8cda9..b9f18c6 100644
--- a/javascript/EsriMapModule.js
+++ b/javascript/EsriMapModule.js
@@ -45,10 +45,32 @@ if (!this.gmm || typeof this.gmm !== 'object') {
                 Viewer.vent.on('Map:HideControls',this.hideControls,this);
                 Viewer.vent.on('Map:ShowControls',this.showControls,this);
                 Viewer.vent.on('Map:ShowFires',this.showFires,this);
+                Viewer.vent.on('Map:ShowPerimeters',this.showPerimeters,this);
                 this.initMap(this.config.mapConfig);
             },
+            showPerimeters:function(data){
+              console.log('Caught Map:ShowPerimeters');
+              //data will have a model and url
+                //remove the perimeters if it's in the map
+                var lyr = this.map.getLayer("perimeters");
+                if(lyr){
+                    this.map.removeLayer(lyr);
+                }
+
+              var perimLayer = new esri.layers.ArcGISDynamicMapServiceLayer(data.url,{id:'perimeters'});
+              var defn = [];
+              defn[data.model.perimeterLayerId]=data.model.defn;
+              perimLayer.setLayerDefinitions(defn);
+              var vis = [data.model.perimeterLayerId];
+              perimLayer.setVisibleLayers(vis);
+
+              this.map.addLayer(perimLayer);
+              //we need to create a dynamic map service layer
+              //set the definition query
+              //add it to the map
+              
+            },
             showFires:function(featureArray){
-                
                 //remove the firelayer if it's in the map
                 var lyr = this.map.getLayer("fireLayer");
                 if(lyr){
@@ -72,55 +94,52 @@ if (!this.gmm || typeof this.gmm !== 'object') {
                 });
                 //hover handler
                 dojo.connect(fireLayer, "onMouseOver",function(evt){
-                    //raise an event with the attributes so another view can
-                    //handle displaying the details
-                    console.log('Hovering on ' + evt.graphic.attributes['fire_name']);
+                    $('#fire-tooltip').html(evt.graphic.attributes['fire_name'])
+                          .css('top', evt.pageY)
+                          .css('left', evt.pageX)
+                          .show();
+                });
+
+                dojo.connect(fireLayer,"onMouseOut", function(evt){
+                    $('#fire-tooltip').hide();
                 });
                 this.map.addLayer(fireLayer);
-                console.log("Added fireLayer to the map with "+ featureArray.length + " features");
                 Viewer.vent.trigger("Feedback:Hide");
-
-
             },
             hideControls:function(){
             	$('#map_zoom_slider').fadeOut('fast');
             },
             showControls:function(){
-				$('#map_zoom_slider').fadeIn('fast');
+				      $('#map_zoom_slider').fadeIn('fast');
             },
+
             updateFireLayer:function(data){
                 console.log('Map:FireLayer:DataChanged Caught');
                 //do the work!
                 
             },
             centerAt:function(data){
-            	console.log('Map:CenterAt Caught');
-                var lvl = this.map.getLevel();
+              var lvl = this.map.getLevel();
             	if(lvl < 9){
             		data.l = 9;
-		        }else{
+		          }else{
                     data.l = lvl;
-                }
-                this.centerAtAndZoom(data);
-            	
+              }
+              this.centerAtAndZoom(data);
             },
             centerAtAndZoom:function(data){ // assume webmercator
-                console.log('Map:CenterAtAndZoom Caught');
-                console.dir(data);
                 var pt = new esri.geometry.Point({x: data.x, y: data.y,spatialReference: {wkid:102100 } });
                 this.map.centerAndZoom(pt,data.l);
             },
 
             centerAtLatLongAndZoom:function(data){ //assume geographic
                 //we could pass along the SR, or a wkid, but that seems like "leakage" to me...
-                console.log('Map:centerAtLatLongAndZoom Caught');
-                console.dir(data);
                 var pt = new esri.geometry.Point({x: data.x, y: data.y,spatialReference: {wkid:4326 } });
                 this.map.centerAndZoom(pt,data.l);
             },
 
 
-			setLayerVisibility: function (data) {
+			       setLayerVisibility: function (data) {
                 var lyr = this.map.getLayer(data.label);
                 if (lyr) {
                     lyr.setVisibility(data.visible);
@@ -145,7 +164,8 @@ if (!this.gmm || typeof this.gmm !== 'object') {
 
             initMap: function (mapConfig) {
                 console.log('Map:Controller:initMap');
-
+                //raise an event so other modules can take action when the map has been loaded
+                
                 var initialExtent = new esri.geometry.Extent(mapConfig.initialExtent);
                
                 this.map = new esri.Map("map", {
@@ -164,12 +184,10 @@ if (!this.gmm || typeof this.gmm !== 'object') {
                 var center = this.map.geographicExtent.getCenter();
                 var level = this.map.getLevel();
                 var data = {x:center.x, y:center.y, l: level};
-                console.log('EsriMapModule: Extent updated - calling Router:SetUrl with ' + data.x + ' ' +data.y);
                 //raise an event which keeps the map decoupled from the router
                 Viewer.vent.trigger('Router:SetUrl',data);
             },
             initBaseLayers: function (basemaps) {
-                console.log('Map:Controller:initBaseLayers');
                 _.each(basemaps, function(layer){
                     switch(layer.type){
                         case 'ArcGISTiledMapServiceLayer':
@@ -189,7 +207,6 @@ if (!this.gmm || typeof this.gmm !== 'object') {
             },
 
             initOperationalLayers: function (operationalLayers) {
-                console.log('MapModule:Controller:initOperationalLayers');
                 _.each(operationalLayers, function (layer) {
                     switch (layer.type) {
                         case 'ArcGISDynamicMapServiceLayer':
@@ -200,7 +217,7 @@ if (!this.gmm || typeof this.gmm !== 'object') {
                                 opacity: layer.opacity
                             });
                             lyr.setVisibleLayers(layer.visibleLayers);
-                            console.log(' Added ' + layer.name + ' to the map...');
+                            //console.log(' Added ' + layer.name + ' to the map...');
                             this.map.addLayer(lyr);
                             break;
                         case 'FeatureLayer':
@@ -214,11 +231,11 @@ if (!this.gmm || typeof this.gmm !== 'object') {
                             break;
                     }
                 }, this);
-                console.log('Done adding operational layers to the map');
             }, 
 
             onMapLoad: function (map) {
                 $(window).resize(this.resizeMap);
+                Viewer.vent.trigger('Map:Loaded');
             },
             resizeMap: function () {
                 //resize the map when the browser resizes
@@ -248,61 +265,19 @@ if (!this.gmm || typeof this.gmm !== 'object') {
                     }
                   },
                   "fields":[
-                      {
-                         "name":"objectid",
-                         "type":"esriFieldTypeOID",
-                         "alias":"objectid"
-                      },
-                      {
-                         "name":"fire_name",
-                         "type":"esriFieldTypeString",
-                         "alias":"fire_name",
-                         "length":30
-                      },
-                      {
-                         "name":"start_date",
-                         "type":"esriFieldTypeString",
-                         "alias":"start_date",
-                         "length":18
-                      },
-                      {
-                         "name":"start_hour",
-                         "type":"esriFieldTypeString",
-                         "alias":"start_hour",
-                         "length":4
-                      },
-                      {
-                         "name":"location",
-                         "type":"esriFieldTypeString",
-                         "alias":"location",
-                         "length":80
-                      },
-                      {
-                         "name":"inc_type",
-                         "type":"esriFieldTypeString",
-                         "alias":"inc_type",
-                         "length":3
-                      },
-                      {
-                         "name":"cause",
-                         "type":"esriFieldTypeString",
-                         "alias":"cause",
-                         "length":1
-                      },
-                      {
-                         "name":"area_",
-                         "type":"esriFieldTypeDouble",
-                         "alias":"area_"
-                      },
-                      {
-                         "name":"area_meas",
-                         "type":"esriFieldTypeString",
-                         "alias":"area_meas",
-                         "length":10
+                      {"name":"objectid","type":"esriFieldTypeOID","alias":"objectid"},
+                      {"name":"fire_name","type":"esriFieldTypeString","alias":"fire_name","length":30},
+                      {"name":"active","type":"esriFieldTypeString","alias":"active","length":50},
+                      {"name":"start_date","type":"esriFieldTypeString","alias":"start_date","length":18},
+                      {"name":"start_hour","type":"esriFieldTypeString","alias":"start_hour","length":4},
+                      {"name":"location","type":"esriFieldTypeString","alias":"location","length":80},
+                      {"name":"inc_type","type":"esriFieldTypeString","alias":"inc_type","length":3},
+                      {"name":"cause","type":"esriFieldTypeString","alias":"cause","length":1},
+                      {"name":"area_","type":"esriFieldTypeDouble","alias":"area_"},
+                      {"name":"area_meas","type":"esriFieldTypeString","alias":"area_meas","length":10
                       }]
                 }; 
                 return defn;
-
             }
         });
 
diff --git a/javascript/FireInfoModule.js b/javascript/FireInfoModule.js
new file mode 100644
index 0000000..9ef8985
--- /dev/null
+++ b/javascript/FireInfoModule.js
@@ -0,0 +1,58 @@
+/*global gmm */
+if (!this.gmm || typeof this.gmm !== 'object') {
+    this.gmm = {};
+}
+
+(function () {
+    'use strict';
+    gmm.Viewer.module('FireInfoModule', function (Mod, Viewer, Backbone, Marionette, $, _) {
+
+        //==================================
+        //initializer called on Viewer.start(options)
+        //==================================
+        Mod.addInitializer(function (options) {
+            Mod.controller = new Controller({
+                region: Viewer.rightRegion
+            });
+        });
+        //==================================
+        //Controller for the MenuModule
+        //==================================
+        var Controller = Backbone.Marionette.Controller.extend({
+            initialize: function (options) {
+                _.bindAll(this);
+                this.region = options.region;
+                
+                console.log('FireInfoModule:Controller:initialize');
+                
+                //hook up App events            
+                Viewer.vent.on('View:FireInfo', this.showView, this);
+            },
+            showView:function(data){
+                console.log('Showing FireDetailsView...');
+                console.dir(data);
+                /*this.layout = new YearLayout();
+                this.region.show(this.layout);
+                this.layout.listRegion.show(new YearListView({collection:this.years}));
+                this.region.$el.fadeIn('fast');*/
+                
+            },
+            /*hideView:function(){
+                console.log('HistoricFiresModule:hideSearch');
+                this.region.$el.fadeOut('fast');
+            }*/
+
+        });
+
+        //Model
+        var FireInfoModel = Backbone.Model.extend({});
+        
+        var FireInfoItemView = Backbone.Marionette.ItemView.extend({
+            model: FireInfoModel,
+            template: '#fire-item-template',
+            tagName: 'div',   
+        });
+
+
+    });
+})();
\ No newline at end of file
diff --git a/javascript/FireManagerModule.js b/javascript/FireManagerModule.js
index 08186e3..8f7764f 100644
--- a/javascript/FireManagerModule.js
+++ b/javascript/FireManagerModule.js
@@ -43,6 +43,8 @@ if (!this.gmm || typeof this.gmm !== 'object') {
                 //and throw that to the map and let it sort out how to handle things.
                 this.layerUrl = data.url + '/' + data.model.layerId;
                 this.getFeatureIds(this.layerUrl);
+                
+
             },
 
             getFeatureIds: function(url){
@@ -58,17 +60,25 @@ if (!this.gmm || typeof this.gmm !== 'object') {
                         success: this.parseIds,
                         error: function (jqXHR, status) {
                             console.log('Error loading featureIds...');
-                        }
+                            alert("Error accessing Geomac service " + status);
+                        },
+                        complete: this.getFeatureIdsComplete
                 },this);
             },
+            getFeatureIdsComplete: function(jqXHR,status){
+                console.log('GetFeautureIds completed with status ' + status);
+            },
             parseIds: function(data, status, jqXHR) {
+                
                 //break the id's into batches of 200, and make iterative requests
                 //accumulating the features into an array
-                var i, j, temparray, chunk = 200;
+                console.log('Status:'+ status);
+                var i, j, temparray, chunk = 150;
                 this.totalBatches = Math.ceil(data.objectIds.length / chunk);
                 console.log('Queried Layer and got ' + data.objectIds.length + ' objectIds ... Will fetch in ' + this.totalBatches + ' batches of ' + chunk);
                 for (i = 0, j = data.objectIds.length; i < j; i += chunk) {
-                    console.log(' requesting chunk ' + i);
+                    //console.log(' requesting chunk ' + i);
+                    Viewer.vent.trigger('Feedback:UpdateMessage','Requesting data batch '+ (i / chunk) + ' of ' + this.totalBatches);
                     temparray = data.objectIds.slice(i, i + chunk);
                     this.getFeatures(temparray);
                 }
@@ -85,11 +95,12 @@ if (!this.gmm || typeof this.gmm !== 'object') {
                     success: this.parseFeatures,
                     error: function (jqXHR, status) {
                         console.log('Error loading features...');
+                        alert("Error accessing Geomac service " + status);
                     }
                 },this);
             },
             parseFeatures: function(data,status,jxXHR){
-                 console.log('  fetched set of features  ' + data.features.length);
+                // console.log('  fetched set of features  ' + data.features.length);
                 //union the new features
                 this.featureSet = _.union(this.featureSet, data.features);
                 this.totalBatches -=1;
diff --git a/javascript/HistoricFiresModule.js b/javascript/HistoricFiresModule.js
index b3913f3..445981e 100644
--- a/javascript/HistoricFiresModule.js
+++ b/javascript/HistoricFiresModule.js
@@ -68,8 +68,10 @@ if (!this.gmm || typeof this.gmm !== 'object') {
                 console.log('YearItemClicked: '+ this.model.get('name'));
                 var data ={
                     model:this.model.toJSON(),
-                    url:Mod.controller.url};
+                    url:Mod.controller.url
+                };
                 Viewer.vent.trigger('FireLayer:ConfigChanged', data);
+                Viewer.vent.trigger('Map:ShowPerimeters',data);
                 Viewer.vent.trigger('Navbar:ChangeItemName',this.model.get('name'));
                 //hide the view
                 Mod.controller.hideView();
diff --git a/javascript/RouterModule.js b/javascript/RouterModule.js
index c7d9949..f7a42c1 100644
--- a/javascript/RouterModule.js
+++ b/javascript/RouterModule.js
@@ -12,31 +12,113 @@ if (!this.gmm || typeof this.gmm !== 'object') {
         Mod.addInitializer(function (options) {
             console.log('RouterModule starting up...')
             //Create a new Router
-            Mod.router = new Router();
+            Mod.router = new Router({
+                active: options.currentFiresConfig,
+                historic:options.historicFiresConfig
+                });
             //start history
             Backbone.history.start({pushState: false, root:options.appRoot});
         });
 
         var Router = Backbone.Marionette.AppRouter.extend({
             initialize: function(options){
+                _.bindAll(this);
+                this.active = options.active;
+                this.historic = options.historic;
                  //Allow other parts of the app to update the url by raising an event
                 Viewer.vent.on('Router:SetUrl', this.setUrl);
+                Viewer.vent.on('Map:Loaded',this.onMapLoaded);
+                //Viewer.vent.on('FireLayer:ConfigChanged', this.setYear);
+                
+            },
+
+            onMapLoaded:function(){
+                //ok, now that we have a map we can link up some events
+                Viewer.vent.on('FireLayer:ConfigChanged',this.setYear);
+                //and if we have values passed in on the url, raise events
+                if(this.urlValues){
+                    Viewer.vent.trigger('FireLayer:ConfigChanged', this.urlValues.yearData);
+                    Viewer.vent.trigger('Map:ShowPerimeters',this.urlValues.yearData);
+                    Viewer.vent.trigger('Navbar:ChangeItemName',this.urlValues.yearData.model.name);
+                    Viewer.vent.trigger('Map:CenterAtLatLongAndZoom', {
+                        x:this.urlValues.x, 
+                        y:this.urlValues.y, 
+                        l:this.urlValues.l
+                    });
+                }else{
+                    //do the defaults - this is essentially what starts the app
+                    //with the active fires
+                    Viewer.vent.trigger('FireLayer:ConfigChanged', this.active);
+                    Viewer.vent.trigger('Map:ShowPerimeters',this.active);
+                    Viewer.vent.trigger('Navbar:ChangeItemName',this.active.model.name);
+                }
+            },
+
+            setYear: function(data){
+                if(this.data){
+                    var urlFragment = 'map/'+this.data.x+'/'+this.data.y+'/'+this.data.l
+                    if(data.model.year){
+                        this.year = data.model.year;
+                        urlFragment += '/' + this.year;  
+                    }else{
+                        this.year = null;
+                    }
+                    Mod.router.navigate(urlFragment, {trigger:false});
+                }
+                if(data.model.year){
+                    this.year = data.model.year;
+                }
             },
 
             setUrl: function(data){
                 //round to two decimals
                 data.x = Math.round(data.x * 100)/100;
                 data.y = Math.round(data.y * 100)/100;
-                var urlFragment = 'map/'+data.x+'/'+data.y+'/'+data.l;  
+                this.data = data;
+                var urlFragment = 'map/'+this.data.x+'/'+this.data.y+'/'+this.data.l
+                if(this.year){
+                    urlFragment += '/' + this.year; 
+                }
+                //var urlFragment = 'map/'+data.x+'/'+data.y+'/'+data.l +'/' + this.year; 
+                
+               
                 Mod.router.navigate(urlFragment, {trigger:false});
                
             },
 
             routes : {
-                "map/:x/:y/:l" : "centerAndZoom"
+                "map/:x/:y/:l/(:year)" : "routeActions"
             },
-            centerAndZoom : function(x,y,l){
-                Viewer.vent.trigger('Map:CenterAtLatLongAndZoom', {x:x, y:y, l:l});
+
+            routeActions : function(x,y,l, year){
+                if(year){
+                    //having a year passed in means we are 
+                    //looking at historic data 
+                    this.year = year;
+                    console.log('Got the year passed in...' + year);
+                    //find the historic entry with year = year
+                    var data = {};
+                    data.url = this.historic.url;
+                    _.each(this.historic.years, function(item){
+                        if(item.year == year){
+                            data.model = item;
+                        }
+                    });
+                    //
+                }else{
+                    //no year means "Active" which is pre-set in the config
+                    var data =  this.active;
+                }
+                //we can't raise the events here because the map is likely not
+                //ready yet. So we just hold onto the urlValues and raise them
+                //when we are notified that the map is ready
+                this.urlValues = {
+                    x: x,
+                    y: y,
+                    l: l,
+                    yearData: data
+                };
+
             }
         });       
     });
diff --git a/javascript/ViewerApp.js b/javascript/ViewerApp.js
index c445bd6..7983335 100755
--- a/javascript/ViewerApp.js
+++ b/javascript/ViewerApp.js
@@ -11,14 +11,15 @@ if (!this.gmm || typeof this.gmm !== 'object') {
         menuRegion: '#menu-region',
         layerListRegion: '#layer-list-region',
         centerRegion: '#center-region',
-        mapRegion: '#map'
+        mapRegion: '#map',
+        rightRegion:'#right-region'
     });    
 
 
 
     //debugging so we can see events flying around
     gmm.Viewer.vent.on('all', function (evt, model) {
-        console.log('DEBUG: Event Caught: ' + evt);
+        //console.log('DEBUG: Event Caught: ' + evt);
         //if (model) {
         //    console.dir(model);
         //}