Integrating JavaScript map chart with APEX

Integrating JavaScript map chart with APEX

This document talks about how to Integrate APEX with JavaScript map chart.

 

Technologies and Tools used:

The following technologies has been used to Integrating JavaScript map chart with APEX.

• Oracle Apex
• JavaScript

 

Use Case:

Assume that there is a requirement to display map from available data.

 

Architecture:

Following steps explains in detail,

• Create an Oracle Apex Application and go to Shared Components => Files => Static Files, then upload necessary JavaScript files as shown below,

map-chart-static-files

• Create a Region and set type as  “Static Content”

 

• <div id = “container”

  style = “height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto” > < /div> <script >

  var data = Corp.geojson(Corp.maps[‘countries/in/in-all’]), //To call parent map data.js file example India

  Map india.map_

  separators = Corp.geojson(Corp.maps[‘countries/in/in-all’], ‘mapline’),

  // Some responsiveness

  small = $(‘#container’).width() < 400;

  // Set drilldown pointers

  $.each(data, function(i) {

  this.drilldown = this.properties[‘hc-a2’];

  this.value = i; // Non-random bogus data

  });

  // Instantiate the map

  Corp.mapChart(‘container’, {

  chart: {

  events: {

  drilldown: function(e) {

  if (!e.seriesOptions) {

  var chart = this,

  mapKey = ‘countries/in/in-‘ + e.point.drilldown,

  // Handle error, the timeout is cleared on success

  fail = setTimeout(function() {

  if (!Corp.maps[mapKey]) {

  chart.showLoading(‘<i class=”icon-frown”></i> Failed loading ‘ + e.point.name);

  fail = setTimeout(function() {

  chart.hideLoading();

  }, 1000);

  }

  }, 3000);

  // Show the spinner

  chart.showLoading(‘<i class=”icon-spinner icon-spin icon-3x”></i>’); // Font Awesome spinner

  //alert(e.point.drilldown);

  // Load the drilldown map

  //$.getScript(‘https://code.highcharts.com/mapdata/’ + mapKey + ‘.js’, function () {

  $.getScript(‘#APP_IMAGES#’ + e.point.drilldown + ‘.map.js’, function() {

  // To call child map data for example Tamilnadu map will be displayed by clicking India

  . tn.map_

  data = Corp.geojson(Corp.maps[mapKey]);

  // Set a non-random bogus value

  $.each(data, function(i) {

  this.value = i;

  });

  // Hide loading and add series

  chart.hideLoading();

  clearTimeout(fail);

  chart.addSeriesAsDrilldown(e.point, {

  name: e.point.name,

  data: data,

  dataLabels: {

  enabled: true,

  format: ‘{point.StateCode}’

  }

  });

  });

  }

  this.setTitle(null, {

  text: e.point.name

  });

  },

  drillup: function() {

  this.setTitle(null, {

  text: ”

  });

  }

  }

  },

  title: {

  text: ‘India Map’

  },

  subtitle: {

  text: ”,

  floating: true,

  align: ‘right’,

  y: 50,

  style: {

  fontSize: ’16px’

  }

  },

  legend: small ? {} : {

  layout: ‘vertical’,

  align: ‘right’,

  verticalAlign: ‘middle’

  },

  colorAxis: {

  min: 0,

  minColor: ‘#E6E7E8’,

  maxColor: ‘#005645’

  },

  mapNavigation: {

  enabled: true,

  buttonOptions: {

  verticalAlign: ‘bottom’

  }

  },

  plotOptions: {

  map: {

  states: {

  hover: {

  color: ‘#EEDD66’

  }

  }

  }

  },

  series: [{

  data: data,

  name: ‘India’,

  dataLabels: {

  enabled: true,

  format: ‘{point.properties.postal-code}’

  }

  }, {

  type: ‘mapline’,

  data: separators,

  color: ‘silver’,

  enableMouseTracking: false,

  animation: {

  duration: 500

  }

  }],

  drilldown: {

  activeDataLabelStyle: {

  color: ‘#FFFFFF’,

  textDecoration: ‘none’,

  textOutline: ‘1px #000000’

  },

  drillUpButton: {

  relativeTo: ‘spacingBox’,

  position: {

  x: 0,

  y: 60

  }

  }

  }

  });

  </script>

Sample exported support files:

<script src = “#APP_IMAGES#min.js” > < /script>

< script src = “#APP_IMAGES#corp.map.js” > < /script>

< script src = “#APP_IMAGES#drilldown.js” > < /script>

<  script src = “#APP_IMAGES#exporting.js” > < /script>

< script src = “#APP_IMAGES#offline.exporting.js” > < /script>

<script src = “#APP_IMAGES#india.map.js” > < /script>

<script src = “#APP_IMAGES#corp.src.js” > < /script>

 

Note : If there is any requirement to display the world map or district level for any state, Download the geometric polygon/Multi-polygon co-ordinates and follow the steps given above.

 

Output:

Now India map has been displayed.