![(please configure the [header_logo] section in trac.ini)](/trac/chrome/site/trac_banner.jpg)
Changeset 24408 in main
- Timestamp:
- 01/04/22 14:11:42 (4 months ago)
- Location:
- trunk/ibisph-view/src/main/webapp
- Files:
-
- 6 edited
-
js/L.Control.Choropleth.js (modified) (4 diffs)
-
js/L.GeoJSON.Interactive.Choropleth.js (modified) (4 diffs)
-
js/L.GeoJSON.Interactive.js (modified) (4 diffs)
-
js/L.LayerSets.js (modified) (3 diffs)
-
js/jquery.leaflet.js (modified) (1 diff)
-
xslt/xml/Interactive.xslt (modified) (5 diffs)
Legend:
- Unmodified
- Added
- Removed
-
trunk/ibisph-view/src/main/webapp/js/L.Control.Choropleth.js
r23071 r24408 591 591 if((null == value) || (undefined == value)) return(""); 592 592 593 // first lookup an associated value title. The data values passed to 594 // this object has formatted values in an array that is indexed via the 595 // value. 593 // if measure formatter then use it and if creates a string return it. 594 if(this.options.legend.measureFormatter) 595 { 596 var formattedValue = this.options.legend.measureFormatter(value); 597 if(formattedValue) return(formattedValue); 598 } 599 600 // If no formatter then lookup an associated value title. The data 601 // values passed to this object has formatted values in an array that 602 // is indexed via the value. 596 603 var title = this.choroplethLayerDataValues.valueTitlesByValue[value]; 597 604 598 // if no formatted title found then check and adjust for decimals. This605 // If no formatted title found then check and adjust for decimals. This 599 606 // is typically needed for determinant/range values that are calculated 600 607 // and not set via actual values. … … 602 609 { 603 610 title = String(value); 604 value = Number(value);605 611 var decimalPlace = title.indexOf("."); 606 612 607 613 if(-1 < this.choroplethLayerDataValues.maxDecimals) 608 title = String( value.toFixed(this.choroplethLayerDataValues.maxDecimals));614 title = String(Number(value).toFixed(this.choroplethLayerDataValues.maxDecimals)); 609 615 else if(decimalPlace > 4) 610 616 title = title.substring(0, decimalPlace); … … 634 640 } //~~~~~~~~~~~~~~~~~~~~~~~~~~~ End of Function ~~~~~~~~~~~~~~~~~~~~~~~~~~~ 635 641 636 642 637 643 // returns the group index assoc with the choro value. If nothing matches/ 638 644 // found 0 is returned which results in the default [0] cholo color. … … 640 646 // value, LCL and UCL the classification is determined here as opposed to 641 647 // the geostats mechanism that builds bounds that the value fall between. 642 ,getChoroplethIndex: function(recordGeoID)648 ,getChoroplethIndex: function(recordGeoID) 643 649 { 644 650 var choroplethLayerValues = this.choroplethLayerDataValues.valuesByGeoID[recordGeoID]; -
trunk/ibisph-view/src/main/webapp/js/L.GeoJSON.Interactive.Choropleth.js
r23075 r24408 77 77 78 78 79 79 80 // ================================== O V E R R I D E N F U N C T I O N S 80 81 ,initialize: function(optionOverrides, infoLayerContainer) … … 111 112 var data = 112 113 { 113 values: new Array()114 , valueTitlesByValue: new Array()115 , minValue: 10000116 , maxValue: -10000117 , maxDecimals: 0118 , valuesByGeoID: new Array()114 "values": new Array() 115 ,"valueTitlesByValue": new Array() 116 ,"minValue": 10000 117 ,"maxValue": -10000 118 ,"maxDecimals": 0 119 ,"valuesByGeoID": new Array() 119 120 }; 120 121 … … 132 133 data.valuesByGeoID[recordGeoID] = 133 134 { 134 measureValue: measureValue135 , lowerLimit: layer.feature.properties[scopedContext.options.dataObject.fieldName.lowerLimit]136 , upperLimit: layer.feature.properties[scopedContext.options.dataObject.fieldName.upperLimit]137 , measureValueTitle: measureValueTitle135 "measureValue": measureValue 136 ,"lowerLimit": layer.feature.properties[scopedContext.options.dataObject.fieldName.lowerLimit] 137 ,"upperLimit": layer.feature.properties[scopedContext.options.dataObject.fieldName.upperLimit] 138 ,"measureValueTitle": measureValueTitle 138 139 }; 139 140 … … 167 168 return(data); 168 169 } //~~~~~~~~~~~~~~~~~~~~~~~~~~~ End of Method ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 170 169 171 170 172 -
trunk/ibisph-view/src/main/webapp/js/L.GeoJSON.Interactive.js
r23075 r24408 206 206 } //~~~~~~~~~~~~~~~~~~~~~~~~~~~ End of Method ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 207 207 208 // real addData function that recurses and processes.208 // Base "addData" function that recurses and does all the processing work. 209 209 ,_addData: function(geojson) 210 210 { … … 243 243 layer.bindContextMenu 244 244 ({ 245 contextmenuInheritItems: this.options.contextmenuInheritItems246 , contextmenuItems: this.options.contextmenuItems245 "contextmenuInheritItems": this.options.contextmenuInheritItems 246 ,"contextmenuItems": this.options.contextmenuItems 247 247 }); 248 248 } … … 288 288 var properties = layer.feature.properties; 289 289 var geoIDPropertyName = this.options.dataObject.layerGeoIDPropertyName; 290 var dataValuesRecord = this.getDataValuesRecord(properties[geoIDPropertyName]);290 var dataValuesRecord = this.getDataValuesRecord(properties[geoIDPropertyName]); 291 291 if(dataValuesRecord) $.extend(properties, dataValuesRecord); 292 292 } … … 316 316 for(var i=0; i != this.options.dataObject.data.length; i++) 317 317 { 318 var record = this.options.dataObject.data[i];319 var recordGeoID 320 321 var recordGeoIDSplit = recordGeoID.split(".");318 var record = this.options.dataObject.data[i]; 319 var recordGeoID = record[this.options.dataObject.fieldName.geoID]; // returns [i]["Category"] = GeoCnty.1 320 321 var recordGeoIDSplit = recordGeoID.split("."); 322 322 var recordGeoDimensionName = recordGeoIDSplit[0]; 323 323 var recordGeoDimensionValue = recordGeoIDSplit[1]; -
trunk/ibisph-view/src/main/webapp/js/L.LayerSets.js
r20915 r24408 62 62 63 63 // constructor - called when new L.Class.extend. This set of layers is created 64 // via the jquery.leaflet.js controller code. Th is init code does most of65 // the work. It adds/sets the properties then kicks things off via the66 // _addLayer().64 // via the jquery.leaflet.js controller code. The bulk of the work happens 65 // when the layersets are added to the map where the overridden onAdd API 66 // call calls _addLayerSets. 67 67 ,initialize: function 68 68 ( … … 85 85 86 86 // Sets up each of the layer sets' layers. This code is called via the 87 // overwritten this.onAdd which is called via super's addMap call which is 88 // called via the addTo(map). 89 // - This func is responsible to create (e.g. new/instan) all the leaflet layer 90 // objects. Any special options can be set in this code with this code 91 // accessing the LayerSets.options to retrieve values and putting those values 92 // into the "options" for the new layer to be created. 93 // - Layers are loaded and shown on the map IF the layer's "show" property is 94 // set to true. 87 // overridden this.onAdd which is called via super's addMap call which is 88 // called via the addTo(map). This func is responsible to create (e.g. 89 // new/instan) all the leaflet layer objects that are defined within its 90 // options. Layers are auto loaded and shown on the map IF the layer's 91 // "show" property is set to true. Otherwise loading is controlled by user 92 // interaction via L.Control.Layersets code. 95 93 ,_addLayerSets: function() 96 94 { … … 291 289 292 290 // ======================================= L E A F L E T O V E R R I D E S 293 // override the mainonAdd to load all the layers to the map.291 // override the parent leaflet layerSet onAdd to load all the layers to the map. 294 292 ,onAdd: function(map) 295 293 { -
trunk/ibisph-view/src/main/webapp/js/jquery.leaflet.js
r23071 r24408 1 1 /*------------------------------------------------------------------------------ 2 JQuery style leaflet wrapper that provides a java MVC pattern "controller" 3 type functionality for the leaflet map. This code creates all leaflet 4 objects with the associated options/properties and wires together as needed. 5 6 IMPORTANT NOTE: ********* CHANGED FROM LAYER CONTROL TO LAYER SETS 7/11/2017. 7 8 BASIC HOW MAPS WORK: 9 0) XSLT code includes needed .js and .css files. 10 1) XSLT code creates the map container HTML element. 11 2) XSLT code then creates the IBIS-PH map object's "options". Each plugin 12 has it's own options section. Each main object section is built via 13 the jquery "extend" to build the final "options". The options start 14 with the least specific (base json options) then adds (merges) a more 15 specific "named map configuration" options, adds any page specific/ 16 request specific options, and finally any very specific thematic options. 17 3) XSLT built js code then calls this "controller" code (via js once the 18 page is processed by the browser). 19 4) This code then creates each leaflet plugin object based on the associated 20 option section. 21 NOTE: each plugin merges/overwrites its default options with the more 22 specific options (which are passed via the object's constructor). 23 5) For Choro maps (where the option's map "type" is set to "choropleth"): 24 a) Creates the choroplethLayer 25 b) Sets the layerSets.options.sets["choropleth"].layers[options.choroplethControl.layerSetsKey].layer; 26 c) Creates the Choropleth Control with its options and the above choroplethLayer. 27 d) Adds the Choropleth Control to the leafletMap. 28 e) The Choropleth Control's init code adds a choro layer "dataloaded" 29 listener to call: onDataAvailable. 30 f) When the choro layer is loaded (via an AJAX call) the layer's addData 31 function is called (if successful ajax call) which then fires the 32 "dataloaded" event which calls choro control's onDataAvailable func. 33 g) The choro control's onDataAvailable sets up the data arrays, geostats, 34 misc arrays needed later, and calls the controls update func. 35 h) The choro control's update defines the geostat Determinate Values 36 (boundary values), and calls the choro layer's setupChoroplethLayers 37 with "this" being the choro control object. 38 i) The choro layer's setupChoroplethLayers loops each of its layers to 39 set the peer/group index and associated color of that layer (e.g. 40 sets the choro color) via the Choropleth Control's getChoroplethIndexAndColor(dataRecordGeoID) 41 which simply returns an index based on the value that was passed in. 42 *** When a different num of groups or group type or reverse colors is 43 selected the control's "update" is called (h) which again kicks off 44 the geostats groupings and builds the approp legend etc. 2 JQuery style object instan wrapper for leaflet map creation. This provides 3 a java MVC pattern "controller" type functionality for the leaflet map by 4 creating all leaflet plug in objects with the associated options/properties 5 and wires everything together as needed. 6 7 8 BASIC LEAFLET MAP OVERVIEW: 9 - A leaflet map consists of the main map object along with a series of 10 leaflet plugins (javascript objects). The main types of plugins are 11 controls (which have some sort of visual control interface), layers 12 (points or areas organized within layersets), and panels. 13 - XSLT creates request specific json options for the map plugins/objects. 14 - XSLT creates the map's HTML and javascript. 15 - When the page loads, the main map object is created and the plugins/objects 16 are added to that map (which fires that object's onAdd method). 17 - When the L.LayerSets is added to the map the standard onAdd handler is 18 called. This calls _addLayerSets which loops all the layetset's layers 19 and typically calls the loadLayerGeoJSON which then fires an ajax 20 request to load that layer. The ajax success handler then calls the 21 layer's addData so that the layer can process data and sub layers etc. 22 23 MAP CODE BASICS: 24 0) Page XSLT includes needed .js and .css files via DataViz.xxxxMapJavaScript 25 1) Page XSLT creates the map container HTML element via DataViz.mapContainer. 26 2) Page XSLT builds leaflet constructor options via the DataViz.populateKendoLeafletDataVizObject. 27 3) Page XSLT has a document ready that calls a dynmically built xxx.init() 28 function (step 2) that instans the kendo and leaflet objects (options 29 built via DataViz XSLT code). This xxx.init() uses the standard jquery 30 constructor plugin mechanism ($.fn.leaflet) to invoke the code below. 31 Example: this.leafletMap = $("#SomeMapContainerID").leaflet(this.leafletMapOptions); 32 4) The code below creates/instans the specific leaflet objects using the 33 full set of leaflet plugin/component options built in the previous 34 steps. The objects in this code includes the actual leaflet map, zoom, 35 info panals, layer controls etc. Things are kicked off by adding these 36 plugin objects to the map which uses events and API calls. 37 38 NOTE: Each leaflet object/plugin has it's own options section within the 39 main, supplied options. Object/plugin options are built via the jquery 40 using "extend" so that options can be built starting with the least 41 specific (base json options) then adding (merges) more specific "named 42 map configuration" options, and finally adding page specific/request 43 specific thematic options. 44 45 HOW CHORO LAYER IS LOADED: 46 Choro maps are defined with the option's map "type" set to "choropleth". 47 a) Create the choroplethLayer (L.GeoJSON.Interactive.Choropleth). 48 b) Add the choro layer to the layerset via: 49 layerSets.options.sets["choropleth"].layers[options.choroplethControl.layerSetsKey].layer; 50 c) Create the Choropleth Control with its options and the above choroplethLayer. 51 d) The Choropleth Control's init code (L.Control.Choropleth.initialize) adds 52 a choro layer "dataloaded" listener on it's choro layer (a) with a 53 callback to the control's onDataAvailable function. 54 e) Add the Choropleth Control to the leafletMap. This adds the choro's 55 legend UI. The bulk of the actual choro code (geostats, sub layer 56 coloring etc.) is invoked when the choro layer is loaded and the choro 57 layer's "dataloaded" event is fired (which calls the control's registered 58 onDataAvailable callback). 59 f) When the choro layer is loaded (via an AJAX call) the layer's addData 60 function is called (if successful ajax call) which then fires the 61 "dataloaded" event which calls the choro control's onDataAvailable func. 62 g) The choro control's onDataAvailable (event handler) is passed the just 63 loaded layer data values. The geostats object is then created with the 64 supplied layer data values. Then calls the controls update func. 65 h) The choro control's update defines the geostat Determinate Values 66 (boundary values), and calls the choro layer's setupChoroplethLayers 67 with "this" being the choro control object. 68 i) The choro layer's setupChoroplethLayers loops each of its layers to 69 set the peer/group index and associated color of that layer (e.g. 70 sets the choro color) via the Choropleth Control's getChoroplethIndexAndColor(dataRecordGeoID) 71 which simply returns an index based on the value that was passed in. 72 *** When a different num of groups or group type or reverse colors is 73 selected the control's "update" is called (h) which again kicks off 74 the geostats groupings and builds the approp legend etc. 75 76 77 on grid / datasource change 78 loop all the data fields and build a similar struct as the choro control needs then 79 call that callback func with said data which does a new geostats etc. 80 81 not sure if each sub layer's properties have the rank set??? If so and need to clear!!!!! 82 83 need to have geostats used for kendo as well so can filter on the peer group. 84 but this means that filter can't refire the grouping!!! So have to have a UI 85 that says to recalc the filter. 86 87 the layer properties does not have a peer value 88 45 89 46 90 map: options passed to the leaflet map object creation -
trunk/ibisph-view/src/main/webapp/xslt/xml/Interactive.xslt
r24395 r24408 37 37 38 38 RECORD_DIMENSION_FIELD 39 RECORD_FIELD_NAME - used for the data array/datasource fieldname 39 NAME - used for the data array/datasource fieldname 40 TITLE - used for kendo chart series and cat title. 40 41 DIMENSION_USAGE - series, category, constant 41 42 DIMENSION_NAMES 42 43 DIMENSION_NAME 43 TITLE - used for kendo chart series and cat title.44 44 DIMENSION_VALUES_COUNT - number of dimension values to determine use. 45 45 if count = 1 or 0 then don't have to do any special … … 82 82 83 83 <RECORD_DIMENSION_FIELD> 84 <DIMENSION_USAGE><xsl:value-of select="$usage"/></DIMENSION_USAGE> 85 <RECORD_FIELD_NAME><xsl:value-of select="$fieldName"/></RECORD_FIELD_NAME> 84 <NAME><xsl:value-of select="$fieldName"/></NAME> 86 85 <TITLE> 87 86 <xsl:call-template name="Interactive.csvDimensionsTitleList"> … … 91 90 </xsl:call-template> 92 91 </TITLE> 92 <DIMENSION_USAGE><xsl:value-of select="$usage"/></DIMENSION_USAGE> 93 93 <DIMENSION_NAMES> 94 94 <xsl:for-each select="$dimensionUsages//DIMENSION_USAGE[USAGE=$usage]"> … … 121 121 RECORD_DIMENSION_FIELD 122 122 DIMENSION_USAGE category/series/constant - differs from NAME in NOT camel case and matches the DIMENSION_USAGE/NAME 123 RECORD_FIELD_NAME Category/Series/Constant - differs from usage in that it is camel case via the XSLT code when creating this struct/NAME123 NAME Category/Series/Constant - differs from usage in that it is camel case via the XSLT code when creating this struct/NAME 124 124 TITLE 125 125 DIMENSION_NAMES … … 187 187 <xsl:if test="$dimensionUsage/USAGE"> 188 188 <RECORD_DIMENSION_FILTER> 189 <RECORD_DIMENSION_FIELD_NAME><xsl:value-of select="$recordDimensionFields/RECORD_DIMENSION_FIELD[DIMENSION_NAMES/DIMENSION_NAME = $dimension/NAME]/ RECORD_FIELD_NAME"/></RECORD_DIMENSION_FIELD_NAME>189 <RECORD_DIMENSION_FIELD_NAME><xsl:value-of select="$recordDimensionFields/RECORD_DIMENSION_FIELD[DIMENSION_NAMES/DIMENSION_NAME = $dimension/NAME]/NAME"/></RECORD_DIMENSION_FIELD_NAME> 190 190 <DIMENSION_NAME><xsl:value-of select="$dimension/NAME"/></DIMENSION_NAME> 191 191 <DIMENSION_TITLE><xsl:value-of select="ibis:getDimensionTitle($dimension)"/></DIMENSION_TITLE>
Note: See TracChangeset
for help on using the changeset viewer.
