D3 Examples - Geography Quiz Starter Kit

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <title>Geography Game</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.17.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.17.0/mapbox-gl.css' rel='stylesheet' />
  <style>
    body { margin:0; padding:0; font: 15px/20px sans-serif; }
    .overlay {
      padding: 10px;
      position: absolute;
      height: 100px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      background: #fff;
    }
​
    #buttons { display: inline; }
    button {
      display:inline-block;
      font-size: 30px;
      padding:5px;
      margin:0 10px;
    }
    #map {
      position:absolute;
      top:0;
      bottom:100px;
      width:100%;
    }
  </style>
</head>
<body>
<div id='map'></div>
<div class='overlay'>
  <div style='display:inline-block;padding:5px 20px;'>
    <h2>Name that country!</h2>
    <p>What country is highlighted in orange?</p>
  </div>
  <div id='buttons'>
  </div>
</div>
<script src='names.js'></script>
<script>
// Welcome to the Mapbox Geography game workshop! You've downloaded
// right file: you should be looking at this in your text editor.
​
// We already have a few things defined that you should be aware of:
// mapboxgl: the Mapbox GL JS library, the way you'll show maps
// names: a list of the names of all the countries
// boundsByName: an object that gives you the bounds of each country
// buttons: the container, a div element, for the buttons
​
// The first step is replacing YOUR-ACCESS-TOKEN-HERE with your access
// token. You can find your access token in Mapbox Studio on the right-hand
// side.
mapboxgl.accessToken = 'YOUR-ACCESS-TOKEN-HERE';
​
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/satellite-v8',
    center: [0, 0],
    zoom: 3
});
​
// Here are the steps:
​
// 1: adding a single country, the United States, in orange on the map.
// 2: choosing three countries from the list of countries from the names variable
// 3: highlighting the first country we choose
// 4: zooming to the first country we choose, by using boundsByName
// 5: adding a button for each of the three countries we choose
// 6: adding the name of the country and an onclick function to each button
// 7: determining whether you've clicked the right country
// 8: choosing countries at random
// 9: randomizing the buttons as well
// 10: make the game start again if you win!
​
map.on('style.load', function() {
  // Your code will go below this line!
​
});
</script>
</body>
</html>
​
    