Esri/heatmap-layer-js won't display across dateline

Anonymous User · ‎07-29-2014

I'm using the Esri/heatmap-layer-js by Matt Driscoll and have noticed that it does not render across the international dateline.

To see this behavior in the sample, zoom out from San Francisco to the world and pan west or east across the dateline and continue to San Francisco. In Firebug I can see the data is being queried, but it simply is not being rendered.

Is this expected behavior? In my use case I have world wide data (v.s. a small area like San Francisco) so need to have continuous display across the dateline.

MattDriscoll · ‎08-19-2014

Hey Martin,

Thanks for the notice. I got the layer working across the dateline by normalizing each point and the map's extent. Let me know if the code is working for you now.

heatmap.js ArcGIS JavaScript API Heatmap Layer‌

I am guessing the same issue is occurring with the cluster layer. The points probably just need to be normalized so that they display across the dateline.

Also, there's been a new release of heatmap.js so I'll likely be writing some code to support the latest version.

View solution in original post

Anonymous User · ‎08-19-2014

I see the same behavior, (i.e. not displaying data outside the original world extent when panning west or east), with the cluster layer in the Summary Viewer. I see from the GitHub page (by Kelly Hutchins and Sajit Thomas) for ClusterLayer.js that it inherits from GraphicsLayer.

To see this behavior zoom out to a global scale. The cluster points display:

Next, pan West or East, and the cluster points are no longer displayed:

This problem is stopping me using either HeatmapLayer and ClusterLayerfrom in my own apps. Neither the FeatureLayers or GraphicsLayers I'm using exhibit this behavior.

MattDriscoll · ‎08-19-2014

Hey Martin,

Thanks for the notice. I got the layer working across the dateline by normalizing each point and the map's extent. Let me know if the code is working for you now.

heatmap.js ArcGIS JavaScript API Heatmap Layer‌

I am guessing the same issue is occurring with the cluster layer. The points probably just need to be normalized so that they display across the dateline.

Also, there's been a new release of heatmap.js so I'll likely be writing some code to support the latest version.

Anonymous User · ‎08-20-2014

Hi Matt,

Yes I see you fixed it, thanks!

In an attempt to figure this out myself, I actually started down the road of normalizing the extent, but didn't know about the (private) _normalize() method on esri/geometry/Extent, nor the normalize() method on esri/Geometry/Point. As an aside, a search in the API docs for 'normalize' only returns esri/geometry/normalizeUtils, so that's what I was experimenting with.

I'll try to copy your approach with the ClusterLayer, and do a GitHub fork/pull (for the first time) if it isn't fixed before I get to it.

MattDriscoll · ‎08-20-2014

Yes, we'll see if we can make a public function out of that _normalize(). Let me know if you have success with the clusterlayer.

Anonymous User · ‎08-20-2014

Matt, I just read about heatmap.js version 2. It says "stronger, to handle even more datapoints (40k+)". Is 40k points doable with the ArcGIS JS API?

MattDriscoll · ‎08-20-2014

We'll see. It should be the same.

Anonymous User · ‎08-20-2014

Hmmm, spoke too soon. When I zoom out and pan to include the dateline, this "c.getWidth is not a function" error comes up. I'm fairly certain that it occurs on line 122 in the convertHeatMapData function of HeatmapLayer.js:

screenGeometry = screenUtils.toScreenGeometry(normalizedExtent, this.get("map").width, this.get("map").height, parsedData.data[xParsed][yParsed].dataPoint);

Anonymous User · ‎08-21-2014

I think something goes wrong when getHeight() and getWidth() are called on a normalized Extent. The following code, a modified sample in the ArcGIS API for JavaScript Sandbox, displays an alert box with the values returned from these functions on the map extent-change event. Its seems that while panning around, when the normalized extent includes the int'l dateline these two functions do not return anything.

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Home Extent</title>
  <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
  <style>
    html, body, #map {
      padding:0;
      margin:0;
      height:100%;
    }
    #HomeButton {
      position: absolute;
      top: 95px;
      left: 20px;
      z-index: 50;
    }
  </style>
  <script src="//js.arcgis.com/3.10/"></script>
  <script>

    require([
      "esri/map", 
      "esri/dijit/HomeButton",
      "dojo/on",
      "dojo/domReady!"
    ], function(
      Map, HomeButton,on
    )  {

      var map = new Map("map", {
        center: [-56.049, 38.485],
        zoom: 3,
        basemap: "streets"
      });
            
      var home = new HomeButton({
        map: map
      }, "HomeButton");
      home.startup();
      
      on(map,"extent-change", function(a,b,c,d){
        var w = map.extent._normalize().getWidth();
        var h = map.extent._normalize().getHeight();
        alert(w + "," + h);
      })

    });
  </script>
</head>
<body>
  <div id="map" class="map">
    <div id="HomeButton"></div>
  </div>
</body>
</html>

KenBuja · ‎08-21-2014

I'm wondering if this is the same issue that shows up in this problem with the dateline when changing basemaps. Although the link to my example didn't make it through the forum migration, it's located here. John Gravois‌ started looking into it but never did report on his findings.