Afghanistan Election Data

Open Data

Using these tiles with Google Maps

You can add MapBox tiles to any website the Google Maps API. To use the API, you need to first sign up for an API key.

Use the following code as a starting point, but be sure to replace the text, [YOUR KEY HERE], with the key provided to you by Google. This code will produce a map with the Afghanistan Hillshade (English) tileset. To use another tileset, simply change the layername and file_extension variables to match the values found on the desired tileset's page:

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <title>MapBox Afghanistan with Google Maps API</title>
  <script src="http://js.mapbox.com/g/2/mapbox.js" type="text/javascript"></script>
  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=[YOUR KEY HERE]" type="text/javascript"></script>
  <link rel=stylesheet href="gmapbox.css" type="text/css" media=screen />
</head>
  <script type="text/javascript">
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));

        // Customize these variable as needed
        var layername = 'afghanistan-hillshade-en';
        var file_extension = 'jpg'; // 'jpg' or 'png'
        var layer_title = "Afghanistan"
        var min_zoom = 5;
        var max_zoom = 13;

        // Add custom map type
        var options = {minZoom: min_zoom, maxZoom: max_zoom, type:file_extension};
        var custommap = GMapBox(layername, layer_title, options);
        map.setCenter(new GLatLng(34,65), 6)
        map.addMapType(custommap);
        map.setMapType(custommap);
        map.setUIToDefault();
      }
      else {
        alert("The Google Maps API is not compatible with this browser");
      }
    }
    </script>

  <body onload="initialize()" onunload="GUnload()">
    <div id="map" style="width: 600px; height: 400px"></div>
  </body>
</html>

This code generates a map that looks like this:

Let's step through the important parts of this code.

First, we load the MapBox helper JavaScript by adding this code between the <head> tags of the document.

<script src="http://js.mapbox.com/g/2/mapbox.js" type="text/javascript"></script>

Next, we load the standard Google Maps API. Remember to specify your API key properly.

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=PASTE-YOUR-KEY-HERE" type="text/javascript"></script>

In the initialize() method, we check to see if the client's browser is compatible with the Google Maps API.

function initialize() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));

Now we set the options for this map based on the information found on the tileset's page.

Tileset Info

// Customize these variable as needed
var layername = 'afghanistan-hillshade-en';
var file_extension = 'jpg';
var layer_title = "Afghanistan"
var min_zoom = 5;
var max_zoom = 13;

Finally, we create a map using the GMapBox() helper method. We set the center of the map to Afghanistan (coordinates 34,65).

// Add custom map type
var options = {minZoom: min_zoom, maxZoom: max_zoom, type:file_extension};
var custommap = GMapBox(layername, layer_title, options);
map.setCenter(new GLatLng(34,65), 6)
map.addMapType(custommap);
map.setMapType(custommap);
map.setUIToDefault();

Now that we have a base map, we can optionally add an overlay tileset. Below the line with map.setUIToDefault();, add the following code:

// Add overlay: ethnic data
var options = {minZoom: 0, maxZoom: 12, overlay: true, type: 'png', opacity: 1.0};
customoverlay = GMapBox('afghanistan-ethnic', 'Ethnic Data', options);
map.addOverlay(customoverlay);

This code add the layer with the name afghanistan-ethnic. We set the minZoom and maxZoom properties, and set the overlay property to true.

Once we're done, our final code looks like this:

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <title>MapBox Afghanistan with Google Maps API</title>
  <script src="http://js.mapbox.com/g/2/mapbox.js" type="text/javascript"></script>
  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=[YOUR KEY HERE]" type="text/javascript"></script>
  <link rel=stylesheet href="gmapbox.css" type="text/css" media=screen />
</head>
  <script type="text/javascript">
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));

        // Customize these variable as needed
        var layername = 'afghanistan-hillshade-en';
        var file_extension = 'jpg'; // 'jpg' or 'png'
        var layer_title = "Afghanistan"
        var min_zoom = 5;
        var max_zoom = 13;

        // Add custom map type
        var options = {minZoom: min_zoom, maxZoom: max_zoom, type:file_extension};
        var custommap = GMapBox(layername, layer_title, options);
        map.setCenter(new GLatLng(34,65), 6)
        map.addMapType(custommap);
        map.setMapType(custommap);
        map.setUIToDefault();

        // Add overlay: ethnic data
        var options = {minZoom: 0, maxZoom: 12, overlay: true, type: 'png', opacity: 1.0};
        customoverlay = GMapBox('afghanistan-ethnic', 'Ethnic Data', options);
        map.addOverlay(customoverlay);
      }
      else {
        alert("The Google Maps API is not compatible with this browser");
      }
    }
    </script>

  <body onload="initialize()" onunload="GUnload()">
    <div id="map" style="width: 600px; height: 400px"></div>
  </body>
</html>

The final result looks like this:

Related Resources and Sources