Generating Leaflet Map Charts

In the mapProperties object in the GRAPH_JS block of the StyleSheet, specify the map viewer engine (leaflet) and the map properties:

*GRAPH_JS
"mapProperties": {
"engine": "leaflet",
  "leafLet":{
   map_properties    
}
}
  *END

where:

map_properties

Are the properties that control the map tiles, map overlays, and map controls in your chart.

You can also use an alternate map tiling engine.

"mapProperties":{
"baselayers": [{
"title": "string",
"layerInfo": {
  "maxZoom": number,
  "minZoom": number,
  "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:

"title": "string"

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

"maxZoom": number

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

"minZoom": number

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

"url": function()

Defines the initial zoom and center of the returned map service.

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,

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};

Since the maps displayed on any map chart are owned by the services that supply them, they require that you include a copyright attribution on your chart, which is one of the properties you must include in the base layer for Leaflet maps.

The following syntax 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 syntax 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",

"mapProperties":{
"overlayLayers": [{
    "title": "string",
    "dataLookup": "properties.field",
    "layerInfo": {
     "maxZoom": number,
     "minZoom": number,
     "type": "string"
    },
    "type": "string",
    "url": function(){ return tdgchart.getScriptPath() + "map/location.json"}
   }]
}

where:

"title": "string"

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

"dataLookup": "properties.field"

Is the name of the field in the location file that contains the same data as the sort value in your request. Not required for a latitude/longitude-based map layer.

"layerInfo":

Defines the minimum zoom, the maximum zoom, and the type of data being returned.

"maxZoom": number

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

"minZoom": number

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

"type": "string"

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

"type": "string"

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.
• "latlng", which specifies longitude (x) and latitude (y) values will be supplied in the WebFOCUS request.

"url": function

Defines the map location file being returned.

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.

If your chart request specifies a choropleth map (ON GRAPH SET LOOKGRAPH CHOROPLETH), but the location field represents a point instead of a polygon, a bubble marker (circle) is drawn to represent the location. The markers will all be the same size. The field assigned to the color category will be used to color the markers.