How to use a Heat Map Renderer in QML?

563
4
Jump to solution
06-22-2020 01:03 PM
ViníciusCosta
New Contributor III

Hi, I have a simple question. I've seen on the API reference that there's a HeatMapRenderer type for QML: HeatmapRenderer QML Type | ArcGIS for Developers 

But I don't see any examples of this on the list. How does it work on Qt? Are there any examples of it available? 

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
ViníciusCosta
New Contributor III

I've figured it out, here's the complete code for anyone in the same situation. I needed to create the renderer as a JSON, that was correct. But a FeatureLayer couldn't be set with this renderer. I needed to use a ServiceFeatureTable with a custom Feature Collection Layer, so I adapted the sample code that had it.

Here's the result:

import QtQuick 2.6
import QtQuick.Controls 2.2
import Esri.ArcGISRuntime 100.7
ApplicationWindow {
    id: rootRectangle
    width: 800
    height: 600
    readonly property bool busy: featureTable.queryFeaturesStatus === Enums.TaskStatusInProgress
    property var jsonChicago: {"type":"heatmap", "blurRadius":10, "colorStops":[
                                                                      {
                                                                          "ratio":0,
                                                                          "color":[133,193,200,0]
                                                                      },
                                                                      {
                                                                          "ratio":0.01,
                                                                          "color":[133,193,200,0]
                                                                      },
                                                                      {
                                                                          "ratio":0.01,
                                                                          "color":[133,193,200,255]
                                                                      },
                                                                      {
                                                                          "ratio":0.01,
                                                                          "color":[133,193,200,255]
                                                                      },
                                                                      {
                                                                          "ratio":0.0925,
                                                                          "color":[156,129,132,255]
                                                                      },
                                                                      {
                                                                          "ratio":0.17500000000000002,
                                                                          "color":[156,129,132,255]
                                                                      },
                                                                      {
                                                                          "ratio":0.2575,
                                                                          "color":[167,97,170,255]
                                                                      },
                                                                      {
                                                                          "ratio":0.34,
                                                                          "color":[175,73,128,255]
                                                                      },
                                                                      {
                                                                          "ratio":0.42250000000000004,
                                                                          "color":[184,48,85,255]
                                                                      },
                                                                      {
                                                                          "ratio":0.505,
                                                                          "color":[192,24,42,255]
                                                                      },
                                                                      {
                                                                          "ratio":0.5875,
                                                                          "color":[200,0,0,255]
                                                                      },
                                                                      {
                                                                          "ratio":0.67,
                                                                          "color":[211,51,0,255]
                                                                      },
                                                                      {
                                                                          "ratio":0.7525000000000001,
                                                                          "color":[222,102,0,255]
                                                                      },
                                                                      {
                                                                          "ratio":0.8350000000000001,
                                                                          "color":[233,153,0,255]
                                                                      },
                                                                      {
                                                                          "ratio":0.9175000000000001,
                                                                          "color":[244,204,0,255]
                                                                      },
                                                                      {
                                                                          "ratio":1,
                                                                          "color":[255,255,0,255]
                                                                      }
                                                                  ], "maxPixelIntensity":1967.488043588503, "minPixelIntensity": 0 }
    SimpleRenderer {
        id: rendererT
        json :jsonChicago
    }
    Geodatabase {
        id: gdb
        path: pathName
        onErrorChanged: errorMessage = error.message;
    }
    MapView {
        id: mapView
        anchors.fill: parent
        Map {
            id: map
            BasemapStreetsVector {}
        }
        ServiceFeatureTable  {
            id: featureTable
            url: "https://services5.arcgis.com/lVkj5PBOw7tRmIPU/arcgis/rest/services/Chicago_Crime_Map/FeatureServer/0"
                 
            
onQueryFeaturesStatusChanged: {
                if (queryFeaturesStatus !== Enums.TaskStatusCompleted)
                    return;
                var featureCollectionTable = ArcGISRuntimeEnvironment.createObject("FeatureCollectionTable", {featureSet: queryFeaturesResult,renderer:rendererT});
                var featureCollection = ArcGISRuntimeEnvironment.createObject("FeatureCollection");
                featureCollection.tables.append(featureCollectionTable);
                featureCollectionLayer.featureCollection = featureCollection;
            }
            Component.onCompleted: {
                queryFeatures(queryParams);
            }
        }
    }
    QueryParameters {
        id: queryParams
        whereClause: "1=1"
    }
    FeatureCollectionLayer {
        id: featureCollectionLayer
        onFeatureCollectionChanged: {
            map.operationalLayers.append(featureCollectionLayer);
        }
    }
    BusyIndicator {
        anchors.centerIn: parent
        visible: busy
    }
}

View solution in original post

0 Kudos
4 Replies
NeilMacDonald
Esri Contributor

Hi there,

The type is creatable/usable, but as of writing only by setting the json on a Renderer. If you want to utilize the Heatmap, you could try one of these two ways:

  1. Create a Web Map in AGOL Map Viewer with the tools available there, and open the Map in Runtime. It’ll render the same as the browser. Since it is JsonSerializable, you can drill down to the layer from your web map and get its heat map renderer, and go toJson to persist and then create a new renderer fromJson.
  2. Alternatively, you could create the renderer json on your own- https://developers.arcgis.com/web-map-specification/objects/heatmapRenderer/

Of these two approaches, the first option is probably better as AGOL comes with some nice authoring tools!

Kind regards,

Neil

0 Kudos
ViníciusCosta
New Contributor III

Hi there Neil, thanks for the answer,

So, for a heatmap renderer, I would do something like this at the start? :

GraphicsOverlay

{

   HeatMapRenderer

   {

         id:heatmap

         json: "json object here"

   }   

}

