Hide Table of Contents
View ReportPlayer - Geoenrichment sample in sandbox
ReportPlayer - Geoenrichment

Description

The ReportPlayer widget runs infographic report templates for a provided analysis area. This sample allows users to click on one of 4 locations and show one of the Esri provided Infographics for the location. TheReportPlayeruses the GeoEnrichment service to request and create the Infographic.GeoEnrichmentis a subscription based service available through ArcGIS Online. Log-in credentials are always required when executing a GeoEnrichment task.

Reportplayer sample


For demo purposes, this sample requires a user to have ArcGIS Online credentials with access to GeoEnrichment to run successfully.

Code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
 
<title>GeoEnnrichment ReportPlayer</title>

 
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css">
 
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">

 
<style>
    html
,
    body
{
      padding
: 0;
      margin
: 0;
      height
: 100%;
      overflow
: hidden;
      font
-size: 13px;
      font
-family: "Avenir Next";
   
}

   
.topToolbar {
      background
-color: #EEEEEE;
      border
-bottom: 1px solid #b2b2b2;
      padding
: 10px;
   
}

   
.topToolbarLabel {
      margin
-right: 10px;
      margin
-top: 10px;
      margin
-bottom: 10px;
   
}

   
.topToolbarItem {
      margin
-right: 50px;
   
}

   
.topToolbarItem div {
      vertical
-align: top;
   
}

   
#mapDiv {
      position
: absolute;
      top
: 0px;
      left
: 0px;
      bottom
: 0px;
      right
: 0px;
   
}

   
.playerDivFullScreen {
      position
: absolute;
      top
: 0;
      left
: 0;
      bottom
: 0;
      right
: 0;
   
}

   
.playerDivInfoWindow {
      padding
: 10px;
   
}

   
.simpleInfoWindow.playerInfoWindow {
      width
: auto !important;
      height
: auto !important;
   
}

   
.simpleInfoWindow.playerInfoWindow .title {
      display
: none;
   
}

   
.simpleInfoWindow.playerInfoWindow .content {
      width
: auto !important;
      height
: auto !important;
   
}

   
.simpleInfoWindow.playerInfoWindow .close {
      left
: auto !important;
      right
: -12px;
   
}

   
.selectionBox {
      position
: absolute;
      border
: 1px solid gray;
      background
-color: rgba(0, 0, 0, 0.3);
   
}
 
</style>
 
<script src="https://js.arcgis.com/3.46/"></script>

 
<script>
    require
