# Examples See how easy it is to create heatmaps with heatmap.js

This is a demonstration of a canvas heatmap overlay with the ArcGIS API for JavaScript.

    <!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>