complex.html

---
layout: default
---
<h3>Complex example with multiple options and method calls..</h3>
  <div id = 'map'></div>
  <p id = 'barrio'></p>
  <p id = 'pueblo'></p>
  <script type = 'text/javascript'>
    // change the id for your node id.
    var node = document.getElementById("map");
    // get color scale
    var color = d3.scale.category20b();
    //whenever the map is ready, paint the pueblos with random colors.
    var ready = function ready(atlas){
      atlas.maps['pueblos'].style("fill", function(){
        var index = Math.round(Math.random()*20);
        return color(index);
      });
      atlas.maps['pueblos'].style("fill-opacity", 0.5);
      var index = 0;
      // three times, select a random pueblo, zoom the map into it.
      var first_animation = function first_animation(){
        index++;
        if(index <= 3){
          //"atlas" is the main object for atlaspr, it has the api.
          //'_zoom_to_random_pueblo' is a non documented method that zooms to a pueblo.
          var pueblo = atlas._zoom_to_random_pueblo(function(info, tile){
            d3.select(tile).style("fill", "red");
            //add the text to the bottom right corner.
            d3.select("#pueblo").text(pueblo.properties.NAME);
          });
        } else{
          //after three zooms, stop the animation, zoom the map back and start the second anim.
          clearInterval(interval);
          atlas.zoom_to_original();
          d3.select("#pueblo").text("");
          index = 0;
          interval = setInterval(second_animation,100);
        }
      }
      //the second animation selects a random barrio and paints it, until there are not more barrios.
      var second_animation = function second_animation(){
        var random_tile = atlas.maps['barrios'][0][index++];
        var tile = d3.select(random_tile).style("fill", color(10));
        d3.select("#barrio").text(tile.attr("data-name"));
        if(index >= atlas.maps['barrios'][0].length){
          clearInterval(interval);
        }
      }
      var interval = setInterval(first_animation, 5000);
    }
    // display the pueblo name, whenever the map is hovered.
    var hover = function hover(info, path){
      d3.select("#pueblo").text(info.properties.NAME);
    };
    // magic.
    new AtlasPR({
      zoom: true, 
      node: node, 
      size: "large" , 
      tiles: ["isla",'barrios','pueblos'], 
      on_ready: ready,
      events: {
        on_mouseover: hover
      }
    });
  </script>
  <div id = 'code'>
{% highlight js linenos%}
// change the id for your node id.
var node = document.getElementById("map");
// get color scale
var color = d3.scale.category20b();
//whenever the map is ready, paint the pueblos with random colors.
var ready = function ready(atlas){
  atlas.maps['pueblos'].style("fill", function(){
    var index = Math.round(Math.random()*20);
    return color(index);
  });
  atlas.maps['pueblos'].style("fill-opacity", 0.5);
  var index = 0;
  // three times, select a random pueblo, zoom the map into it.
  var first_animation = function first_animation(){
    index++;
    if(index <= 3){
      //"atlas" is the main object for atlaspr, it has the api.
      //'_zoom_to_random_pueblo' is a non documented method that zooms to a pueblo.
      var pueblo = atlas._zoom_to_random_pueblo(function(info, tile){
        d3.select(tile).style("fill", "red");
        //add the text to the bottom right corner.
        d3.select("#pueblo").text(pueblo.properties.NAME);
      });
    } else{
      //after three zooms, stop the animation, zoom the map back and start the second anim.
      clearInterval(interval);
      atlas.zoom_to_original();
      d3.select("#pueblo").text("");
      index = 0;
      interval = setInterval(second_animation,100);
    }
  }
  //the second animation selects a random barrio and paints it, until there are not more barrios.
  var second_animation = function second_animation(){
    var random_tile = atlas.maps['barrios'][0][index++];
    var tile = d3.select(random_tile).style("fill", color(10));
    d3.select("#barrio").text(tile.attr("data-name"));
    if(index >= atlas.maps['barrios'][0].length){
      clearInterval(interval);
    }
  }
  var interval = setInterval(first_animation, 5000);
}
// display the pueblo name, whenever the map is hovered.
var hover = function hover(info, path){
  d3.select("#pueblo").text(info.properties.NAME);
};
// magic.
new AtlasPR({
  zoom: true, 
  node: node, 
  size: "large" , 
  tiles: ["isla",'barrios','pueblos'], 
  on_ready: ready,
  events: {
    on_mouseover: hover
  }
});
{% endhighlight %}
  </div>