Skip to content

Latest commit

 

History

History
131 lines (77 loc) · 3.67 KB

README.md

File metadata and controls

131 lines (77 loc) · 3.67 KB
Raw

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)