visualise records by default attribute #4

niwa · Dec 8, 2016 · c8d9b6d · c8d9b6d
1 parent 4e69773
commit c8d9b6d
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 32 deletions.
diff --git a/app/components/app/AppModel.js b/app/components/app/AppModel.js
@@ -83,8 +83,8 @@ define([
           //console.log("... success loading layer config")
           that.set("layersConfig",layers_json[0])  
           that.set("mapConfig",map_json[0])
-          that.set("columns",col_json[0])        
-          that.set("columnGroups",colGroup_json[0])       
+          that.set("columnConfig",col_json[0])        
+          that.set("columnGroupConfig",colGroup_json[0])       
           that.set("configsLoaded",true)
       }, function(){
         console.log("error loading configs")
@@ -143,6 +143,10 @@ define([
     getOutType: function(){
       return this.attributes.route.query.out
     },
+    getOutColor: function(){
+      return this.attributes.route.query.colorby
+    },
+
 
 
 		appConfigured : function(){
@@ -456,9 +460,21 @@ define([
         return this.attributes.columnsConfigured
       }
     },    
-
-
-
+    getOutColorColumn: function(){
+      return this.attributes.columnCollection.get(this.getOutColor())
+    },
+    setColumns: function(collection){
+      this.set('columnCollection',collection)
+    },    
+    setColumnGroups: function(collection){
+      this.set('columnGroupCollection',collection)
+    },    
+    getColumns:function(){
+      return this.attributes.columnCollection
+    },
+    getColumnGroups:function(){
+      return this.attributes.columnGroupCollection
+    },
 
 
 	});

diff --git a/app/components/app/AppView.js b/app/components/app/AppView.js
@@ -290,8 +290,8 @@ define([
               el:that.$(componentId),
               model:new OutModel({
                 labels:    that.model.getLabels(),
-                columnCollection: that.model.get("columnCollection"),
-                columnGroupCollection: that.model.get("columnGroupCollection"),
+                columnCollection: that.model.getColumns(),
+                columnGroupCollection: that.model.getColumnGroups(),
                 layerCollection: that.model.getLayers(),
                 recordCollection: that.model.getRecords(),
                 mapConfig: that.model.getMapConfig()
@@ -303,6 +303,7 @@ define([
             that.views.out.model.set({
               recordsUpdated :  Date.now(),
               outType:          that.model.getOutType(),
+              outColorColumn:   that.model.getOutColorColumn(),
               mapView:          that.model.getActiveMapview(),
               recordId :        that.model.getSelectedRecordId()
             })
@@ -443,8 +444,8 @@ define([
 
 
     configureColumns:function(){      
-      this.model.set("columnGroupCollection",new ColumnGroupCollection(this.model.get("columnGroups")))
-      this.model.set("columnCollection",new ColumnCollection(this.model.get("columns")))      
+      this.model.setColumnGroups(new ColumnGroupCollection(this.model.get("columnGroupConfig")))
+      this.model.setColumns(new ColumnCollection(this.model.get("columnConfig")))      
 
       // replace auto values (generate from actual record values where not explicitly set)
       _.each(this.model.get("columnCollection").byColumn('values','auto').byColumn("type","categorical").models,function(columm){        

diff --git a/app/components/app/out/OutModel.js b/app/components/app/out/OutModel.js
@@ -13,6 +13,9 @@ define([
     getOutType:function(){
       return this.attributes.outType
     },  
+    getOutColorColumn:function(){
+      return this.attributes.outColorColumn
+    },  
     getViews:function(){
       return this.attributes.views
     },  

diff --git a/app/components/app/out/OutView.js b/app/components/app/out/OutView.js
@@ -26,6 +26,7 @@ define([
       this.listenTo(this.model, "change:mapInit", this.updateMap);
       this.listenTo(this.model, "change:mapView", this.updateMap);      
       this.listenTo(this.model, "change:outType", this.updateOutType);      
+      this.listenTo(this.model, "change:outColorColumn", this.updateOutColorColumn);      
       this.listenTo(this.model, "change:recordsUpdated", this.updateViews);      
       this.listenTo(this.model, "change:recordId", this.updateViews);      
     },
@@ -131,7 +132,16 @@ define([
       }
 
     },
-
+    updateOutColorColumn:function(){
+      var column = this.model.getOutColorColumn()
+      if (typeof column !== "undefined") {
+        _.each(this.model.getRecords().models,function(record){
+          if (record.getLayer()) {
+            record.getLayer().setColor(column.getColor(record.getColumnValue(column.get("column"))))          
+          }
+        })
+      }
+    },
     toggleView:function(e){      
       this.$el.trigger('setOutView',{out_view:$(e.target).attr("data-view")})      
     }

diff --git a/app/config/appConfig.json b/app/config/appConfig.json
@@ -18,7 +18,7 @@
         "weight": 1,
         "opacity" : 1,
         "fillOpacity" : 0.4,
-        "radius":8
+        "radius":6
       }
     }
   },

diff --git a/app/models/ColumnModel.js b/app/models/ColumnModel.js
@@ -68,6 +68,12 @@ define([
     },
     getValues : function(){
       return this.attributes.values
+    },
+    getColor:function(value){
+      if(this.get("type") === "ordinal") {
+        var index = this.attributes.values.values.indexOf(value)
+        return this.attributes.values.colors[index]
+      }
     }
   });  
 

diff --git a/app/models/LayerModel.js b/app/models/LayerModel.js
@@ -13,13 +13,14 @@ define([
 
       //init loading states
       this.isContentLoading = false
-      this.isContentLoaded = false
+      this.isContentLoaded = false      
 
       // init attributes
       this.id = this.attributes.id
 
       this.setBasemap(typeof this.attributes.basemap !== "undefined" && this.attributes.basemap)      
-
+
+      this.set('selected',true)                        
 
       // model source specific initialisation
       this.initializeModel()      
@@ -166,6 +167,27 @@ define([
         })
       }
 
+    },
+    setColor : function(color){
+      // only when not active already
+
+      if (typeof color !== "undefined") {
+        var that = this
+        _.extend(that.attributes.layerStyle,{
+          fillColor:color,
+          color:color
+        })
+        this.getMapLayer(function(mapLayer){          
+          if(that.isSelected()){             
+            //setDefaultStyle
+            mapLayer.setStyle(that.attributes.layerStyle)
+          } else {
+            //setPassiveStyle
+            mapLayer.setStyle(_.extend({},that.attributes.layerStyle,{fillColor:"#aaa",color:"aaa"}))
+          }
+        })
+      }
+
     },
     bringToFront:function(){
       if (typeof this.attributes.parentLayer !== "undefined") {

diff --git a/app/router.js b/app/router.js
@@ -164,8 +164,7 @@ define([
   //   - col_[query]: column query, eg "col_elevation_below=100"
   //   "out=map" only
   //   - view: map view, "lat|lon|zoom||dimx|dimy"   
-  //   - out_color: primary visualisation column used for marker colors
-  //   - out_size: secondary visualisation column used for marker size
+  //   - colorby: primary visualisation column used for marker colors
   //   - plot: show latitude plot, one of 0,1
   //   - plot_elevation: plot elevation, one of 0,1
   //   - plot_landward_limit: plot landward limit, one of 0,1
@@ -216,23 +215,27 @@ define([
       console.log('--- query ' + query )
 //      if (window.__ga__ && ga.loaded) { ga('send', 'event', 'Route', 'route:home', '')}
 
-      // set default path (filters) if not set
+        // set default query args if not set
         query = query !== null && typeof query !=='undefined' ? $.deparam(query) : {}
-        // set default output option if not set
-        if (typeof query.out === "undefined" || query.out === null || query.out === "") {
+        // set default output options if not set
+        if (typeof query.out === "undefined" || query.out === null || query.out === ""
+          || typeof query.colorby === "undefined" || query.colorby === null || query.colorby === "") {
+          if (typeof query.out === "undefined" || query.out === null || query.out === ""){
+            _.extend(query,{out:"map"})
+          }
+          if (typeof query.colorby === "undefined" || query.colorby === null || query.colorby === ""){
+            _.extend(query,{colorby:"validity"})
+          }
           this.update({
             route:"explore",
             path:"",
-            query : {
-              out:"map"
-            },
+            query : query,
             extendQuery:true,
             trigger:true,
             replace:true
-          }
-          )
-        } else {
-
+          })
+
+        } else {      
           app.model.setRoute({
             route : 'explore',
             path  : "",
@@ -253,19 +256,24 @@ define([
 
       // set default path (filters) if not set
         query = query !== null && typeof query !=='undefined' ? $.deparam(query) : {}
-        // set default output option if not set
-        if (typeof query.out === "undefined" || query.out === null || query.out === "") {
+        // set default output options if not set
+        if (typeof query.out === "undefined" || query.out === null || query.out === ""
+          || typeof query.colorby === "undefined" || query.colorby === null || query.colorby === "" ) {
+          if (typeof query.out === "undefined" || query.out === null || query.out === ""){
+            _.extend(query,{out:"map"})
+          }
+          if (typeof query.colorby === "undefined" || query.colorby === null || query.colorby === ""){
+            _.extend(query,{colorby:"validity"})
+          }
           this.update({
-            route:"explore",
+            route:"record",
             path:recordid,
-            query : {
-              out:"map"
-            },
+            query : query,
             extendQuery:true,
             trigger:true,
             replace:true
           }
-          )
+          )          
         } else {
 
           app.model.setRoute({