Created a custom circle polygon that fixed generic google.maps.Circle bugs that becomes irregular shape while near to latitude N180 and latitude S180, circle size was changed based on distance from the (0,0), etc.

productMods/js/visualization/mapofscience/CustomMarker.js

@@ -1,8 +1,8 @@
 /* $This file is distributed under the terms of the license in /doc/license.txt$ */
-var ScinodePolygon = Polygon.extend({
+var ScinodePolygon = CirclePolygon.extend({
 	init: function(options) {
-		options.polygon = createGoogleCirclePolygon(options);
 		this._super(options);
+		this.hide();
 	},
 	setValue: function(value) {
 		this.options.value = value;
@@ -11,11 +11,11 @@ var ScinodePolygon = Polygon.extend({
 		return this.options.value;
 	},
 	setSize: function(size) {
-		this.polygon.setRadius(size);
+		this.setRadius(size);
 		this.setZIndex(-size);
 	},
 	focus: function() {
-		this.setOptions({strokeWeight: 2.0});
+		this.setOptions({strokeWeight: 3.0});
 	},
 	unfocus: function() {
 		this.setOptions({strokeWeight: 1.0});
@@ -23,6 +23,7 @@ var ScinodePolygon = Polygon.extend({
 	registerEvents : function() {
 		var me = this;
 		var polygon = me.polygon;
+		this._super();
 		this.registerEvent(addClickListener(polygon, function() {
 			INFO_WINDOW.setPosition(this.center);
 			var content = '<div style="font-size: 80%; padding: 5px; text-align: left;"><b>' + this.label +'</b><br />' + this.value + ' publications </div>';

productMods/js/visualization/mapofscience/GMapAPI.js

@@ -25,6 +25,10 @@ function createGoogleCirclePolygon(options) {
 	return new GMAPS.Circle(options);
 }
 
+function createGooglePolygon(options) {
+	return new GMAPS.Polygon(options);
+}
+
 function createGoogleMarker(options) {
 	return new GMAPS.Marker(options);
 }
@@ -36,6 +40,10 @@ function createInfoWindow(content, maxWidth) {
 		});
 }
 
+function addMapProjectionChangedListener(map, actionFunction) {
+	return GEVENT.addListener(map, 'projection_changed', actionFunction);
+}
+
 function addMouseOverListener(marker, actionFunction) {
 	return GEVENT.addListener(marker, 'mouseover', actionFunction);
 }

productMods/js/visualization/mapofscience/Polygon.js

@@ -7,9 +7,8 @@ var Polygon = Class.extend({
 		if (options.polygon) {
 			this.polygon = options.polygon;
 		} else {
-			this.polygon = createGoogleCirclePolygon(options);
+			this.polygon = createGooglePolygon(options);
 		}
-		this.hide();
 		this.registerEvents();
 	},
 	options : {
@@ -65,3 +64,76 @@ var Polygon = Class.extend({
 		this.handlers = null;
 	}
 });
+
+var RADIAN_PER_DEGREE = Math.PI / 180;
+
+function degreeToRadians(degree) {
+	return degree * RADIAN_PER_DEGREE;
+}
+
+var CirclePolygon = Polygon.extend({
+	init : function(options) {
+		this.options = $.extend({}, this.options, options);
+		this._super(this.options);
+	},
+	options : {
+		radius: 0.0,
+		center: null
+	},
+	addToMap: function() {
+		if (!this.isPointsCreated()) {
+			this.initCirclePoints();
+		}
+		this._super();
+	},
+	show: function() {
+		if (!this.isPointsCreated()) {
+			this.initCirclePoints();
+		}
+		
+		console.log(this.polygon.getPaths().getLength());
+		this._super();
+	},
+	isPointsCreated: function() {
+		return (this.polygon.getPath().getLength() > 1);
+	},
+	initCirclePoints: function() {
+		this.clearCirclePoints();
+		this.createCirclePoints();
+	},
+	createCirclePoints: function() {
+		var me = this;
+		var map = me.options.map;
+		var latLngArray = new google.maps.MVCArray(); // Circle's LatLngs
+		//console.log(map.getProjection());
+		if (map && map.getProjection()) {
+			var projection = map.getProjection();
+			var centerPoint = projection.fromLatLngToPoint(me.options.center);
+			var radius = me.options.radius;
+	
+			// Create polygon points (extra point to close polygon)
+			for (var degree = 0; degree < 360; degree++) {
+				var radian = degreeToRadians(degree);
+				var x = centerPoint.x + (radius * Math.sin(radian));
+				var y = centerPoint.y + (radius * Math.cos(radian));
+				var point = new google.maps.Point(parseFloat(x), parseFloat(y));
+				latLngArray.push(projection.fromPointToLatLng(point));
+			}
+		}
+		me.polygon.setPath(latLngArray);
+	},
+	clearCirclePoints: function() {
+		this.polygon.getPath().clear();
+	},
+	setRadius: function(radius) {
+		this.polygon.radius = radius;
+		this.options.radius = radius;
+		this.initCirclePoints();
+	},
+	registerEvents: function() {
+		var me = this;
+		this.registerEvent(addMapProjectionChangedListener(me.options.map, function() {
+			me.initCirclePoints(); 
+		}));
+	}
+});

productMods/js/visualization/mapofscience/SizeCoding.js

@@ -56,8 +56,8 @@ var CircleSizeCoder = Class.extend({
 		this.options = $.extend({}, this.options, options);
 	},
 	options: {
-		minRadius: 100000.0,
+		minRadius: 0.8,
-		maxRadius: 2500000.0,//2500000.0,
+		maxRadius: 100.0,//100.0,
 		scaler: new Scaler({})
 	},
 	getSize: function(value) {