initPos:{
  center:[latitude, longitude],
  level: zoom}

where:

latitude

Is the latitude for the center position of the map.

longitude

Is the longitude for the center position of the map.

zoom

Is the initial zoom level of the chart. Valid values are numbers from 1 (whole earth) to 19.

In the mapProperties block of the StyleSheet, specify the following property:

mapOpacity: number

where:

number

Is a number between 0 (transparent) and 1 (solid). The default value is .82.

The scale control can be turned off or set to show miles, kilometers, or both.

  controls: [
    {control: 'L.Control.Layers'},
    {
     control: 'L.Control.Scale',
     options: {
      imperial: boolean1,
      metric: boolean2}
    }
   ]

controls: [
    {control: 'L.Control.Layers'},
    {
     control: 'L.Control.Scale',
     options: {
      imperial: true,
      metric: true }
    }
   ],

controls: [
    {control: 'L.Control.Layers'},
    {
         }
   ],

mapProperties:{
baselayers: [{
title: 'layer_title',
layerInfo: {
  maxZoom: max,
  minZoom: min,
  attribution: function(){ return "&|copy; <a target='_blank' href='http://www.InformationBuilders.com'>Information Builders</a> | " + 
"Map Tiles: &|copy; Esri";}
},
  url: function(){ return 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}';}
}]
}

where:

layer_title

Is a title for the layer. This title appears when you click the layer control displayed at the top right of the map.

max

Is the value -1 (fully automatic) or a number between 1 and 19 that defines the maximum zoom level allowed.

min

Is the value -1 (fully automatic) or a number between 1 and 19 that defines the minimum zoom level allowed.

z

Is the initial zoom level, specified in the initPos:level property,

y

Is the latitude for the center of the initial view, specified in the initPos:center property,

x

Is the longitude of the initial view, specified in the initPos:center property,

Note:

• You can disable the zoom (+/-) control, but not remove it altogether, by making minZoom=maxZoom.
• The attribution property defines the copyright statement that appears on the bottom right of the map. The attribution included in the previous code displays the copyrights for the map providers included with WebFOCUS. If you use maps from a different provider, edit the attribution to contain the copyright information for your provider.
• The url property in the previous code points to one type of map (World_Street_Map) provided by Esri. If you use maps from a different provider, edit this property to point to your map tile server.

The following are different types of maps provided by Esri and the url references needed to access them:

http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x};
http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x};
http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x};
http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/{z}/{y}/{x};
http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x};
http://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x};
http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x};

The following code shows the attribution and url properties for using the OpenStreetMap maps installed with WebFOCUS:

attribution: function(){ return '&|copy; <a href="http://www.ibi.com">IBI</a> | ' + 
  'Map data &|copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Open Database Licence';}
    },
url: function(){ return tdgchart.getScriptPath().replace(/\/tdg\/.*/,'') + '/maptiles/osm/{z}/{x}/{y}.png'}

The following code shows the attribution and url for another type of OpenStreet map provided by mapbox, installed with WebFOCUS:

attribution: "Map data &|copy; <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors, Open Database Licence | Map Tiles by <a href='http://mapbox.com'>Mapbox</a>",

url: 'http://{s}.tiles.mapbox.com/v3/bclc-apec.map-rslgvy56/{z}/{x}/{y}.png',

The following sample sets and initial position and zoom level and generates the map base layer:

GRAPH FILE STATEPOP
SUM POPULATION
BY STATE
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH CHOROPLETH
ON GRAPH SET STYLE *
*GRAPH_JS
mapProperties: {
  engine: 'leaflet',
              
leaflet: {
  initPos: { 
                  center: [37.8, -96], 
                  level: 4 
            },
 baselayers: [{
   title: "ArcGIS_World_Street_Map",
   layerInfo: {
     maxZoom: 17,
     minZoom: 0,
      attribution: function(){ return "&|copy; <a target='_blank' href='http://www.InformationBuilders.com'>Information Builders</a> | " + 
"Map Tiles: &|copy; Esri";}
},
  url: function(){ return 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}';}   
}]    
}
},
*END
ENDSTYLE 
END

On the resulting map, the request output is not represented, as that would go on the overlay layer:

mapProperties:{
overlayLayers: [{
    title: 'layer_title',
    dataLookup: 'properties.field',
    layerInfo: {
     maxZoom: max,
     minZoom: min,
    type: 'subdivision'
    },
    type: 'filetype',
    url: function(){ return tdgchart.getScriptPath() + 'map/location.json'}
   }]
}

where:

layer_title

Is a title for the layer. This title appears when you click the layer control displayed at the top right of the map.

max

Is the value -1 (fully automatic) or a number between 1 and 19 that defines the maximum zoom level allowed.

min

Is the value -1 (fully automatic) or a number between 1 and 19 that defines the minimum zoom level allowed.

field

Is the name of the field in the location file that contains the same data as the sort value in your request.

'subdivision'

Is the type of geographical subdivision as listed in the location file.

'filetype'

Defines the type of location file being used. Valid values are:

• 'tdg', which supports both the JSON files distributed with WebFOCUS and geoJSON location files.
• 'geojson', which supports only geoJSON location files.

location

Is the name of the location file, for example, US.JSON. If you are using geoJSON files or additional territories not supplied with WebFOCUS, change the extension to the correct value and point to where these files are stored.

Note:

• The url attribute points to the location files (the tdgchart engine included with WebFOCUS has this path configured during WebFOCUS installation. If you are using geoJSON files, change the extension to the correct value and point to where those files are stored.

  The following code shows how to use the location file sample_ggsales_regsions.geojson, that was installed as a sample during WebFOCUS installation:

  url: function() { return tdgchart.getScriptPath().replace(/\/tdg\/.*/,'/web_resource/map/') +'sample_ggsales_regions.geojson'}

The following request against the statepop data source defines an overlay layer and the layer and scale controls. The type property is set to 'regions' and the dataLookup property is set to 'properties.state_name' because these are the values specified in the location file that match the data in the statepop data source:

GRAPH FILE STATEPOP
SUM POPULATION
BY STATE
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH CHOROPLETH
ON GRAPH SET STYLE *
*GRAPH_JS
mapProperties: {
  engine: 'leaflet',
              
leaflet: {
initPos: { 
                  center: [37.8, -96], 
                  level: 4 
            },overlayLayers: [{
title: 'United States of America',
dataLookup: 'properties.state_name',
layerInfo: {
maxZoom: -1,
minZoom: -1,
type: 'regions'
},
type: 'tdg',
url: function(){ return tdgchart.getScriptPath() + 'map/US.json'}
}],
  controls: [
    {control: 'L.Control.Layers'},
    {
     control: 'L.Control.Scale',
     options: {
      imperial: true,
      metric: true }
    }
   ],

baselayers: [{
title: "ArcGIS_World_Street_Map",
layerInfo: {
maxZoom: 17,
minZoom: 0,
attribution: function(){ return "&|copy; <a target='_blank' href='http://www.InformationBuilders.com'>Information Builders</a> | " + 
"Map Tiles: &|copy; Esri";}
},
url: function(){ return 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}';}
}]
}
},
 
*END
ENDSTYLE
END

The request output is a choropleth on top of the base layer, in which the population ranges are represented by the colors of the polygons representing the different states:

When the mouse hovers over the layer control, the title for each layer displays:

On this choropleth, there is no indication of the population ranges that the colors represent or the actual values for each state. You can add these objects using the legend and tooltip properties.