<!DOCTYPE html> <html lang="en"> ... <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css"> <script type="text/javascript"> var djConfig = { parseOnLoad: true }; </script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/esri/dijit/css/Popup.css" /> <script type="text/javascript" src="src/heatmap.js"></script> <script type="text/javascript" src="src/heatmap-arcgis.js"></script> <script type="text/javascript"> dojo.require("esri.map"); dojo.require("esri.layers.FeatureLayer"); // Variables var map; var heatLayer; var featureLayer; // get the features within the current extent from the feature layer function getFeatures() { // set up query var query = new esri.tasks.Query(); // only within extent query.geometry = map.extent; // give me all of them! query.where = "1=1"; // make sure I get them back in my spatial reference query.outSpatialReference = map.spatialReference; // get em! featureLayer.queryFeatures(query, function (featureSet) { var data = []; // if we get results back if (featureSet && featureSet.features && featureSet.features.length > 0) { // set data to features data = featureSet.features; } // set heatmap data heatLayer.setData(data); }); } // Init function init() { window.prettyPrint && prettyPrint(); // initial extent of map var initExtent = new esri.geometry.Extent({ xmax: -13624229.32056175, xmin: -13625120.886837104, ymax: 4548374.604660432, ymin: 4547966.144290476, "spatialReference": { "wkid": 102100 } }); // create map map = new esri.Map("map", { extent: initExtent, sliderStyle: "small" }); //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"); map.addLayer(basemap); // once map is loaded dojo.connect(map, 'onLoad', function (theMap) { //resize the map when the browser resizes dojo.connect(dijit.byId('map'), 'resize', map, map.resize); // create heat layer heatLayer = new HeatmapLayer({ /* config: { "useLocalMaximum": true, "radius": 90, "gradient": { 0.45: "rgb(000,000,255)", 0.55: "rgb(000,255,255)", 0.65: "rgb(000,255,000)", 0.95: "rgb(255,255,000)", 1.00: "rgb(255,000,000)" } }, */ "map": map, "domNodeId": "heatLayer", "opacity": 0.85 }); // add heat layer to map map.addLayer(heatLayer); // resize map map.resize(); // create feature layer to get the points from featureLayer = new esri.layers.FeatureLayer("http://servicesbeta.esri.com/arcgis/rest/services/SanFrancisco/SFStreetTreesRendered/MapServer/0", { mode: esri.layers.FeatureLayer.MODE_ONDEMAND, visible: false }); map.addLayer(featureLayer); // get features from this layer getFeatures(); // on map extent change dojo.connect(map, "onExtentChange", function (extent) { // get features getFeatures(); featureLayer.hide(); heatLayer.show(); }); }); } // call init on load of dojo dojo.addOnLoad(init); </script> </head> <body> <div id="heatmapArea" class="well" style="width:610px;padding:0;height:400px;cursor:pointer;position:relative;"> <div id="heatLayer"></div> <div id="map"></div> </div> </body> </html>