FireManager and related goodies

css/viewer.css

@@ -148,6 +148,9 @@ html, body {
   color:#ffffff;
 }
 
+#working{display: inline-block;margin-left:10px;}
+.small{font-size: 0.5em;}
+
 button{
 	vertical-align:middle;
 }
@@ -197,6 +200,7 @@ background-image: none;
 /*--------------------------*/
 /* SPINNER USING CSS3       */
 /*--------------------------*/
+
 .spin {
   -webkit-animation-name: spinnerRotate;
   -webkit-animation-duration: 2s;

index.html

@@ -22,7 +22,11 @@
         </a>
         <div id="current-item" class="item cursorpointer">
             <span id="current-item-name">Current Fires</span>
-            <span id="menu-widget" class='entypo-plus-circled'></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>
         </div>
         <!-- This will contain the legends later on -->
         <div id="horizontal-legend-region"></div>
@@ -154,11 +158,13 @@ <h3>Select a Year to View</h3>
     <script type="text/javascript" src="./javascript/EsriMapModule.js"></script>
     <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>
   <!-- Configuration and Launch -->
 <script>
     //TODO: Change to use dojo.addOnLoad(function{}) when we wire in Esri Map
     //$(function(){
 dojo.require('esri.map');
+dojo.require('esri.layers.FeatureLayer');
 
 dojo.addOnLoad(function(){
         //create a hash for our options that we will pass into 

javascript/CurrentFiresModule.js

@@ -36,7 +36,7 @@ if (!this.gmm || typeof this.gmm !== 'object') {
                     url:this.options.url
                 };
                 Viewer.vent.trigger('FireLayer:ConfigChanged', data);
-                Viewer.vent.trigger('Menu:ChangeViewName',this.options.model.name);
+                Viewer.vent.trigger('Navbar:ChangeItemName',this.options.model.name);
 
             }   
         });

javascript/EsriMapModule.js

@@ -44,7 +44,43 @@ if (!this.gmm || typeof this.gmm !== 'object') {
                 Viewer.vent.on('Map:SetBasemap',this.setBaseMap,this);
                 Viewer.vent.on('Map:HideControls',this.hideControls,this);
                 Viewer.vent.on('Map:ShowControls',this.showControls,this);
+                Viewer.vent.on('Map:ShowFires',this.showFires,this);
                 this.initMap(this.config.mapConfig);
+            },
+            showFires:function(featureArray){
+
+                //remove the firelayer if it's in the map
+                var lyr = this.map.getLayer("fireLayer");
+                if(lyr){
+                    this.map.removeLayer(lyr);
+                }
+                //setup the definition for the layer
+                //this includes the renderer
+                var layerDefinition = this.getFireLayerDefinition();
+                var featureCollection = {
+                  layerDefinition: layerDefinition,
+                  featureSet: {
+                    "geometryType": "esriGeometryPoint",
+                    "features":featureArray
+                    }
+                };
+                //create the feature layer...
+                var fireLayer = new esri.layers.FeatureLayer(featureCollection, {
+                  mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
+                  id: "fireLayer",
+                  visible:true
+                });
+                //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']);
+                });
+                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');
@@ -192,6 +228,81 @@ if (!this.gmm || typeof this.gmm !== 'object') {
                 } else {
                     console.error('MapModule:Controller:resizeMap map is undefined');
                 }
+            },
+
+            getFireLayerDefinition: function(){
+                var defn = {
+                  "geometryType": "esriGeometryPoint",
+                  "objectIdField": "objectid",
+                  "spatialReference":{"wkid":102100},
+                  "drawingInfo": {
+                    "renderer": {
+                      "type": "simple",
+                      "symbol": {
+                        "type": "esriPMS",
+                        "url": "images/icon28-active.png",
+                        "contentType": "image/png",
+                        "width": 15,
+                        "height": 15
+                      }
+                    }
+                  },
+                  "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
+                      }]
+                }; 
+                return defn;
+
             }
         });
 

javascript/FeedbackModule.js

