HeatMap renderer requirements - ArcGIS JavaScript API 4.8

nita14 · ‎09-18-2018

Dear All,

Does anybody know if there are some limitations regarding HeatmapRenderer | API Reference | ArcGIS API for JavaScript 4.8 related to Feature and MapServices in 10.5.1 version? My sample code does not show up the heatmap (does not even download HeatMap<****>.js files when using autocasting) and finishes once query returned the data from the service. No errors returned to the console.

This code works fine since it is grabbing the data from 10.6.1 service. But, once I replace the url to 10.5.,no longer it works properly.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

  <title>Visualize points with a heatmap - 4.8</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <script>
    var dojoConfig = {
      has: {
        "esri-featurelayer-webgl": 1
      }
    };
  </script>

  <script src="https://js.arcgis.com/4.8/"></script>

  <script>
    require([
      "esri/Map",
      "esri/layers/FeatureLayer",
      "esri/views/MapView",
      "esri/config",
      "esri/widgets/Legend",
      "dojo/domReady!"
    ], function(
      Map,
      FeatureLayer,
      MapView,
      esriConfig,
      Legend
    ) {

      // If CSV files are not on the same domain as your website, a CORS enabled server
      // or a proxy is required.

      const url =
        "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/attendees/FeatureServer/0"
      esriConfig.request.corsEnabledServers.push(url);

      // Paste the url into a browser's address bar to download and view the attributes
      // in the CSV file. These attributes include:
      // * mag - magnitude
      // * type - earthquake or other event such as nuclear test
      // * place - location of the event
      // * time - the time of the event


      // The heatmap renderer assigns each pixel in the view with
      // an intensity value. The ratio of that intensity value
      // to the maxPixel intensity is used to assign a color
      // from the continuous color ramp in the colorStops property

      const renderer = {
        type: "heatmap"
      };

      const layer = new FeatureLayer({
        url: url,
        title: "Attendess",
        copyright: "Esri",
        renderer: renderer
      });

      const map = new Map({
        basemap: "gray",
        layers: [layer]
      });

      const view = new MapView({
        container: "viewDiv",
        center: [21, 40],
        zoom: 3,
        map: map
      });

      view.ui.add(new Legend({
        view: view
      }), "bottom-left");

    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I use Mozilla ESR 52.7.4.

Any hints are much appreciated.

RobertScheitlin__GISP · ‎09-18-2018

Adam,

Heatmap requires WebGL, which requires Feature Layer services that are hosted or 10.6.1+

https://community.esri.com/thread/220100-heatmap-renderer-is-not-working-with-featurelayer

View solution in original post

RobertScheitlin__GISP · ‎09-18-2018

Adam,

Heatmap requires WebGL, which requires Feature Layer services that are hosted or 10.6.1+

https://community.esri.com/thread/220100-heatmap-renderer-is-not-working-with-featurelayer

nita14 · ‎09-18-2018

Thanks! Another good reason to update to 10.6.1.

Adam