creating\rendering a heatmap not working

575
5
Jump to solution
05-20-2019 04:19 AM
deleted-user-wcpelUUf_XXx
New Contributor III

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

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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>

View solution in original post

5 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos
deleted-user-wcpelUUf_XXx
New Contributor III

Robert,

I was following this 4.x api-reference:

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

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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>
deleted-user-wcpelUUf_XXx
New Contributor III

Thank you this is it!

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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