Geertjan's Blog

  • July 5, 2016

Plotting Data on World Maps with Oracle JET

Geertjan Wielenga
Product Manager

Our requirement is to use Oracle JET to show data on a world map, e.g., the number of employees in our organization working in various countries around the world. Below you see an example—three different ranges represented by colors on the map:

To get to the above point, let's start with the simplest imaginable world map scenario with Oracle JET's built-in maps for ojThematicMap.

Here's the view:

<div id='thematicMap-container'>
<div id='thematicMap1' data-bind="ojComponent:{
component: 'ojThematicMap',
basemap: 'world',
areaLayers: layers

Here's the viewModel:

function (oj, ko) {
function mainContentViewModel() {
var self = this;
self.layers = [{layer: 'countries'}];
return new mainContentViewModel();

And here's the map that results from the simple code above:

However, you're more than likely to be in a situation where you're getting data from somewhere, e.g., XML or JSON, with info that you'd like to display on the map.

Here's a GeoJSON file that we can use as the starting point of our scenario:


We'll do the same thing as the earlier blog entry about Brazil, i.e., include the file above into your application, as explained earlier. Now, open the file, and add some more data into it, imagining that this data needs to be visualized on the map. The data you add needs to be in the "properties" section of some/each of the entries in the file. Below, you see that I have added "employees:2000" to the entry for United States of America. Do the same for a few of the other countries, i.e., add some random data into various properties sections to simulate some additional data that we want to be able to work with:

Now, we're in a scenario very similar to this one:


Adapting our scenario to the sample above, here's the view:

<div id='thematicmap-container'>
<div id='thematicmap1'
component: 'ojThematicMap',
basemap: 'Foo',
mapProvider: mapProvider,
areaLayers: layers
style="width:100%; height:400px;">
<div id='legend1' data-bind="ojComponent: {
component: 'ojLegend',
halign: 'center',
orientation: 'horizontal',
title: 'No. of Employees',
titleHalign: 'center',
titleStyle: 'font-size:14px;font-weight:bold;',
textStyle: 'font-size:14px;',
sections: legendSections
style="width:100%; height:50px;">

And here's the viewModel:

'ojs/ojthematicmap', 'ojs/ojlegend'],
function (geo, oj, ko) {
function mainContentViewModel() {
var self = this;
self.mapProvider = {
geo: JSON.parse(geo),
propertiesKeys: {
id: 'name',
longLabel: 'name'
self.legendSections = [{items: [
{text: "0-500", color: '#FF0000'},
{text: "501-1000", color: '#0000CC'},
{text: "1001-2000", color: '#3AA54F'}
var getEmployeeColor = function (employees) {
if (employees <= 500)
return '#FF0000';
else if (employees <= 1000)
return '#0000CC';
else if (employees <= 2000)
return '#3AA54F';
var getStateId = function (state, stateIdMap) {
for (var id in stateIdMap) {
if (stateIdMap[id] == state)
return id;
};var getEmployeeData = function (dataContext) {
var areaData = [];
var features = JSON.parse(geo).features;
for (var i = 0; i < features.length; i++) {
var name = features[i]["properties"]["name"];
var employees = features[i]["properties"]["employees"];
id: 'a1',
location: getStateId(name, dataContext.ids),
color: getEmployeeColor(employees)
return areaData;

self.layers = [
layer: 'countries',
areaDataLayer: {id: 'adl1', areas: getEmployeeData}
return new mainContentViewModel();

The trickiest bit above is the parsing of the JSON. Take a look, in particular, at the piece of code in bold above.

Join the discussion

Comments ( 1 )
  • guest Monday, January 2, 2017


    How do I create a geoJson file for any particular state/city?

    Instead of world map, I need a map for the Karnataka state in India. How do I do that?


    Saeem Ahamed

Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.