Afghanistan Election Data

Open Data

Using These Tiles With OpenLayers

You can add MapBox tiles to any website using the OpenLayers Javascript Library.

Use the following code as a starting point. This code will produce a map with the Afghanistan Hillshade (English) tileset. To use another tileset, simply change the layername and other variables to match the values found on the desired tileset's page:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Afghanistan Hillshades</title>

    <link rel="stylesheet" type="text/css" href="./mb-demo.css">
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script type="text/javascript">
      var map;
      OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
      OpenLayers.ImgPath = "http://js.mapbox.com/theme/dark/";
      function init(){
        var options = {
          projection: new OpenLayers.Projection("EPSG:900913"),
          displayProjection: new OpenLayers.Projection("EPSG:4326"),
          units: "m",
          maxResolution: 2445.98490469,
          maxExtent: new OpenLayers.Bounds(-20037500, -20037500, 20037500, 20037500)
        };
        map = new OpenLayers.Map('map', options);   
        var hillshades = new OpenLayers.Layer.TMS( "Afghanistan Hillshades",
          [ "http://a.tile.mapbox.com/","http://b.tile.mapbox.com/",     
            "http://c.tile.mapbox.com/","http://d.tile.mapbox.com/" ],
          { 'layername': 'afghanistan-hillshade-en', 'type':'jpg',
            'buffer': 0, 'transitionEffect':'resize',
            "serverResolutions": [
              156543.0339,
              78271.51695,
              39135.758475,
              19567.8792375,
              9783.93961875,
              4891.96980938,
              2445.98490469,
              1222.99245234,
              611.496226172,
              305.748113086,
              152.874056543,
              76.4370282715,
              38.2185141357,
              19.1092570679,
              9.55462853394,
              4.77731426697,
              2.38865713348,
              1.19432856674,
              0.597164283371],
            "resolutions": [
              4891.96980938,
              2445.98490469,
              1222.99245234,
              611.496226172,
              305.748113086,
              152.874056543,
              76.4370282715]
          }
        );
       
        // ADD LAYER
        map.addLayers([hillshades]);
       
        // INITIAL CENTER AND ZOOM
        map.setCenter(new OpenLayers.LonLat(7430000, 4020000));
        map.zoomTo(0);
      }
    </script>
  </head>
  <body onload="init()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>