| | |
|---|
| | | constructor: function (options) { |
|---|
| | | /* options description: |
|---|
| | | spatialReference: default 102100. A SpatialReference object using the wkid of that data. |
|---|
| | | preClustered (boolean) : default false. Whether the data is pre-clustered or not. If true the addPreClusteredData method should be used to add data. |
|---|
| | | preClustered (boolean) : default false. Whether the data is pre-clustered or not. If true the addPreClusteredData method should be used to add data. |
|---|
| | | If false use addData method and clusters will be calculated within the layer. |
|---|
| | | clusterRatio (number): default 75. When not pre clustered this is the ratio to divide the width and height of the map by which is used to draw up a grid to represent cluster areas. Experiment based on your data. |
|---|
| | | displaySubTypeFlares (boolean): default false. Whether to dipslay flares for sub types (ie the count of a property). If this is true, then subTypeFlareProperty must also be set |
|---|
| | |
|---|
| | | singleFlareTooltipProperty (string): default null. Property name to get the values for display in a single point flares tooltips. |
|---|
| | | textSymbol (esri/symbols/TextSymbol): default set below. The text symbol to use in clusters |
|---|
| | | flareShowMode (string): default 'mouse'. Must be 'mouse' or 'tap'. On a mouse enabled device whether to show the flares on mouse enter and hide on mouse leave, or on tap / click. Devices with no mouse will behave like 'tap' anyway. |
|---|
| | | clusteringBegin (function): default null. A basic callback function that get's fired when clustering is beginning. |
|---|
| | | clusteringComplete (function): default null. A basic callback function that get's fired when clustering is complete. |
|---|
| | | clusteringBegin (function): default null. A basic callback function that get's fired when clustering is beginning. |
|---|
| | | clusteringComplete (function): default null. A basic callback function that get's fired when clustering is complete. |
|---|
| | | clusterAreaDisplay (string): default null. Can be either 'always' or 'hover'. 'always' will constantly display the cluster area, 'hover' will only display it on hover of cluster object |
|---|
| | | The cluster area is a ploygon of the total area covered by the points in a cluster. If using preClustered data, each cluster object must contain a property called 'points' which is an array of points for every point in the cluster. example: cluster.points = [[x1, y1], [x2, y2], [x3, y3]]; |
|---|
| | | clusterAreaRenderer (Renderer): default null. This is required if clusterAreaDisplay is set. This can be set in options constructor object or by calling setRenderer as the second argument. |
|---|
| | |
|---|
| | | yPropertyName (string): default 'y'. This is the name of the field in the dataset that represents the y coordinate. |
|---|
| | | idPropertyName (string): default null. This is the name of the field in the dataset that represents a unique id which can be used to identify the flare. This is usefull when you may have multiple points with the same lat/long. |
|---|
| | | */ |
|---|
| | | |
|---|
| | | //set options from constructor parameter or set defaults |
|---|
| | | options = options || {}; |
|---|
| | | this.spatialRef = options.spatialReference || new SpatialReference({ |
|---|
| | |
|---|
| | | .setAlign(Font.ALIGN_START) |
|---|
| | | .setFont(new Font("10pt").setWeight(Font.WEIGHT_BOLD).setFamily("calibri")) |
|---|
| | | .setVerticalAlignment("middle"); |
|---|
| | | defaultTextSymbol.font.size = 14; |
|---|
| | | defaultTextSymbol.font.size = 30; |
|---|
| | | this.textSymbol = options.textSymbol || defaultTextSymbol; |
|---|
| | | this.flareShowMode = options.flareShowMode || "mouse"; |
|---|
| | | |
|---|
| | | //a couple of callbacks - could make them into events on the layer, and/or have the clustering return deferreds. |
|---|
| | | //a couple of callbacks - could make them into events on the layer, and/or have the clustering return deferreds. |
|---|
| | | this.clusteringBegin = options.clusteringBegin; |
|---|
| | | this.clusteringComplete = options.clusteringComplete; |
|---|
| | | |
|---|
| | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | |
|---|
| | | //#region override some GraphicsLayer methods |
|---|
| | | //#region override some GraphicsLayer methods |
|---|
| | | |
|---|
| | | //add an extra argument to setRenderer. It is an optional renderer for displaying the cluster areas. The clusterAreaRenderer can also be set in constructor. |
|---|
| | | setRenderer: function (renderer, clusterAreaRenderer) { |
|---|
| | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | //Add a data point to be clustered. |
|---|
| | | //Each object passed in must contain an x and y property. |
|---|
| | | //Each object passed in must contain an x and y property. |
|---|
| | | //Data should also contain whatever property is set in singleFlareTooltipProperty, so the flare tooltip has something to display for summary flares if needed |
|---|
| | | add: function (p) { |
|---|
| | | |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | //if we got here, then we're adding a single object |
|---|
| | | //NOTE: Use this sparingly - better to use addData (or even better addPreClusteredData). |
|---|
| | | //NOTE: Use this sparingly - better to use addData (or even better addPreClusteredData). |
|---|
| | | //If using add() to add a large amount of objects (eg: in a long loop), clusters and their elements will be removed and recreated when changes are applied to them,this can be expensive |
|---|
| | | //If you use addData and pass in an array clusters will only be created in the DOM once they have been fully calculated |
|---|
| | | |
|---|
| | |
|---|
| | | addPreClusteredData: function (data) { |
|---|
| | | /* |
|---|
| | | Add data that is preclustered - (ie clustered server side). |
|---|
| | | Data is an array, clusters must contain an x and y property as well as a clusterCount property. subTypeCounts is optional. |
|---|
| | | Data is an array, clusters must contain an x and y property as well as a clusterCount property. subTypeCounts is optional. |
|---|
| | | Clusters that have a count less than the this.displaySingleFlaresAtCount option must all contain the data for the single points in an array called singles |
|---|
| | | Singles should also be in the array, they only need to contain an x and y property. Singles should also contain whatever property is set in singleFlareTooltipProperty, so the flare tooltip has something to display for summary flares if needed |
|---|
| | | */ |
|---|
| | |
|---|
| | | addData: function (data) { |
|---|
| | | /* |
|---|
| | | Add data to be clustered. |
|---|
| | | Data is an array of objects. Each object passed in must contain an x and y property. |
|---|
| | | Data is an array of objects. Each object passed in must contain an x and y property. |
|---|
| | | Data should also contain whatever property is set in singleFlareTooltipProperty if one is set, so the flare tooltip has something to display for summary flares if needed |
|---|
| | | This will also clear all data first. add() can be used to add single objects at any time. |
|---|
| | | */ |
|---|
| | |
|---|
| | | |
|---|
| | | _createClusterGrid: function (webExtent) { |
|---|
| | | |
|---|
| | | //get the total amount of grid spaces based on the height and width of the map (divide it by clusterRatio) - then get the degrees for x and y |
|---|
| | | //get the total amount of grid spaces based on the height and width of the map (divide it by clusterRatio) - then get the degrees for x and y |
|---|
| | | var xCount = Math.round(this.map.width / this.clusterRatio); |
|---|
| | | var yCount = Math.round(this.map.height / this.clusterRatio); |
|---|
| | | |
|---|
| | |
|---|
| | | cluster.textShape = textShape; |
|---|
| | | |
|---|
| | | var anims = []; |
|---|
| | | //animate drawing of the cluster. |
|---|
| | | //animate drawing of the cluster. |
|---|
| | | var create = fx.animateTransform({ |
|---|
| | | duration: 200, |
|---|
| | | shape: groupShape, |
|---|
| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | //if there are more flare objects to create that the maxFlareCount and this is a one of those - create a summary flare that contains '...' as the text and make this one part of it |
|---|
| | | //if there are more flare objects to create that the maxFlareCount and this is a one of those - create a summary flare that contains '...' as the text and make this one part of it |
|---|
| | | var willContainSummaryFlare = this.flareObjects.length > this.maxFlareCount; |
|---|
| | | var flareCount = willContainSummaryFlare ? this.maxFlareCount : this.flareObjects.length; |
|---|
| | | |
|---|
| | |
|---|
| | | |
|---|
| | | //ScreenPoint needs to be relative to the top-left corner of the map control. |
|---|
| | | //The matrixTransform on pt gives us a point based on the screen coordinate system. |
|---|
| | | //Therefore if the map has a top offset applied to it the fo object will appear in |
|---|
| | | //Therefore if the map has a top offset applied to it the fo object will appear in |
|---|
| | | //an incorrect spot on the map. We must apply the offset to both the x and y points |
|---|
| | | //to ensure the point is relative to the map control. |
|---|
| | | //As of v3.18 also apply need to apply the surface translate values that may have been created by the api during panning. |
|---|
| | |
|---|
| | | flareGroup.rawNode.appendChild(flareCircle.rawNode); |
|---|
| | | |
|---|
| | | if (fo.flareText) { |
|---|
| | | //if displaying text in the flare, |
|---|
| | | //if displaying text in the flare, |
|---|
| | | flareGroup.flareText = { |
|---|
| | | location: { |
|---|
| | | x: fo.center.x, |
|---|
| | |
|---|
| | | |
|---|
| | | //#endregion |
|---|
| | | |
|---|
| | | //#region helper methods |
|---|
| | | //#region helper methods |
|---|
| | | |
|---|
| | | _getGraphicFromObject: function (obj) { |
|---|
| | | //return the graphic from the obj which could be a single or cluster object |
|---|
| | |
|---|
| | | _animationEnd: function (layer) { |
|---|
| | | //scope: 'this' is the animation that triggered the event, 'layer' is the flare cluster layer object instance |
|---|
| | | |
|---|
| | | //IE10 and below Fix - have to manually set transform back to 1 on elements. They don't seem to appear all of the time again after beign animated back to |
|---|
| | | //IE10 and below Fix - have to manually set transform back to 1 on elements. They don't seem to appear all of the time again after beign animated back to |
|---|
| | | //a scale of 1. IE sucks. |
|---|
| | | dojo.query("> *", this.shape.rawNode).forEach(function (elem) { |
|---|
| | | if (!elem.__gfxObject__) return; |
|---|