@@ -0,0 +1,40 @@
+/*global gmm */
+if (!this.gmm || typeof this.gmm !== 'object') {
+    this.gmm = {};
+}
+(function () {
+    'use strict';
+    gmm.Viewer.module('FeedbackModule', function (Mod, Viewer, Backbone, Marionette, $, _) {
+
+        //==================================
+        //initializer called on Viewer.start(options)
+        //==================================
+        Mod.addInitializer(function (options) {
+            Mod.controller = new Controller();
+        });
+        //==================================
+        //Controller for the Module
+        //==================================
+        var Controller = Backbone.Marionette.Controller.extend({
+            initialize: function (options) {
+                _.bindAll(this);
+                console.log('FeedbackModule:Controller:initialize');
+                //listen to events
+                Viewer.vent.on('Feedback:Show',this.show,this);
+                Viewer.vent.on('Feedback:UpdateMessage',this.updateMessage,this);
+                Viewer.vent.on('Feedback:Hide',this.hide,this);
+
+            },
+            show:function(message){
+                $('#actions').html(message);
+                $('#feedback').show();
+            },
+            updateMessage:function(message){
+                $('#actions').html(message);
+            },
+            hide:function(){
+                $('#feedback').hide();
+            }
+        });
+    });
+})();

javascript/FireManagerModule.js

@@ -7,7 +7,7 @@ if (!this.gmm || typeof this.gmm !== 'object') {
 // This responds to the FireLayer:ConfigChanged
 // event, and then harvests in the features
 // and creates a collection which is then 
-// sent to the map via Map:FireCollection:Changed
+// sent to the map via Map:ShowFires
 //==================================
 (function () {
     'use strict';
@@ -24,17 +24,85 @@ if (!this.gmm || typeof this.gmm !== 'object') {
         //==================================
         var Controller = Backbone.Marionette.Controller.extend({
             initialize: function (options) {
+                console.log('FireManagerModule:Controller:initialize');
                 _.bindAll(this);
                 this.options = options;
                 //hook up App events            
                 Viewer.vent.on('FireLayer:ConfigChanged', this.updateFireCollection, this);
             },
             updateFireCollection:function(data){
                 console.log('FireLayer:ConfigChanged Caught');
-                console.dir(data);
+                //raise an event to show the spinner and message area
+                Viewer.vent.trigger('Feedback:Show',"loading data...");
+                //ensure that our featureSet is empty
+                this.featureSet = [];
+                //simplest thing would be to just load up the layer as a feature layer
+                //and assign a custom renderer, but we are trying to be decoupled here
+                //and if we wanted to swap out the map to Leaflet, we'd have a bunch more
+                //hoops to jump through. So, we will fetch all the features into an array
+                //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){
+                //use jquery to get a list of all the Ids from
+                //the service...
+                $.ajax(url + '/query', {
+                        data: {
+                            where: '1=1',
+                            returnIdsOnly: true,
+                            f: 'json'
+                        },
+                        dataType: 'jsonp',
+                        success: this.parseIds,
+                        error: function (jqXHR, status) {
+                            console.log('Error loading featureIds...');
+                        }
+                },this);
+            },
+            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;
+                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);
+                    temparray = data.objectIds.slice(i, i + chunk);
+                    this.getFeatures(temparray);
+                }
+            },
+            getFeatures: function(objectIdArray){
+                //TODO:not sure I like using this.layerUrl here...
+                $.ajax(this.layerUrl + '/query',{
+                    data:{
+                        objectIds:objectIdArray.join(),
+                        outFields:'objectid, fire_name,start_date,start_hour,location,inc_type,cause,area_,area_meas',
+                        f:'json'
+                    },
+                    dataType:'jsonp',
+                    success: this.parseFeatures,
+                    error: function (jqXHR, status) {
+                        console.log('Error loading features...');
+                    }
+                },this);
+            },
+            parseFeatures: function(data,status,jxXHR){
+                 console.log('  fetched set of features  ' + data.features.length);
+                //union the new features
+                this.featureSet = _.union(this.featureSet, data.features);
+                this.totalBatches -=1;
+                console.log(' Batches left: ' + this.totalBatches);
+                if(this.totalBatches === 0){
+                    console.log('Done last fetch. Got ' + this.featureSet.length + ' features');
+                    Viewer.vent.trigger('Map:ShowFires', this.featureSet);
+                    var msg = "loaded " + this.featureSet.length + " fires...";
+                    Viewer.vent.trigger('Feedback:UpdateMessage',msg)
+                }
             }
+
+
         });