Using a database table and Google’s Visualization Geo API in CodeIgniter

In this code example, I will show how you in PHP can use Google’s Visualization GEO API with Yggdrasil web platform that is based on CodeIgniter.

The map example is a module that is available in Yggdrasil, you can download the Yggdrasil, and look in the folders app->modules->map to find the code.

Yggdrasil makes use of the HMVC Modular Extensions for CodeIgniter, each snippet of code is contained with a controller, model or view, below is how the code was written for Map Module.

Controller

The controller interprets the mouse and keyboard inputs from the user, informing the model and/or the view to change as appropriate.

 class Maps extends Admin_Controller {

   public function __construct() {
        parent::__construct();
         
        // Load the models
        $this->load->model('Maps_m', '', true);
        // Load helpers
        $this->load->helper('array');
  }    
  public function index() {
    //Call Model to get map data
    $data = $this->Maps_m->get_map_country();
    //pass the map data to the template
    $this->template->graph = $data;        
    // Build the template and load the view
    $this->template->build('maps');  
  }       
}

Model

The model manages the behaviour and data of the application domain, responds to requests for information about its state (usually from the view), and responds to instructions to change state (usually from the controller).

class Maps_m extends My_Model {
/**
 * @var string The name of the clients table
 */
    protected $table = 'country';

  // Get all the countries from the media table
  public function get_map_country() {
            return $this->db
                ->select("geo_country.country, COUNT( * ) as mediahits", false)
                ->join('news_item_country', 'news_item_country.id=news_items.country')  
                ->join('geo_country', 'geo_country.id=news_item_country.country')  
                ->where('news_items.deleted', '0')
                ->group_by('geo_country.country')
                ->get('news_items')
                ->result_array();
        }
 }

View

The view manages the display of information.

    <script type='text/javascript' src='https://www.google.com/jsapi'></script>;
    <script type='text/javascript'>
    google.load('visualization', '1', {'packages': ['geochart']});
    google.setOnLoadCallback(drawRegionsMap);

    function drawRegionsMap() { 
      var data = google.visualization.arrayToDataTable([
      ['Country', 'Media Hits'],
      <?php foreach ($graph as $graphs) { ?>
       ['<?php echo $graphs['country']; ?>', <?php echo $graphs['mediahits']; ?>],
    <?php } ?>
    ]);
    var options = {};
    var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    chart.draw(data, options);
};
</script>        

<div id="chart_div" style="width: 100%; height: 500px;"></div>

 Conclusion

If you followed these instructions, you would have to build a global map, that takes data from a MySQL database, constructs the data in PHP and uses Google Visualization to display a map like this.