diff --git a/productMods/js/visualization/mapofscience/CustomMarker.js b/productMods/js/visualization/mapofscience/CustomMarker.js index fa411e6e..785c9217 100644 --- a/productMods/js/visualization/mapofscience/CustomMarker.js +++ b/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 = '
' + this.label +'
' + this.value + ' publications
'; diff --git a/productMods/js/visualization/mapofscience/GMapAPI.js b/productMods/js/visualization/mapofscience/GMapAPI.js index 98b23b5a..d81cf1df 100644 --- a/productMods/js/visualization/mapofscience/GMapAPI.js +++ b/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); } diff --git a/productMods/js/visualization/mapofscience/Polygon.js b/productMods/js/visualization/mapofscience/Polygon.js index d0c84e52..269e595c 100644 --- a/productMods/js/visualization/mapofscience/Polygon.js +++ b/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 : { @@ -64,4 +63,77 @@ var Polygon = Class.extend({ }); this.handlers = null; } -}); \ No newline at end of file +}); + +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(); + })); + } +}); diff --git a/productMods/js/visualization/mapofscience/SizeCoding.js b/productMods/js/visualization/mapofscience/SizeCoding.js index 83f79044..e8e1406f 100644 --- a/productMods/js/visualization/mapofscience/SizeCoding.js +++ b/productMods/js/visualization/mapofscience/SizeCoding.js @@ -56,8 +56,8 @@ var CircleSizeCoder = Class.extend({ this.options = $.extend({}, this.options, options); }, options: { - minRadius: 100000.0, - maxRadius: 2500000.0,//2500000.0, + minRadius: 0.8, + maxRadius: 100.0,//100.0, scaler: new Scaler({}) }, getSize: function(value) {