Skip to content

Clustering and heatmap libraries for ArcGIS JS APi mapping applications

Notifications You must be signed in to change notification settings

sathyaprasad/cluster-and-heatmap

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

cluster-and-heatmap

Clustering and heatmap libraries for ArcGIS JS API mapping applications

[View it live] (http://maps.esri.com/SP_DEMOS/crimemapper/index.html)

Usage:

These libraries can be used independently and here is a sample usage in your code:

For clustering:

  1. Include the js file (minified or full version)

     <script type="text/javascript" src="cluster.js"></script>
    
  2. Initialize the cluster layer with options. Look at the constructor of the layer for all possible options.

     clusterLayer = new modules.ClusterLayer(null, {
     	map: map, //esri map object	
     	visible: !1, //default visibility
     	intervals: 4, //number of equal interval cluster classes
     	pixelsSquare: 128, 
     	rgb: [26, 26, 26], //color of the cluster graphic
     	textrgb: [255, 255, 255] //color of label
     });
    
  3. Add points to cluster where points are an array of objects which has x and y.

     //Example
     var points = [{x:12,y:22}];
     clusterLayer.setData(points);
    
  4. Show the layer

     clusterLayer.show() //or hide clusterLayer.hide()
    
  5. Connect to events such as onclick

     //on click do something
     dojo.connect(clusterLayer.graphics, "onClick", function(evt) {
     	//get map extent that cluster respresents
     	var query = new esri.tasks.Query();
     	query.geometry = evt.graphic.attributes.extent;
     	query.outSpatialReference = map.spatialReference;	
    
     	//if you have a feature layer (feature service layer is optional)
     	var f = myfeaturelayer.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW);
    
     	//open popup to show info
     	map.infoWindow.setFeatures([f]);
     	map.infoWindow.show(evt.mapPoint);
     });
    
    
     //Draw graphic on mouse over on the cluster 
     var b = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NULL, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([150, 150, 150]), 2));
     var c = new esri.Graphic(null, b, null, null);
    
     dojo.connect(clusterLayer.graphics, "onMouseOver", function(a) {
     	c.geometry = a.graphic.attributes.extent, map.graphics.add(c)
     });
    
     dojo.connect(clusterLayer.graphics, "onMouseOut", function(a) {
     	map.graphics.remove(c)
     });
    

For Heatmap

  1. Include the js files (minified or full versions, with IE polyfill for heatmap layer)

     <!--[if lt IE 9]>
     <script type="text/javascript" src="excanvas.compiled.js"></script>
     <![endif]-->
    
     <script type="text/javascript" src="heatlayer.js"></script>
    
  2. Initialize the heatmap layer with options. Look at the constructor of the layer for all possible options.

     var heatLayer = new modules.HeatLayer(null, {
     	opacity: .9,
     	visible: !0, //initial visibility
     	globalMax: !1 //density based on all points or visible points
     });
    
  3. Add points to heatmap layer where points are an array of objects which has x and y.

     //Example: 
     var points = [{x:12,y:22}]
     heatLayer.setData(points);
    
  4. Show or hide the layer

     heatLayer.show()  //or heatLayer.hide()
    

Issues

Find a bug or want to request a new feature? Please let us know by submitting an issue.

Licensing

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

[](Esri Tags: ArcGIS JSAPI cluster heatmap feature featureservice many) [](Esri Language: JavaScript)

About

Clustering and heatmap libraries for ArcGIS JS APi mapping applications

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published