LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
#map {height:500px}
#question, #feedback {
  position: absolute;
  background-color: #fff;
  padding: 10px;
  top: 10px;
  left: 10px;
  font-size: 45px;
  font-family: sans-serif;
}

#feedback {
  top: 90px;
}
JS
function main() {
  cartodb
    .createVis(
      "map",
      "https://nkb3.carto.com/api/v2/viz/0bc00fa6-2aa5-4f3c-80be-0b6531847ada/viz.json",
      {
        shareable: false,
        title: false,
        description: false,
        search: false,
        zoomControl: false,
        tiles_loader: true,
        center_lat: 55,
        center_lon: 45,
        zoom: 4
      }
    )
    .done(function(vis, layers) {
      layers[1].setInteraction(true);
      
      city = pick_city();
    
      layers[1].on("featureClick", function(e, latlng, pos, data) {
        var sql = new cartodb.SQL({ user: "nkb3" });
        sql
          .execute(
            "SELECT city_town FROM list_of_cities_in_ru_list_of_cities_in_ru_csv WHERE cartodb_id=" +
              data.cartodb_id
          )
          .done(function(data) {
            clicked_city = data.rows[0].city_town;

            if (clicked_city == city) {
              $("#feedback").text("Very good!");
              city = pick_city();
            } else {
              $("#feedback").text("This is " + clicked_city + ". Try again");
            }
          });
      });
    });
}

function pick_city() {
  var sql = new cartodb.SQL({ user: "nkb3" });
  sql.execute(
      "SELECT city_town FROM list_of_cities_in_ru_list_of_cities_in_ru_csv WHERE pop_2017 > 750000"
    )
     .done(function(data) {
      cities = data.rows;
      city = cities[Math.floor(Math.random() * cities.length)].city_town;
      $("#question").text("Click on " + city);
      return city;
    });
}

window.onload = main;
Term
Wed, 12/27/2017 - 06:59

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv