1 // change the id for your node id.
2 var node = document.getElementById("map");
3 // get color scale
4 var color = d3.scale.category20b();
5 //whenever the map is ready, paint the pueblos with random colors.
6 var ready = function ready(atlas){
7 atlas.maps['pueblos'].style("fill", function(){
8 var index = Math.round(Math.random()*20);
9 return color(index);
10 });
11 atlas.maps['pueblos'].style("fill-opacity", 0.5);
12 var index = 0;
13 // three times, select a random pueblo, zoom the map into it.
14 var first_animation = function first_animation(){
15 index++;
16 if(index <= 3){
17 //"atlas" is the main object for atlaspr, it has the api.
18 //'_zoom_to_random_pueblo' is a non documented method that zooms to a pueblo.
19 var pueblo = atlas._zoom_to_random_pueblo(function(info, tile){
20 d3.select(tile).style("fill", "red");
21 //add the text to the bottom right corner.
22 d3.select("#pueblo").text(pueblo.properties.NAME);
23 });
24 } else{
25 //after three zooms, stop the animation, zoom the map back and start the second anim.
26 clearInterval(interval);
27 atlas.zoom_to_original();
28 d3.select("#pueblo").text("");
29 index = 0;
30 interval = setInterval(second_animation,100);
31 }
32 }
33 //the second animation selects a random barrio and paints it, until there are not more barrios.
34 var second_animation = function second_animation(){
35 var random_tile = atlas.maps['barrios'][0][index++];
36 var tile = d3.select(random_tile).style("fill", color(10));
37 d3.select("#barrio").text(tile.attr("data-name"));
38 if(index >= atlas.maps['barrios'][0].length){
39 clearInterval(interval);
40 }
41 }
42 var interval = setInterval(first_animation, 5000);
43 }
44 // display the pueblo name, whenever the map is hovered.
45 var hover = function hover(info, path){
46 d3.select("#pueblo").text(info.properties.NAME);
47 };
48 // magic.
49 new AtlasPR({
50 zoom: true,
51 node: node,
52 size: "large" ,
53 tiles: ["isla",'barrios','pueblos'],
54 on_ready: ready,
55 events: {
56 on_mouseover: hover
57 }
58 });
