(Tutorials) geomapping

May 17, 2010

Google has an interesting API for geo data (and other drawings/mapping): the Visualization API

See http://code.google.com/apis/visualization/documentation/gallery/geomap.html

Using this api you can easily create a worldmap with, for instance, several countries highlighted.
The code:

<html>
<head>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages': ['geomap']});
google.setOnLoadCallback(function() {
  var data = new google.visualization.DataTable();
  data.addRows(2);
  data.addColumn('string', 'Code');
  data.addColumn('number', 'Count');
  data.addColumn('string', 'Country');
  data.setValue(0, 0, 'RU');
  data.setValue(0, 1, 7);
  data.setValue(0, 2, 'Russia');
  data.setValue(1, 0, 'AU');
  data.setValue(1, 1, 4);
  data.setValue(1, 2, 'Australia');
  var options = {};
  options['dataMode'] = 'regions';
  options['colors'] = [0x00AAFF, 0x0000FF];
  var container = document.getElementById('map');
  var mymap = new google.visualization.GeoMap(container);
  google.visualization.events.addListener(mymap, 'regionClick',function(e) {
    var rowindex = data.getFilteredRows([{column: 0, value: e['region']}]);
    var count = data.getValue(rowindex[0],1);
    if (count > 0) {
      alert('count: '+count);
      //location.href = "http://www.kwalinux.nl/somehwere?"+e['region']
    }
  });
  mymap.draw(data, options);
});
</script>
</head>
<body>
<div id="map"></div>
</div>
</body>
</html>


To combine this with jQuery it’s best to use google’s document ready function:

google.setOnLoadCallback(function() {
  // do your thing when the DOM is loaded
}

If you want, for example, use jquery-ui’s tabs and display the above worldmap in a tab (and another chart
in another tab) you can do:

<html>
<head>
<style type="text/css">
  body {
    font: 80% verdana, arial, helvetica, sans-serif;
    text-align: center; /* for IE */
    background-color: #cdcd5c;
  }
  #container {
    margin: 0 auto;   /* align for good browsers */
    text-align: center; /* counter the body center */
    border: 0px;
    width: 60%;
  }
</style>
<link rel="stylesheet" type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/jquery.ui.all.css">

<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type="text/javascript">
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.8.1");
google.load('visualization', '1', {'packages': ['geomap']});

google.setOnLoadCallback(function() {

    $("#myTabs").tabs();

    var travels = new google.visualization.DataTable();
    travels.addRows(2);
    travels.addColumn('string', 'Code');
    travels.addColumn('number', 'Travels');
    travels.addColumn('string', 'Country');
    travels.setValue(0, 0, 'RU');
    travels.setValue(0, 1, 7);
    travels.setValue(0, 2, 'Russia');
    travels.setValue(1, 0, 'AU');
    travels.setValue(1, 1, 4);
    travels.setValue(1, 2, 'Australia');


    var fotos = new google.visualization.DataTable();
    fotos.addRows(2);
    fotos.addColumn('string', 'Code');
    fotos.addColumn('number', 'Fotos');
    fotos.addColumn('string', 'Country');
    fotos.setValue(0, 0, 'RU');
    fotos.setValue(0, 1, 9);
    fotos.setValue(0, 2, 'Russia');
    fotos.setValue(1, 0, 'AU');
    fotos.setValue(1, 1, 6);
    fotos.setValue(1, 2, 'Australia');

    var options = {};
    options['dataMode'] = 'regions';
    options['colors'] = [0x00AAFF, 0x0000FF];

    var travels_container = document.getElementById('map_travels');
    var travelsmap = new google.visualization.GeoMap(travels_container);
    google.visualization.events.addListener(travelsmap, 'regionClick', function(e) {
      var rowindex = travels.getFilteredRows([{column: 0, value: e['region']}]);
      var count = travels.getValue(rowindex[0],1);
      if (count > 0) {
        alert('travels: '+count);
        //location.href = "http://www.kwalinux.nl/somehwere?"+e['region']
      }
    });

    travelsmap.draw(travels, options);

    var fotos_container = document.getElementById('map_fotos');
    var fotosmap = new google.visualization.GeoMap(fotos_container);
    google.visualization.events.addListener(fotosmap, 'regionClick', function(e) {
      var rowindex = fotos.getFilteredRows([{column: 0, value: e['region']}]);
      var count = fotos.getValue(rowindex[0],1);
      if (count > 0) {
        alert('fotos: '+count);
        //location.href = "http://www.kwalinux.nl/somehwere?"+e['region']
      }
    });
    fotosmap.draw(fotos, options);
});
</script>
</head>
<body>
<div id="container">
<div id="myTabs">
<ul>
    <li>Travels</li>
    <li>Fotos</li>
</ul>
<div id="map_travels"></div>
<div id="map_fotos"></div>
</div>
</div>
</body>
</html>


Have fun with it!

 
"Why is the time of day with the slowest traffic called rush hour?"

Powered by Wordpress. Theme by Shlomi Noach, openark.org
© 1997 - 2022 KwaLinux Trainingen | Algemene voorwaarden | KvK: 10147727 | BTW-id: NL001873211B65 | Disclaimer