About This Release > Charting With WebFOCUS > Adding Basemap Information to an Esri HTML5 Chart

Adding Basemap Information to an Esri HTML5 Chart

How to:

By adding a baseMapInfo object to an Esri chart request, you can specify an array of custom map images to use as the background for your chart. You can also place a basemap control on the chart output that displays thumbnails of all available basemaps and lets you switch between basemaps on the resulting chart output.

Syntax: How to Add Basemap Properties to an Esri Map Chart 

baseMapInfo : { 
 drawBasemapControl : cboolean, 
 showArcGISBasemaps : sboolean, 
 customBaseMaps : [ 
 { 
 name : "basemapname", 
 title : "basemaptitle", 
 url : "url_to_basemap", 
 thumbnailUrl : "url_to_thumbnail" 
 } 
 ]
}

where:

cboolean

Specifies whether to draw a basemap control on the chart output. Valid values are:

  • true, which draws a basemap control.
  • false, which does not draw a basemap control. This is the default value.
sboolean

Specifies whether to show the ArcGIS Online basemaps on the basemap control. Valid values are:

  • true, which shows the ArcGIS Online basemaps on the basemap control. This is the default value.
  • false, which does not show the ArcGIS Online basemaps on the basemap control.
"basemapname"

Is a name for the basemap that you can use as the baselayer:basemap property to select this basemap for the chart.

"basemaptitle"

Is a title to display under the thumbnail for this basemap on the basemap control.

"url_to_basemap"

Is the URL to the endpoint for the basemap.

"url_to_thumbnail"

Is the URL to the thumbnail for the basemap.

Example: Adding a Custom Basemap to an Esri Map Chart

The following request adds a basemap from Delorme and a basemap control to the chart. 

GRAPH FILE WF_RETAIL_LITE 
SUM MIN.CITY_POPULATION MAX.DAYSDELAYED 
BY COUNTRY_NAME 
WHERE COUNTRY_NAME NE 'Taiwan' 
ON GRAPH PCHOLD FORMAT JSCHART 
ON GRAPH SET LOOKGRAPH BUBBLEMAP 
ON GRAPH SET AUTOFIT ON 
ON GRAPH SET STYLE * 
TYPE=REPORT, CHART-LOOK=com.esri.map, $ 
TYPE=DATA, COLUMN=COUNTRY_NAME, BUCKET=location, $ 
TYPE=DATA, COLUMN=MIN.CITY_POPULATION, BUCKET=size, $ 
TYPE=DATA, COLUMN=MAX.DAYSDELAYED, BUCKET=color, $ 
*GRAPH_JS 
bubbleMarker: {maxSize: '10%' }, 
extensions: { 
"com.esri.map": { 
overlayLayers: [ 
{ 
title: "Population", 
layerType: "bubble", 
geometrySourceType: "esri", 
geometryLocateField: ["Country"], 
geometryDataField: "name", 
url: 
"http://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/
World_Countries_(Generalized)/FeatureServer/0" 
} 
], 
baseMapInfo : { 
drawBasemapControl : true, 
showArcGISBasemaps : true, 
customBaseMaps : [ 
{ 
name:"Delorme", 
title:"Delorme", 
url:"http://services.arcgisonline.com/ArcGIS/rest/services/Specialty/
DeLorme_World_Base_Map/MapServer",  
thumbnailUrl:"http://www.arcgis.com/sharing/rest/content/items/
6d9fa6d159ae4a1f80b9e296ed300767/info/thumbnail/national_map.jpg" 
}  
                      ] 
                       }, 
  
baseLayer: { 
basemap: "Delorme" 
} 
} 
} 
*END 
ENDSTYLE 
END

The output, with the basemap control open, is shown in the following image.

To change the chart background, click a thumbnail on the basemap control.

To close the basemap control, click anywhere in the header.

WebFOCUS

Feedback