I haven't used json to create layer yet some I'm little lost on how they work.

Thanks.

0 Kudos
ViníciusCosta
New Contributor III

Yeah, that doesnt work since I cant instantiate a HeatMapRenderer. I did try this:

property var jsonObject: {"type":"heatmap","blurRadius":10,"colorStops":[{"ratio":0,"color":[133,193,200,0]},{"ratio":0.01,"color":[133,193,200,0]}],"maxPixelIntensity":1249.2897582229123,"minPixelIntensity":0}
SimpleRenderer {
        id: renderer
        json: jsonObject
    }
    // Map view UI presentation at top
    MapView {
        id: mv
        anchors.fill: parent
        //! [Display Feature Service]
        Map {
            BasemapLightGrayCanvas {}
            //initialViewpoint: vc
            FeatureLayer {
                id:layerName
                renderer: renderer
                ServiceFeatureTable {
                    url: "http://192.168.0.204:6080/arcgis/rest/services/geotecnia/gislmdc_uff_geotecnia/FeatureServer/4"
                }
            }
            onLoadStatusChanged: {
                console.log(layerName.renderer.rendererType.toString());
            }
        }
    }

But I only get simple red points. I've tried instantiating a HeatmapRender by use of the 

ArcGISRuntimeEnvironment.createObject method but to no avail, it's not creatable.

If I get the Json, the renderer is a heatmap renderer but even then, I'm only show red points.
0 Kudos
ViníciusCosta
New Contributor III

I've figured it out, here's the complete code for anyone in the same situation. I needed to create the renderer as a JSON, that was correct. But a FeatureLayer couldn't be set with this renderer. I needed to use a ServiceFeatureTable with a custom Feature Collection Layer, so I adapted the sample code that had it.

Here's the result:

import QtQuick 2.6
import QtQuick.Controls 2.2
import Esri.ArcGISRuntime 100.7
ApplicationWindow {
    id: rootRectangle
    width: 800
    height: 600
    readonly property bool busy: featureTable.queryFeaturesStatus === Enums.TaskStatusInProgress
    property var jsonChicago: {"type":"heatmap", "blurRadius":10, "colorStops":[
                                                                      {
                                                                          "ratio":0,
                                                                          "color":[133,193,200,0]
                                                                      },
                                                                      {
                                                                          "ratio":0.01,
                                                                          "color":[133,193,200,0]
                                                                      },
                                                                      {
                                                                          "ratio":0.01,
                                                                          "color":[133,193,200,255]
                                                                      },
                                                                      {
                                                                          "ratio":0.01,
                                                                          "color":[133,193,200,255]
                                                                      },
                                                                      {
                                                                          "ratio":0.0925,
                                                                          "color":[156,129,132,255]
                                                                      },
                                                                      {
                                                                          "ratio":0.17500000000000002,
                                                                          "color":[156,129,132,255]
                                                                      },
                                                                      {
                                                                          "ratio":0.2575,
                                                                          "color":[167,97,170,255]
                                                                      },
                                                                      {
                                                                          "ratio":0.34,
                                                                          "color":[175,73,128,255]
                                                                      },
                                                                      {
                                                                          "ratio":0.42250000000000004,
                                                                          "color":[184,48,85,255]
                                                                      },
                                                                      {
                                                                          "ratio":0.505,
                                                                          "color":[192,24,42,255]
                                                                      },
                                                                      {
                                                                          "ratio":0.5875,
                                                                          "color":[200,0,0,255]
                                                                      },
                                                                      {
                                                                          "ratio":0.67,
                                                                          "color":[211,51,0,255]
                                                                      },
                                                                      {
                                                                          "ratio":0.7525000000000001,
                                                                          "color":[222,102,0,255]
                                                                      },
                                                                      {
                                                                          "ratio":0.8350000000000001,
                                                                          "color":[233,153,0,255]
                                                                      },
                                                                      {
                                                                          "ratio":0.9175000000000001,
                                                                          "color":[244,204,0,255]
                                                                      },
                                                                      {
                                                                          "ratio":1,
                                                                          "color":[255,255,0,255]
                                                                      }
                                                                  ], "maxPixelIntensity":1967.488043588503, "minPixelIntensity": 0 }
    SimpleRenderer {
        id: rendererT
        json :jsonChicago
    }
    Geodatabase {
        id: gdb
        path: pathName
        onErrorChanged: errorMessage = error.message;
    }
    MapView {
        id: mapView
        anchors.fill: parent
        Map {
            id: map
            BasemapStreetsVector {}
        }
        ServiceFeatureTable  {
            id: featureTable
            url: "https://services5.arcgis.com/lVkj5PBOw7tRmIPU/arcgis/rest/services/Chicago_Crime_Map/FeatureServer/0"
                 
            
onQueryFeaturesStatusChanged: {
                if (queryFeaturesStatus !== Enums.TaskStatusCompleted)
                    return;
                var featureCollectionTable = ArcGISRuntimeEnvironment.createObject("FeatureCollectionTable", {featureSet: queryFeaturesResult,renderer:rendererT});
                var featureCollection = ArcGISRuntimeEnvironment.createObject("FeatureCollection");
                featureCollection.tables.append(featureCollectionTable);
                featureCollectionLayer.featureCollection = featureCollection;
            }
            Component.onCompleted: {
                queryFeatures(queryParams);
            }
        }
    }
    QueryParameters {
        id: queryParams
        whereClause: "1=1"
    }
    FeatureCollectionLayer {
        id: featureCollectionLayer
        onFeatureCollectionChanged: {
            map.operationalLayers.append(featureCollectionLayer);
        }
    }
    BusyIndicator {
        anchors.centerIn: parent
        visible: busy
    }
}

View solution in original post

0 Kudos