(["require"],
     
function (relativeRequire) {

        require
([
           
"dojo/aspect",
           
"dojo/dom-class",
           
"dojo/dom-construct",
           
"dojo/dom-geometry",
           
"dojo/dom-style",
           
"dojo/on",
           
"dojo/sniff",

           
"esri/map",
           
"esri/graphic",
           
"esri/geometry/Extent",
           
"esri/geometry/ScreenPoint",
           
"esri/layers/GraphicsLayer",
           
"esri/dijit/InfoWindowLite",

           
"esri/dijit/geoenrichment/OnDemandSelect",

           
"esri/dijit/geoenrichment/ReportPlayer/ReportPlayer",
           
"esri/dijit/geoenrichment/ReportPlayer/PlayerResizeModes",
           
"esri/dijit/geoenrichment/ReportPlayer/PlayerViewModes",
           
"esri/dijit/geoenrichment/ReportPlayer/dataProvider/supportClasses/StandardGraphicReportTemplates",
           
"esri/dijit/geoenrichment/ReportPlayer/core/supportClasses/map/symbols/HighlightedSymbolGenerator",
           
"esri/dijit/geoenrichment/utils/signIn/SignInHelper",
           
"esri/dijit/geoenrichment/utils/DeviceUtil",

           
"dojo/domReady!"
         
],
         
function (
            aspect
,
            domClass
,
            domConstruct
,
            domGeom
,
            domStyle
,
            on
,
            has
,

           
Map,
           
Graphic,
           
Extent,
           
ScreenPoint,
           
GraphicsLayer,
           
InfoWindowLite,

           
OnDemandSelect,

           
ReportPlayer,
           
PlayerResizeModes,
           
PlayerViewModes,
           
StandardGraphicReportTemplates,
           
HighlightedSymbolGenerator,
           
SignInHelper,
           
DeviceUtil
         
) {

           
var DEFAULTS = {
              portalUrl
: "https://www.arcgis.com",
              countryID
: "US",
           
};

           
var isMobile = DeviceUtil.isMobileDevice();

            topToolbarHelperText
.innerHTML = isMobile ?
             
"Select a template, then tap a feature on the map to open an infographic." :
             
"Select a template, then click a feature or shift-drag to select multiple features on the map to open an infographic.";

           
//--------------------------------------------------------------------------
           
//
           
//  Top Toolbar
           
//
           
//--------------------------------------------------------------------------

           
var templateSelector = new OnDemandSelect({
              listClass
: "esriGEOnDemandSelectUnlimitedTallList esriGEOnDemandSelectSpacedOut",
              value
: StandardGraphicReportTemplates.aliasToID("US", "key-facts"),
              options
: StandardGraphicReportTemplates.getListOptions("US")
           
}).placeAt(templateSelectorDiv);

           
var viewModeSelector = new OnDemandSelect({
              listClass
: "esriGEOnDemandSelectSpacedOut"
           
}).placeAt(viewModeSelectorDiv);
           
if (isMobile) {
              viewModeSelector
.set("options", [{
                  value
: PlayerViewModes.PANELS_IN_SLIDES,
                  label
: "Slide view"
               
},
               
{
                  value
: PlayerViewModes.PANELS_IN_STACK,
                  label
: "Stacked slide view"
               
}
             
]);
              viewModeSelector
.set("value", PlayerViewModes.PANELS_IN_SLIDES);
           
} else {
              viewModeSelector
.set("options", [{
                  value
: PlayerViewModes.FULL_PAGES,
                  label
: "Full screen"
               
},
               
{
                  value
: PlayerViewModes.PANELS_IN_SLIDES,
                  label
: "Slide view"
               
},
               
{
                  value
: PlayerViewModes.PANELS_IN_STACK,
                  label
: "Stacked slide view"
               
}
             
]);
              viewModeSelector
.set("value", PlayerViewModes.FULL_PAGES);
           
}

           
//--------------------------------------------------------------------------
           
//
           
//  Map
           
//
           
//--------------------------------------------------------------------------

            mapDiv
.style.top = topToolbarDiv.clientHeight + 1 + "px";

            on
(window, "resize", function () {
              mapDiv
.style.top = topToolbarDiv.clientHeight + 1 + "px";
           
});

           
var map = new Map("mapDiv", {
              basemap
: "streets-vector",
              center
: [-117.15, 32.68], // longitude, latitude
              zoom
: 11
           
});

            map
.on("load", function () {

             
// set up the map

              map
.disableRubberBandZoom();

             
var selectionBox;

             
// set up multiple selection

             
// here we need to detect mouse-down + Shift key
              on
(map, "mouse-down", function (event) {
               
if (!event.shiftKey)
                 
return;

                map
.disablePan();

                event
.stopPropagation();

               
function updateBox() {
                 
var sp = boxParams.startScreenPoint;
                 
var ep = boxParams.endScreenPoint;
                 
var xmin = Math.min(sp.x, ep.x);
                 
var ymin = Math.min(sp.y, ep.y);
                 
var xmax = Math.max(sp.x, ep.x);
                 
var ymax = Math.max(sp.y, ep.y);

                  domStyle
.set(selectionBox, {
                    left
: xmin + "px",
                    top
: ymin + "px",
                    width
: (xmax - xmin) + "px",
                    height
: (ymax - ymin) + "px"
                 
});
               
};

               
// create box
                selectionBox
= domConstruct.create("div", {
                 
"class": "selectionBox"
               
}, document.body);

               
// initial box params

               
var boxParams = {};
                boxParams
.startMapPoint = event.mapPoint;
                boxParams
.startScreenPoint = {
                  x
: event.clientX,
                  y
: event.clientY
               
};
                boxParams
.endScreenPoint = {
                  x
: event.clientX,
                  y
: event.clientY
               
};

               
// update box on mousemove

               
var boxToolMapHanlders = [];
                boxToolMapHanlders
.push(on(document.body, "mousemove, touchmove, dojotouchmove", function (
                  e
) {
                  boxParams
.endScreenPoint.x = e.clientX;
                  boxParams
.endScreenPoint.y = e.clientY;
                  updateBox
();
               
}));

               
// stop selection on mouseup

                boxToolMapHanlders
.push(on(document.body, "mouseup, touchend", function () {
                 
// try to calculate box extent
                 
var sp = boxParams.startMapPoint;
                 
var mapPos = domGeom.position(map.root);

                 
// give it a few pixels offset to aviod having a zero extent box
                 
if (boxParams.startScreenPoint.x === boxParams.endScreenPoint.x)
                    boxParams
.endScreenPoint.x += 2; // 2 pixels

                 
if (boxParams.startScreenPoint.y === boxParams.endScreenPoint.y)
                    boxParams
.endScreenPoint.y += 2; // 2 pixels

                 
var ep = map.toMap(new ScreenPoint(boxParams.endScreenPoint.x - mapPos.x, boxParams
                   
.endScreenPoint.y - mapPos.y));

                 
var xmin = Math.min(sp.x, ep.x);
                 
var ymin = Math.min(sp.y, ep.y);
                 
var xmax = Math.max(sp.x, ep.x);
                 
var ymax = Math.max(sp.y, ep.y);

                 
var boxExtent = new Extent(xmin, ymin, xmax, ymax, map.spatialReference);

                 
var graphics = graphicsLayer.graphics.filter(function (g) {
                   
return boxExtent.intersects(g.geometry);
                 
});
                  graphics
.length && runPlayerForSelectedGraphics(graphics, event.mapPoint);

                  boxToolMapHanlders
.forEach(function (h) {
                    h
.remove();
                 
})
                  boxToolMapHanlders
.length = 0;

                  domConstruct
.destroy(selectionBox);

                  map
.enablePan();

                 
// pointer, in this case the PointerEvents class thinks the mouse is still pressed and this causes issues
                 
// with future mouse clicks.  Set _numTouches to 0 in order to resolve this.
                 
if (has("ie"))
                   
if (map.navigationManager.pointerEvents)
                      map
.navigationManager.pointerEvents._numTouches = 0;
               
}));
             
});

             
// add a few graphics

             
var graphicsLayer = new GraphicsLayer();
              map
.addLayer(graphicsLayer);

              graphicsLayer
.add(new Graphic({
               
"geometry": {
                 
"rings": [
                   
[
                     
[-13037494.994088652, 3852956.928906343],
                     
[-13034724.151813319, 3853912.3917599064],
                     
[-13034208.201872393, 3853415.5510760536],
                     
[-13033720.915817076, 3852345.4326800625],
                     
[-13033224.075133225, 3850874.019885575],
                     
[-13032736.789077906, 3850138.313488331],
                     
[-13036052.245179772, 3849135.0774920895],
                     
[-13037494.994088652, 3852956.928906343]
                   
]
                 
],
                 
"spatialReference": {
                   
"wkid": 102100
                 
}
               
},
               
"symbol": {
                 
"type": "esriSFS",
                 
"style": "esriSFSSolid",
                 
"color": [199, 55, 36, 150],
                 
"outline": {
                   
"type": "esriSLS",
                   
"style": "esriSLSSolid",
                   
"color": [199, 55, 36, 255]
                 
}
               
},
               
"attributes": {
                 
"NAME": "National City",
                 
"BUILDING_AREA": 5000.5,
                 
"SITE_AREA": 10000.25,
                 
"FRONTAGE": 800,
                 
"PARKING": 300,
                 
"BUILDING_DATE": new Date().getTime(),
                 
"url": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/USA_CA_NationalCity_Westfield_002_2013.jpg/1280px-USA_CA_NationalCity_Westfield_002_2013.jpg",
                 
"url2": "https://upload.wikimedia.org/wikipedia/commons/7/7b/USA_CA_NationalCity_Center_002_2013_-_Mile_of_Cars.jpg"
               
}
             
}));

              graphicsLayer
.add(new Graphic({
               
"geometry": {
                 
"rings": [
                   
[
                     
[-13035942.366951615, 3848982.2034355192],
                     
[-13033935.894959131, 3849784.7922325125],
                     
[-13032636.465478284, 3850033.212574439],
                     
[-13031891.204452505, 3849039.531206733],
                     
[-13031069.506398441, 3848561.799779951],
                     
[-13030515.337943373, 3847663.6646976015],
                     
[-13029846.51394588, 3847166.8240137487],
                     
[-13029235.017719598, 3846096.7056177575],
                     
[-13034432.735642985, 3844395.9817384146],
                     
[-13035942.366951615, 3848982.2034355192]
                   
]
                 
],
                 
"spatialReference": {
                   
"wkid": 102100
                 
}
               
},
               
"symbol": {
                 
"type": "esriSFS",
                 
"style": "esriSFSSolid",
                 
"color": [55, 199, 36, 150],
                 
"outline": {
                   
"type": "esriSLS",
                   
"style": "esriSLSSolid",
                   
"color": [55, 199, 36, 255]
                 
}
               
},
               
"attributes": {
                 
"NAME": "Chula Vista",
                 
"BUILDING_AREA": 4000.5,
                 
"SITE_AREA": 8000.25,
                 
"FRONTAGE": 500,
                 
"PARKING": 200,
                 
"BUILDING_DATE": new Date().getTime(),
                 
"url": "https://upload.wikimedia.org/wikipedia/commons/1/12/ChulaVista_Bayfront.jpg"
               
}
             
}));

              graphicsLayer
.add(new Graphic({
               
"geometry": {
                 
"rings": [
                   
[
                     
[-13043772.385036565, 3859559.177224467],
                     
[-13041727.69452994, 3862272.691728587],
                     
[-13040542.92059152, 3862865.0786977964],
                     
[-13038230.700485898, 3862845.969440725],
                     
[-13037198.80060405, 3860648.404877529],
                     
[-13036778.396948481, 3859750.2697951794],
                     
[-13035803.824837847, 3858966.7902552574],
                     
[-13035803.824837847, 3857304.284890057],
                     
[-13034905.689755498, 3856119.5109516387],
                     
[-13034829.252727212, 3854093.929702084],
                     
[-13037542.767231332, 3853100.248334378],
                     
[-13040275.390992522, 3854437.896329367],
                     
[-13043523.96469464, 3856883.8812344894],
                     
[-13043772.385036565, 3859559.177224467]
                   
]
                 
],
                 
"spatialReference": {
                   
"wkid": 102100
                 
}
               
},
               
"symbol": {
                 
"type": "esriSFS",
                 
"style": "esriSFSSolid",
                 
"color": [36, 55, 199, 150],
                 
"outline": {
                   
"type": "esriSLS",
                   
"style": "esriSLSSolid",
                   
"color": [36, 55, 199, 255]
                 
}
               
},
               
"attributes": {
                 
"NAME": "San Diego",
                 
"BUILDING_AREA": 7000.5,
                 
"SITE_AREA": 12000.25,
                 
"FRONTAGE": 900,
                 
"PARKING": 350,
                 
"BUILDING_DATE": new Date().getTime(),
                 
"url": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Harbor_Drive%2C_San_Diego.jpg/1920px-Harbor_Drive%2C_San_Diego.jpg"
               
}
             
}));

              graphicsLayer
.add(new Graphic({
               
"geometry": {
                 
"rings": [
                   
[
                     
[-13044020.805378487, 3859387.193910824],
                     
[-13043944.368350202, 3858890.353226971],
                     
[-13043753.27577949, 3856826.553463274],
                     
[-13037829.406087395, 3853004.7020490207],
                     
[-13034619.050899422, 3844290.880824522],
                     
[-13038096.935686393, 3842227.0810608254],
                     
[-13039205.272596527, 3843717.603112384],
                     
[-13039778.550308665, 3846163.5880175065],
                     
[-13042148.098185502, 3850864.4652570384],
                     
[-13044364.772005768, 3852890.046506593],
                     
[-13049256.741816014, 3853654.4167894437],
                     
[-13049256.741816014, 3855756.435067283],
                     
[-13044020.805378487, 3859387.193910824]
                   
]
                 
],
                 
"spatialReference": {
                   
"wkid": 102100
                 
}
               
},
               
"symbol": {
                 
"type": "esriSFS",
                 
"style": "esriSFSSolid",
                 
"color": [199, 55, 199, 150],
                 
"outline": {
                   
"type": "esriSLS",
                   
"style": "esriSLSSolid",
                   
"color": [199, 55, 199, 255]
                 
}
               
},
               
"attributes": {
                 
"NAME": "San Diego Bay",
                 
"BUILDING_AREA": 6500.5,
                 
"SITE_AREA": 11300.25,
                 
"FRONTAGE": 820,
                 
"PARKING": 290,
                 
"BUILDING_DATE": new Date().getTime(),
                 
"url": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/OverCoronadoSanDiegoAug07.jpg/800px-OverCoronadoSanDiegoAug07.jpg"
               
}
             
}));

             
// add a listener to the layer
             
var player, playerDiv;

             
var infoWindow = new InfoWindowLite(null, domConstruct.create("div", null, null, map.root));
              infoWindow
.startup();
              map
.setInfoWindow(infoWindow);
              aspect
.after(infoWindow, "onHide", function () {
                player
&& player.destroy();
                domConstruct
.destroy(playerDiv);
             
});
              domClass
.add(infoWindow.domNode, "playerInfoWindow");

             
var highlightedGraphics = [];

             
function runPlayerForSelectedGraphics(graphics, mapPoint) {

               
var isFullScreen = isMobile || viewModeSelector.get("value") === PlayerViewModes.FULL_PAGES;

               
//--------------------------------------------------------------------------
               
//
               
//  Highlight
               
//
               
//--------------------------------------------------------------------------

                highlightedGraphics
.forEach(function (g) {
                  g
.setSymbol(g.__originalSymbol);
                 
delete g.__originalSymbol;
               
});
                highlightedGraphics
.length = 0;

               
if (!isFullScreen)
                  graphics
.forEach(function (g) {
                    g
.__originalSymbol = g.symbol;
                    highlightedGraphics
.push(g);
                   
HighlightedSymbolGenerator.getHighlightSymbol({
                      graphic
: g,
                      outlineOnly
: true
                   
}).then(function (hInfo) {
                      hInfo
.symbol && g.setSymbol(hInfo.symbol);
                   
});
                 
});

               
//--------------------------------------------------------------------------
               
//
               
//  Report Player
               
//
               
//--------------------------------------------------------------------------

                infoWindow
.hide();
                player
&& player.destroy();
                domConstruct
.destroy(playerDiv);

               
// configure playerDiv for the current view and resize modes
                playerDiv
= domConstruct.create("div", null, document.body);

               
if (isFullScreen)
                  domClass
.add(playerDiv, "playerDivFullScreen");
               
else {
                  domClass
.add(playerDiv, "playerDivInfoWindow");
                  map
.infoWindow.show(mapPoint);
                  map
.infoWindow.setContent(playerDiv);
               
}

                player
= new ReportPlayer({
                  viewMode
: viewModeSelector.get("value"),
                  resizeMode
: isFullScreen ? PlayerResizeModes.FIT_WINDOW : PlayerResizeModes.AUTO,
                  showCloseButton
: isFullScreen,
                  showToolbarInPopup
: !isFullScreen,
                  showAreaTitle
: true,
                  showToFullScreenAnimation
: isFullScreen,
                  onClose
: function () {
                    player
.destroy();
                    domConstruct
.destroy(playerDiv);
                 
}
               
}).placeAt(playerDiv);

               
function playerReport(reportID) {
                  player
.playReport({
                    portalUrl
: DEFAULTS.portalUrl,
                    countryID
: DEFAULTS.countryID,
                    reportID
: reportID,
                    analysisAreas
: graphics.map(function (g) {
                     
return {
                       
"name": g.attributes.NAME,
                       
"shortName": g.attributes.NAME,
                       
"feature": g
                     
};
                   
}),
                   
// for multi-feature reports like "Multi-ring Comparison"
                    combinedAreasInfo
: {
                      address
: graphics[0].attributes.NAME + " et al.",
                      description
: graphics.length + " polygon areas"
                   
},
                    attachmentsProvider
: {
                      supportsMultipleAreas
: true,
                      getAttributesForAreaAt
: function (areaIndex) {
                       
var attributes = graphics[areaIndex].attributes;
                       
return [{
                            name
: "BUILDING_AREA",
                            alias
: "Building area (sq. ft)",
                            type
: "esriFieldTypeDouble",
                            value
: attributes["BUILDING_AREA"]
                         
},
                         
{
                            name
: "SITE_AREA",
                            alias
: "Site area (sq. ft)",
                            type
: "esriFieldTypeDouble",
                            value
: attributes["SITE_AREA"]
                         
},
                         
{
                            name
: "FRONTAGE",
                            alias
: "Frontage",
                            type
: "esriFieldTypeInteger",
                            value
: attributes["FRONTAGE"]
                         
},
                         
{
                            name
: "PARKING",
                            alias
: "Parking",
                            type
: "esriFieldTypeInteger",
                            value
: attributes["PARKING"]
                         
},
                         
{
                            name
: "BUILDING_DATE",
                            alias
: "Building date",
                            type
: "esriFieldTypeDate",
                            value
: attributes["BUILDING_DATE"]
                         
}
                       
];
                     
},
                      getNotesForAreaAt
: function (areaIndex) {
                       
var attributes = graphics[areaIndex].attributes;
                       
return [{
                          text
: "This is a note example for area " + attributes.NAME
                       
}];
                     
},
                      getAttachmentsForAreaAt
: function (areaIndex) {
                       
var attributes = graphics[areaIndex].attributes;
                       
var urls = [];
                        attributes
.url && urls.push(attributes.url);
                        attributes
.url2 && urls.push(attributes.url2);
                       
return urls.map(function (url) {
                         
return {
                            description
: "Image for " + attributes.NAME,
                            getThumbnail
: function () {
                             
return url;
                           
},
                            getAttachmentUrl
: function () {
                             
return url;
                           
}
                         
};
                       
});
                     
}
                   
}
                 
}).then(function () {
                   
// refresh the position of the info window
                   
!isFullScreen && infoWindow.resize(infoWindow.width, infoWindow.height);
                 
});
               
};

               
// limit the size of the info window
               
if (!isFullScreen) {
                  player
.setMaxWidth(700);
                  player
.setMaxHeight(500);
               
} else {
                 
// add a select to choose infographics right from the player
                 
var inPlayerSelect = new OnDemandSelect({
                   
"class": "esriGEOnDemandSelectWhite esriGEOnDemandSelectNoBackground",
                    listClass
: "esriGEOnDemandSelectUnlimitedTallList esriGEOnDemandSelectSpacedOut",
                    value
: templateSelector.get("value"),
                    options
: StandardGraphicReportTemplates.getListOptions("US"),
                    onChange
: function (event) {
                      templateSelector
.set("value", event.value); // sync with the main selector
                      playerReport
(event.value);
                   
}
                 
});
                  player
.playerToolbar.addInfographicsSelect(inPlayerSelect);
               
}

                playerReport
(templateSelector.get("value"));
             
};

              graphicsLayer
.on("click", function (event) {
                runPlayerForSelectedGraphics
([event.graphic], event.mapPoint);
             
});
           
});
         
});
     
});
 
</script>
</head>

<body class="claro">
 
<div id="topToolbarDiv" class="topToolbar">
   
<div id="topToolbarHelperText" class="topToolbarLabel"></div>
   
<div class="dijitInline" style="white-space:nowrap;">
     
<div class="dijitInline topToolbarLabel">Template:</div>
     
<div class="dijitInline topToolbarItem" id="templateSelectorDiv"></div>
   
</div>
   
<div class="dijitInline" style="white-space:nowrap;">
     
<div class="dijitInline topToolbarLabel">View infographic in:</div>
     
<div class="dijitInline topToolbarItem" id="viewModeSelectorDiv"></div>
   
</div>
 
</div>
 
<div id="mapDiv"></div>
</body>

</html>
 
         
Show Modal