topic Re: creating\rendering a heatmap not working in ArcGIS JavaScript Maps SDK Questions

creating\rendering a heatmap not working

deleted-user-wcpelUUf_XXx — Mon, 20 May 2019 11:19:56 GMT

I am having a problem rendering a heatmap. I am sure the heatmap is created but it doesnt display when I replace or add a renderer.

var TF = new FeatureLayer({
url:"https://services3.arcgis.com/1pxU2hJU9ZszJDcX/ArcGIS/rest/services/Young_Adult_Treatment_Facilities/FeatureServer/0",
})

//apply HM to layer
function apply(result){
console.log("applying")
TF.renderer = result.renderer;
};

var heatmapParams = {
layer: TF,
basemap: map.basemap
};

document.getElementById("butt").addEventListener("click", heatmapRendererCreator.createRenderer(heatmapParams).then(apply));

Whenever I call the apply function to create a renderer the point layer disappears.

Here's a codepen:

https://codepen.io/segev-salman/pen/eaEbRv

Re: creating\rendering a heatmap not working

RobertScheitlin__GISP — Mon, 20 May 2019 12:46:39 GMT

Segev,

You need to understand that the 4.x API and the 3.x API are not in parity with each other, so you can not use 3.x code samples in your 4.x code. Currently there is no "esri/renderers/smartMapping/creators/heatmap" in the 4.x API. Look at this sample for how to create a heatmap in 4.x.

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=visualization-heatmap

Re: creating\rendering a heatmap not working

deleted-user-wcpelUUf_XXx — Mon, 20 May 2019 13:32:18 GMT

Robert,

I was following this 4.x api-reference:

https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-smartMapping-creators-heatmap.html

i want to use the smartMapping thing for optimal color, and not specify color breaks like in the renderer.

Re: creating\rendering a heatmap not working

RobertScheitlin__GISP — Sat, 11 Dec 2021 15:06:34 GMT

OK, My mistake I did not see that module in 4.x.

Here is your code working. You were not defining the field or view for the renderer. and your button click event listener was wrong.

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Heat-map creator</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  
  <style>
.w3-button {width:250px;}    
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  
  <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
  <script src="https://js.arcgis.com/4.11/"></script>
  
  <script>  
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
  "esri/renderers/smartMapping/creators/heatmap"
    ], function(Map, MapView,FeatureLayer,heatmapRendererCreator) {
      
      var pov = new FeatureLayer({
        url:"https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Poverty_by_Age_Boundaries/FeatureServer/1",
        minScale:40000000,
        maxScale:4000
      })
      
      var TF = new FeatureLayer({
        url:"https://services3.arcgis.com/1pxU2hJU9ZszJDcX/ArcGIS/rest/services/Young_Adult_Treatment_Facilities/FeatureServer/0",
      })
      //apply HM to layer      
      function apply(result){
        console.log("applying")
       TF.renderer = result.renderer;
       };
      
      var map = new Map({
        basemap: "gray",
        layers:[pov,TF]
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-102.370576, 40.172530],
        zoom: 5
      });
      
      var heatmapParams = {
        layer: TF,
        basemap: map.basemap,
        field: "adlt",
        view: view
      };
      
document.getElementById("butt").addEventListener("click", function(){ heatmapRendererCreator.createRenderer(heatmapParams).then(apply)});
    });
  </script>
</head>
<body>
<div id = "butt">
  <p><button class="w3-button w3-orange">create Heatmap</button></p>
</div>  
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: creating\rendering a heatmap not working

deleted-user-wcpelUUf_XXx — Mon, 20 May 2019 14:27:54 GMT

Thank you this is it!

Re: creating\rendering a heatmap not working

RobertScheitlin__GISP — Mon, 20 May 2019 18:42:51 GMT

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.