Heatmap layer as Graphics Layer?

[philippenn]

I'm using the Patrick Wied heatlayer http://www.arcgis.com/home/item.html?id=3a6d8158252e4b96a8ecfb8b912df78d to render a heatmap. This works great but, because it's a dynamic layer and not a graphics layer, the layer appears below any graphics in the map.

I see here that you can't create a custom graphics layer. Is this likely to change in the future, or is there a workaround for this issue?


TIA,



Phil

[MattDriscoll]

Hi Phil, I'm not sure if it could be converted to a graphics layer. It might be possible but it needs to be a layer that accepts a bitmap, not points.

Another option would be to just use the DIV with the canvas tag and position that over the map. In my implementation, I just have the DIV element containing the CANVAS element hidden and then the CANVAS bitmap is exported into the dynamic layer. However, the dynamic layer isn't absolutely necessary. The z-index of the CANVAS element could just be positioned over the map.

I have the code here if you'd like to fork or contribute to it: https://github.com/driskull/ArcGIS-Heatmap-Layer--heatmap.js-

[BenFousek]

There's a good reason why the graphics layers are on top of dynamic layers...however if you wish to move a dynamic layer above all graphics layers here's the scoop.

The layers are in the map node like this:

<div id="map_layers">
   <div id="map_dynamic_layer_1"></div> //the layer id = dynamic_layer_1, the map_ is added by the api
   <div id="map_dynamic_layer_2"></div>
   <div id="map_dynamic_layer_3"></div>
   <svg id="map_gc">
      <g id="graphics_layer_1"> //the g id = graphics_layer_1, api adds nothing
         GRAPHICS HERE
      </g>
      <g id="graphics_layer_2"></g>
   </svg>
</div>

You'll notice that all layers except graphic layers (this includes dynamic, tiles, wms, custom, etc) are divs, while graphic layers are contained in a single svg element. They are rendered top to bottom. When you reorder non-graphic layers with map.reorderLayer(layer, index) the api moves the layer to the index passed, always leaving the svg element on the bottom (rendered last and therefore on top). When passing a graphic layer through map.reorderLayer(layer, index) the layer is moved within the svg element. So the svg (all graphics) is a layer just like the others.

Let's say we want "dynamic_layer_1" on top of the graphic layers:

dojo.byId('map_layers').insertBefore( dojo.byId('map_gc'), dojo.byId('map_dynamic_layer_1') );

Done.

Now that we know how it's done, let's discuss why you don't want to do it:
1) May cause instability (IE is most vulnerable to this, and let's face it; it's a challenge enough getting the anything to work properly in IE to start with)
2) Will cause erratic panning and zooming occasionally
3) The user will no longer be able to interact with graphics or features (unless you move the layer down first, and the main reason why things are the way they are)
4) You never know what's going to happen if you try to reorder layers using map.reorderLayer(layer, index) should you choose to do some reordering
5) I think of several other issues and there is sure to be more

If you are making a nice "story" map with no user interaction with graphics or features this will work ok, but...

[philippenn]

Hi Phil, I'm not sure if it could be converted to a graphics layer. It might be possible but it needs to be a layer that accepts a bitmap, not points.

Another option would be to just use the DIV with the canvas tag and position that over the map. In my implementation, I just have the DIV element containing the CANVAS element hidden and then the CANVAS bitmap is exported into the dynamic layer. However, the dynamic layer isn't absolutely necessary. The z-index of the CANVAS element could just be positioned over the map.

I have the code here if you'd like to fork or contribute to it: https://github.com/driskull/ArcGIS-Heatmap-Layer--heatmap.js-

Thanks. I'll take a look at that. I may also take a look at the mechanism below.

I'll post here how things go.


cheers


Phil

[philippenn]

There's a good reason why the graphics layers are on top of dynamic layers...however if you wish to move a dynamic layer above all graphics layers here's the scoop.

The layers are in the map node like this:

<div id="map_layers">
   <div id="map_dynamic_layer_1"></div> //the layer id = dynamic_layer_1, the map_ is added by the api
   <div id="map_dynamic_layer_2"></div>
   <div id="map_dynamic_layer_3"></div>
   <svg id="map_gc">
      <g id="graphics_layer_1"> //the g id = graphics_layer_1, api adds nothing
         GRAPHICS HERE
      </g>
      <g id="graphics_layer_2"></g>
   </svg>
</div>

You'll notice that all layers except graphic layers (this includes dynamic, tiles, wms, custom, etc) are divs, while graphic layers are contained in a single svg element. They are rendered top to bottom. When you reorder non-graphic layers with map.reorderLayer(layer, index) the api moves the layer to the index passed, always leaving the svg element on the bottom (rendered last and therefore on top). When passing a graphic layer through map.reorderLayer(layer, index) the layer is moved within the svg element. So the svg (all graphics) is a layer just like the others.

Let's say we want "dynamic_layer_1" on top of the graphic layers:

dojo.byId('map_layers').insertBefore( dojo.byId('map_gc'), dojo.byId('map_dynamic_layer_1') );

Done.

Now that we know how it's done, let's discuss why you don't want to do it:
1) May cause instability (IE is most vulnerable to this, and let's face it; it's a challenge enough getting the anything to work properly in IE to start with)
2) Will cause erratic panning and zooming occasionally
3) The user will no longer be able to interact with graphics or features (unless you move the layer down first, and the main reason why things are the way they are)
4) You never know what's going to happen if you try to reorder layers using map.reorderLayer(layer, index) should you choose to do some reordering
5) I think of several other issues and there is sure to be more

If you are making a nice "story" map with no user interaction with graphics or features this will work ok, but...

Thanks for the full reply. I thought I had tried messing with the layer order in Firebug interactively but didn't see a change. This seems simple enough to at least attempt.
Are you sure you mean in your line of code to insert the dynamic layer _before_ the map_gc and not _after_ it? Surely inserting it before would be the same as just having the layer as the topmost non-graphics layer?

[BenFousek]

Unfortunately this simple example will place the dynamic layer of your choosing below the svg tag one time only. I tried to add all the graphic layers under one root level object that could be moved up/down with all the other layers in my toc widget, but I couldn't get it to work out. I kept running into more and more issues. I'm sure if I had the resources (like a development team), it could be overcome. Hopefully this helps. If you figure something out let me know. And yes...it looks wrong but it works.