Support for Geojson Files With Esri HTML5 Charts

Example: Using a Geojson File With an HTML5 Map Chart

The sample_wfretail_regions.geojson file contains latitude and longitude values for the borders of United States regions. The following shows a partial listing of the beginning of the file.

{
"type": "FeatureCollection",
"features":[
{ "type": "Feature","properties": { "region": "Central" },
"geometry": { "type": "Polygon","coordinates":
[[[-84.7570,45.7847],[-84.7288,45.7880],[-84.7212,45.7666],
[-84.5570,45.7084],[-84.4780,45.6566],[-84.4295,45.6448],
[-84.4150,45.6530],[-84.4285,45.6697],[-84.3768,45.6558],
[-84.3293,45.6643],[-84.2165,45.6349],[-84.1326,45.5666],
[-84.1123,45.5077],[-84.0749,45.4888],[-83.9362,45.4925],
[-83.8103,45.4204],[-83.7414,45.4037],[-83.7157,45.4144],
[-83.5988,45.3523],[-83.5374,45.3578],[-83.4953,45.3396],
[-83.4912,45.3590],[-83.4780,45.3453],[-83.4860,45.3308],
[-83.4636,45.3307],[-83.3830,45.2718],[-83.3913,45.2527],
[-83.4164,45.2566],[-83.4125,45.2402],[-83.3624,45.1652],
[-83.3165,45.1418],[-83.3199,45.1178],[-83.3008,45.0922],
[-83.3263,45.0850],[-83.3130,45.0849],[-83.3140,45.0546],
[-83.2616,45.0253],[-83.3390,45.0412],[-83.3779,45.0776],
[-83.4364,45.0558],[-83.4564,45.0230],[-83.4332,45.0045],
[-83.4647,45.0028],[-83.4280,44.9282],[-83.3153,44.8802],
[-83.3218,44.8553],[-83.2938,44.8083],[-83.2959,44.7413],
[-83.2717,44.7132],[-83.3145,44.6087],[-83.3072,44.5435],[-83.3334,44.3372],[-83.3749,44.3267],[-83.4498,44.2507],
[-83.4431,44.2715],[-83.4788,44.2800],[-83.5357,44.2507],
[-83.5659,44.1634],
 ...
}

The name of the field that contains the region names is region. The following request assigns states to the region names defined in the geojson file and uses this file as the geometry file for the map layer.

DEFINE FILE WF_RETAIL_LITE
STATE/A20=WF_RETAIL_LITE.WF_RETAIL_GEOGRAPHY_CUSTOMER.STATE_PROV_NAME;
REGION/A20 WITH WF_RETAIL_LITE.WF_RETAIL_GEOGRAPHY_CUSTOMER.STATE_PROV_NAME=
IF STATE EQ 'Illinois' OR 'Indiana' OR 'Iowa' OR 'Kentucky' OR 'Michigan' OR 'Minnesota' OR 'Missouri' 
   OR 'Ohio' OR 'Wisconsin' OR 'Kansas' OR 'Nebraska' THEN 'Central'
ELSE IF STATE EQ 'Alabama' OR 'Florida' OR  'Georgia' OR 'Louisiana' OR 'Mississippi'
 OR 'North Carolina' OR 'South Carolina' OR 'Virginia' THEN 'SouthEast'
ELSE IF STATE EQ 'Arkansas' OR 'Tennessee' OR 'West Virginia' OR 'Texas' OR 'Oklahoma' 
   OR 'New Mexico' OR 'Hawaii' THEN 'SouthWest'
ELSE IF STATE EQ 'Connecticut' OR 'Maine' OR 'Massachusetts' OR 'New Hampshire' OR 'Rhode Island' OR 'Vermont' THEN 'NorthEast'
ELSE IF STATE EQ 'New Jersey' OR 'New York' OR 'Pennsylvania' OR 'Delaware' OR 'Maryland' THEN 'MidEast'
ELSE IF STATE EQ 'Colorado' OR 'Idaho' OR 'Montana' OR 'North Dakota' OR 'South Dakota' 
   OR 'Wyoming' OR 'Alaska' THEN 'NorthWest'
ELSE IF STATE EQ 'Arizona' OR 'California' OR 'Nevada' OR 'Oregon' OR 'Utah' OR 'Washington' THEN 'West'
ELSE 'Unknown';
END

GRAPH FILE WF_RETAIL_LITE
SUM CITY_POPULATION
BY REGION 
WHERE COUNTRY_NAME EQ 'United States'
WHERE REGION NE 'Unknown'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH CHOROPLETH
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
TYPE=REPORT, CHART-LOOK=com.esri.map, $
TYPE=DATA, COLUMN=region, BUCKET=location, $
TYPE=DATA, COLUMN=city_population, BUCKET=color, $
*GRAPH_JS
extensions: {
 "com.esri.map": {
 overlayLayers: [
 {
 title: "Geojson",
 layerType: "choropleth",
 geometrySourceType: "geojson",
 geometryLocateField: ["region"],
 geometryDataField: "name",
 url: "http://ecl.informationbuilders.com/jschart/sample_wfretail_regions.geojson"
 },
 ],
 baseLayer: {
 basemap: "streets",
center: [-98, 40],
zoom: 4                  }
 }
}
*END
ENDSTYLE
END

The output is shown in the following image.