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
Solved! Go to Solution.
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>
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.
Robert,
I was following this 4.x api-reference:
i want to use the smartMapping thing for optimal color, and not specify color breaks like in the renderer.
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>
Thank you this is it!
Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.