CSS raphael.js для пульсирующих точек не работает так, как я ожидал ⇐ CSS

[Anonymous]

Я создал следующий код на основе руководства: http://webdesignerwall.com/tutorials/in ... script-map.
Это ссылка на исходный код html-файла https://gist.github.com/anonymous/84795387d09fe08ee8b6
Я изменил его, чтобы отображать на карте случайно одну точку за раз. Но я хочу, чтобы точки отображались с эффектом «импульса». Первоначально точки отображаются в правильном месте, но когда я добавил в класс следующее, чтобы активировать эффект пульсации, расположение кругов изменилось... Я пытался изменить масштаб, но все равно не работает... когда я удалил шкалу, она перестала «пульсировать». Есть ли у вас какие-либо идеи по этому поводу?

$( document ).ready(function() {
//Load the map after the page loads
if (window.addEventListener){ // W3C standard
window.addEventListener('load', function(){worldmap()}, false); //true means that this request will be ignored if auto is set to off
}
else if (window.attachEvent){ // Microsoft
window.attachEvent('onload', function(){worldmap()});
}

function worldmap(){
image_array=[];
var div = document.getElementById('map');
var width=div.offsetWidth;
var scale=width/887;
var height=width*.62;
var paper = Raphael(div, width, height); //create the Raphael canvas in the map div
var background=paper.rect(0, 0, width, height); //create the background
background.attr({fill: ' rgba(32, 32, 32, 1)', 'stroke-width': 0});

//create the map
var map_path="m 267.53333,537.24584 c -0.6,-0.6 -1,...couldn't put the whole path due to charecter limitation";

var map=paper.path(map_path).attr({fill: '#483D8B', stroke: 'white'}).scale(scale, scale, 0, 0);

//create set of locations
var location_set=paper.set();

//create locations
for (var location in locations){
var loc=locations[location];
var xy=get_xy(loc.lat, loc.lng);
var loc_obj=paper.circle(xy.x, xy.y, 7).attr({fill: loc.color, stroke: 'white', 'stroke-width': 2, }).scale(scale, scale, 0, 0);
loc_obj.node.setAttribute("id","i"+location)
loc_obj.node.setAttribute("class","loader")
loc_obj.hide();
loc_obj.name=loc.name;
loc_obj.x=xy.x;
loc_obj.y=xy.y;

location_set.push(loc_obj);
}

var name = document.getElementById('location_name');
// *********************************************Functions *********************************************

function get_xy(lat, lng){ //http://stackoverflow.com/questions/1432 ... projection
var mapWidth=2058;
var mapHeight=1746;
var factor=.404;
var x_adj=-391;
var y_adj=37;
// get x value
var x = (mapWidth*(180+lng)/360)%mapWidth+(mapWidth/2);

//convert from degrees to radians
var latRad = lat*Math.PI/180;

// get y value
var mercN = Math.log(Math.tan((Math.PI/4)+(latRad/2)));
var y = (mapHeight/2)-(mapWidth*mercN/(2*Math.PI));
return { x: x*factor+x_adj, y: y*factor+y_adj}
}

function GetLocationsLength(location){

function ObjectLength( location ) {
var length = 0;
for( var key in location ) {
if( location.hasOwnProperty(key) ) {
++length;
}
}
return length;
};

l=ObjectLength( location );

RandomGenerator(l,locations,location_set);

} //end of selfinvoked Random_Generator

GetLocationsLength(locations)

function RandomGenerator(length,locations,location_set){
location_set[0].show(); //console.log(innerHtml);
var counter=0;
var x=0;
previousX=-1;
var refreshId = setInterval( function() {
x = Math.floor((Math.random() * location_set.length) ); //generates a random number between 0-4

if(counter==0)
{location_set[0].show();
previousX=0;
}
counter++;
location_set[previousX].hide();
location_set[x].show();

//add elements to the box
// var flag = locations[x].name.toString();
//$("img#location").attr("src", flag);
$("img#location").css({"width": "40px", "height": "20px"});
$("span#name").text( locations[x].name).show('slow');
var link = locations[x].name.toString();
$("a#instituteLink").attr("href", link);
$("span#instituteLink").text( locations[x].name).show('slow');

previousX=x;

}, 6000); //end of refreshid funvtion

}//end of function RandomGenerator

}// end of world map function

// *********************************************Location Data*********************************************
var locations={
0: {
name: 'Paris',
lat: 48.866666670,
lng: 2.333333333,
color: 'violet',
},
1: {
name: 'Shanghai',
lat: 31.10,
lng: 121.366,
color: 'black',

},
2: {
name: 'New York',
lat: 40.7,
lng: -73.90,
color: 'red',
},
3: {
name: 'Los Angeles',
lat: 34.0,
lng: -118.25,
color: 'purple',
},
4: {
name: 'Cape Town',
lat: -35.916,
lng: 18.36,
color: 'hotpink',
},
5: {
name: 'Santiago',
lat: -33.45,
lng: -70.66,
color: 'blue',
},
6: {
name: 'Cairo',
lat: 30.05,
lng: 31.25,
color: 'green',
},
7: {
name: 'yolo',
lat: 40.05,
lng: 11.25,
color: 'green',
},

8: {
name: 'Singapore',
lat: 1.30,
lng: 103.83,
color: 'orange',
}
}

});


Подробнее здесь: https://stackoverflow.com/questions/343 ... i-expected