HeatMap renderer requirements - ArcGIS JavaScript API 4.8

651
2
Jump to solution
09-18-2018 12:05 AM
nita14
by
Regular Contributor

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.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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
by
Regular Contributor

Thanks! Another good reason to update to 10.6.1.

Adam

0 Kudos