From 1cdf2ed59664b03f5a7292a2ac1839676182e563 Mon Sep 17 00:00:00 2001 From: kongchinhua Date: Wed, 1 Jun 2011 21:45:22 +0000 Subject: [PATCH] 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. --- .../mapofscience/CustomMarker.js | 9 ++- .../js/visualization/mapofscience/GMapAPI.js | 8 ++ .../js/visualization/mapofscience/Polygon.js | 78 ++++++++++++++++++- .../visualization/mapofscience/SizeCoding.js | 4 +- 4 files changed, 90 insertions(+), 9 deletions(-) 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) {