1. Fix for http://issues.library.cornell.edu/browse/NIHVIVO-2851 Improved function calling & added reasonable circle-smoothness defaults for map of science vis. Code reviewed by Chin Hua
This commit is contained in:
tankchintan
parent
43089cf3f1
commit
06de1cb8e4
3 changed files with 333 additions and 309 deletions
|
|
@ -168,9 +168,8 @@ var DisciplineMarkerManager = ScimapMarkerManager.extend({
|
||||||
this._super(map, colorStrategy, sizeCoder);
|
this._super(map, colorStrategy, sizeCoder);
|
||||||
this.layer = DISCIPLINES;
|
this.layer = DISCIPLINES;
|
||||||
},
|
},
|
||||||
createMarker: function(subdisciplineKey, density) {
|
createMarker: function(key, density) {
|
||||||
var me = this;
|
var me = this;
|
||||||
var key = SUBDISCIPLINES[subdisciplineKey].discipline;
|
|
||||||
var marker = this._super(key, density);
|
var marker = this._super(key, density);
|
||||||
var poly = marker.polygon;
|
var poly = marker.polygon;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,150 +1,151 @@
|
||||||
/* $This file is distributed under the terms of the license in /doc/license.txt$ */
|
/* $This file is distributed under the terms of the license in /doc/license.txt$ */
|
||||||
var INFO_WINDOW = createInfoWindow("", "300");
|
var INFO_WINDOW = createInfoWindow("", "300");
|
||||||
|
|
||||||
var Polygon = Class.extend({
|
var Polygon = Class.extend({
|
||||||
init : function(options) {
|
init : function(options) {
|
||||||
this.options = $.extend({}, this.options, options);
|
this.options = $.extend({}, this.options, options);
|
||||||
if (options.polygon) {
|
if (options.polygon) {
|
||||||
this.polygon = options.polygon;
|
this.polygon = options.polygon;
|
||||||
} else {
|
} else {
|
||||||
this.polygon = createGooglePolygon(options);
|
this.polygon = createGooglePolygon(options);
|
||||||
}
|
}
|
||||||
this.registerEvents();
|
this.registerEvents();
|
||||||
},
|
},
|
||||||
options : {
|
options : {
|
||||||
map : null,
|
map : null,
|
||||||
icon : null,
|
icon : null,
|
||||||
position : null,
|
position : null,
|
||||||
content : null
|
content : null
|
||||||
},
|
},
|
||||||
addToMap : function() {
|
addToMap : function() {
|
||||||
this.polygon.setMap(this.options.map);
|
this.polygon.setMap(this.options.map);
|
||||||
this.registerEvents();
|
this.registerEvents();
|
||||||
},
|
},
|
||||||
removeFromMap : function() {
|
removeFromMap : function() {
|
||||||
this.unregisterEvents();
|
this.unregisterEvents();
|
||||||
this.polygon.setMap(null);
|
this.polygon.setMap(null);
|
||||||
},
|
},
|
||||||
show : function() {
|
show : function() {
|
||||||
this.polygon.setMap(this.options.map);
|
this.polygon.setMap(this.options.map);
|
||||||
},
|
},
|
||||||
hide : function() {
|
hide : function() {
|
||||||
this.polygon.setMap(null);
|
this.polygon.setMap(null);
|
||||||
},
|
},
|
||||||
setIcon : function(icon) {
|
setIcon : function(icon) {
|
||||||
},
|
},
|
||||||
setZIndex: function(zIndex){
|
setZIndex: function(zIndex){
|
||||||
this.polygon.zIndex = zIndex;
|
this.polygon.zIndex = zIndex;
|
||||||
},
|
},
|
||||||
setTitle : function(title) {
|
setTitle : function(title) {
|
||||||
this.polygon.title = title;
|
this.polygon.title = title;
|
||||||
},
|
},
|
||||||
setOptions: function(options) {
|
setOptions: function(options) {
|
||||||
this.polygon.setOptions(options);
|
this.polygon.setOptions(options);
|
||||||
},
|
},
|
||||||
registerEvent : function(handler) {
|
registerEvent : function(handler) {
|
||||||
var me = this;
|
var me = this;
|
||||||
if (me.handlers == null) {
|
if (me.handlers == null) {
|
||||||
me.handlers = new Array();
|
me.handlers = new Array();
|
||||||
}
|
}
|
||||||
me.handlers.push(handler);
|
me.handlers.push(handler);
|
||||||
},
|
},
|
||||||
unregisterEvent : function(handler) {
|
unregisterEvent : function(handler) {
|
||||||
if (this.handlers[handler]) {
|
if (this.handlers[handler]) {
|
||||||
removeListener(handler);
|
removeListener(handler);
|
||||||
delete(this.handlers[handler]);
|
delete(this.handlers[handler]);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
registerEvents : function() {
|
registerEvents : function() {
|
||||||
},
|
},
|
||||||
unregisterEvents : function() {
|
unregisterEvents : function() {
|
||||||
$.each(this.handlers, function(){
|
$.each(this.handlers, function(){
|
||||||
removeListener(this);
|
removeListener(this);
|
||||||
});
|
});
|
||||||
this.handlers = null;
|
this.handlers = null;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
var RADIAN_PER_DEGREE = Math.PI / 180;
|
var RADIAN_PER_DEGREE = Math.PI / 180;
|
||||||
|
|
||||||
function degreeToRadians(degree) {
|
function degreeToRadians(degree) {
|
||||||
return degree * RADIAN_PER_DEGREE;
|
return degree * RADIAN_PER_DEGREE;
|
||||||
}
|
}
|
||||||
|
|
||||||
var TOOLTIP = new Tooltip({ attachedToMouse: true });
|
var TOOLTIP = new Tooltip({ attachedToMouse: true });
|
||||||
|
|
||||||
var CirclePolygon = Polygon.extend({
|
var CirclePolygon = Polygon.extend({
|
||||||
init : function(options) {
|
init : function(options) {
|
||||||
this.options = $.extend({}, this.options, options);
|
this.options = $.extend({}, this.options, options);
|
||||||
this._super(this.options);
|
this._super(this.options);
|
||||||
},
|
},
|
||||||
options : {
|
options : {
|
||||||
radius: 0.0,
|
radius: 0.0,
|
||||||
center: null
|
center: null
|
||||||
},
|
},
|
||||||
addToMap: function() {
|
addToMap: function() {
|
||||||
if (!this.isPointsCreated()) {
|
if (!this.isPointsCreated()) {
|
||||||
this.initCirclePoints();
|
this.initCirclePoints();
|
||||||
}
|
}
|
||||||
this._super();
|
this._super();
|
||||||
},
|
},
|
||||||
show: function() {
|
show: function() {
|
||||||
if (!this.isPointsCreated()) {
|
if (!this.isPointsCreated()) {
|
||||||
this.initCirclePoints();
|
this.initCirclePoints();
|
||||||
}
|
}
|
||||||
|
|
||||||
this._super();
|
this._super();
|
||||||
},
|
},
|
||||||
isPointsCreated: function() {
|
isPointsCreated: function() {
|
||||||
return (this.polygon.getPath().getLength() > 1);
|
return (this.polygon.getPath().getLength() > 1);
|
||||||
},
|
},
|
||||||
initCirclePoints: function() {
|
initCirclePoints: function() {
|
||||||
this.clearCirclePoints();
|
this.clearCirclePoints();
|
||||||
this.createCirclePoints();
|
this.createCirclePoints();
|
||||||
},
|
},
|
||||||
createCirclePoints: function() {
|
createCirclePoints: function() {
|
||||||
var me = this;
|
var me = this;
|
||||||
var map = me.options.map;
|
var map = me.options.map;
|
||||||
var latLngArray = new google.maps.MVCArray(); // Circle's LatLngs
|
var latLngArray = new google.maps.MVCArray(); // Circle's LatLngs
|
||||||
if (map && map.getProjection()) {
|
if (map && map.getProjection()) {
|
||||||
var projection = map.getProjection();
|
var projection = map.getProjection();
|
||||||
var centerPoint = projection.fromLatLngToPoint(me.options.center);
|
var centerPoint = projection.fromLatLngToPoint(me.options.center);
|
||||||
var radius = me.options.radius;
|
var radius = me.options.radius;
|
||||||
|
|
||||||
// Create polygon points (extra point to close polygon)
|
var incrementDegreeBy = (radius > 2) ? 1 : 10;
|
||||||
for (var degree = 0; degree < 360; degree++) {
|
|
||||||
var radian = degreeToRadians(degree);
|
// Create polygon points (extra point to close polygon)
|
||||||
var x = centerPoint.x + (radius * Math.sin(radian));
|
for (var degree = 0; degree < 360; degree+=incrementDegreeBy) {
|
||||||
var y = centerPoint.y + (radius * Math.cos(radian));
|
var radian = degreeToRadians(degree);
|
||||||
var point = new google.maps.Point(parseFloat(x), parseFloat(y));
|
var x = centerPoint.x + (radius * Math.sin(radian));
|
||||||
latLngArray.push(projection.fromPointToLatLng(point));
|
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() {
|
me.polygon.setPath(latLngArray);
|
||||||
this.polygon.getPath().clear();
|
},
|
||||||
},
|
clearCirclePoints: function() {
|
||||||
setRadius: function(radius) {
|
this.polygon.getPath().clear();
|
||||||
this.polygon.radius = radius;
|
},
|
||||||
this.options.radius = radius;
|
setRadius: function(radius) {
|
||||||
this.initCirclePoints();
|
this.polygon.radius = radius;
|
||||||
},
|
this.options.radius = radius;
|
||||||
registerEvents: function() {
|
this.initCirclePoints();
|
||||||
var me = this;
|
},
|
||||||
var polygon = me.polygon;
|
registerEvents: function() {
|
||||||
this.registerEvent(addMapProjectionChangedListener(me.options.map, function() {
|
var me = this;
|
||||||
me.initCirclePoints();
|
var polygon = me.polygon;
|
||||||
}));
|
this.registerEvent(addMapProjectionChangedListener(me.options.map, function() {
|
||||||
|
me.initCirclePoints();
|
||||||
this.registerEvent(addMouseOverListener(polygon, function() {
|
}));
|
||||||
TOOLTIP.setHtml("<b>" + this.label + "</b>");
|
|
||||||
TOOLTIP.show();
|
this.registerEvent(addMouseOverListener(polygon, function() {
|
||||||
}));
|
TOOLTIP.setHtml("<b>" + this.label + "</b>");
|
||||||
|
TOOLTIP.show();
|
||||||
this.registerEvent(addMouseOutListener(polygon, function() {
|
}));
|
||||||
TOOLTIP.hide();
|
|
||||||
}));
|
this.registerEvent(addMouseOutListener(polygon, function() {
|
||||||
}
|
TOOLTIP.hide();
|
||||||
});
|
}));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -1,158 +1,182 @@
|
||||||
/* $This file is distributed under the terms of the license in /doc/license.txt$ */
|
/* $This file is distributed under the terms of the license in /doc/license.txt$ */
|
||||||
|
|
||||||
var ScimapWidget = Class.extend({
|
var ScimapWidget = Class.extend({
|
||||||
init: function(map, sliderControl) {
|
init: function(map, sliderControl) {
|
||||||
var me = this;
|
var me = this;
|
||||||
me.activeManager = null;
|
me.activeManager = null;
|
||||||
me.isUnloaded = true;
|
me.isUnloaded = true;
|
||||||
me.map = map;
|
me.map = map;
|
||||||
me.sliderControl = sliderControl;
|
|
||||||
me.labelsMarkerManager = new DisciplineLabelsMarkerManager(map);
|
me.sliderControl = sliderControl;
|
||||||
me.disciplineLabelsControl = new CheckBoxPanel({
|
me.labelsMarkerManager = new DisciplineLabelsMarkerManager(map);
|
||||||
map: map,
|
me.disciplineLabelsControl = new CheckBoxPanel({
|
||||||
checked: true,
|
map: map,
|
||||||
text: "Show discipline labels",
|
checked: true,
|
||||||
click: function() {
|
text: "Show discipline labels",
|
||||||
if($(this).attr('checked')) {
|
click: function() {
|
||||||
me.labelsMarkerManager.showMarkers();
|
if($(this).attr('checked')) {
|
||||||
} else {
|
me.labelsMarkerManager.showMarkers();
|
||||||
me.labelsMarkerManager.hideMarkers();
|
} else {
|
||||||
}
|
me.labelsMarkerManager.hideMarkers();
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
me.initView();
|
});
|
||||||
},
|
me.initView();
|
||||||
initView: function(){
|
},
|
||||||
var me = this;
|
initView: function(){
|
||||||
/* Display labels if checked */
|
var me = this;
|
||||||
if (me.disciplineLabelsControl.isChecked()) {
|
/* Display labels if checked */
|
||||||
me.labelsMarkerManager.showMarkers();
|
if (me.disciplineLabelsControl.isChecked()) {
|
||||||
}
|
me.labelsMarkerManager.showMarkers();
|
||||||
me.initMarkerManagers();
|
}
|
||||||
me.sliderControl.setChangeEventHandler(function(event, ui) {
|
me.initMarkerManagers();
|
||||||
me.updateDisplayedMarkers(ui.value);
|
me.sliderControl.setChangeEventHandler(function(event, ui) {
|
||||||
});
|
me.updateDisplayedMarkers(ui.value);
|
||||||
me.show(SCIMAP_TYPE.SUBDISCIPLINE);
|
});
|
||||||
},
|
me.show(SCIMAP_TYPE.SUBDISCIPLINE);
|
||||||
initMarkerManagers: function() {
|
},
|
||||||
if (this.keyToMarkerManagers == null) {
|
initMarkerManagers: function() {
|
||||||
var managers = {};
|
if (this.keyToMarkerManagers == null) {
|
||||||
|
var managers = {};
|
||||||
// Create discipline Marker Manager
|
|
||||||
managers[SCIMAP_TYPE.DISCIPLINE] = new DisciplineMarkerManager(
|
// Create discipline Marker Manager
|
||||||
this.map,
|
managers[SCIMAP_TYPE.DISCIPLINE] = new DisciplineMarkerManager(
|
||||||
new DisciplineColorStrategy(),
|
this.map,
|
||||||
null
|
new DisciplineColorStrategy(),
|
||||||
);
|
null
|
||||||
|
);
|
||||||
// Create subdiscipline Marker Manager
|
|
||||||
managers[SCIMAP_TYPE.SUBDISCIPLINE] = new SubdisciplineMarkerManager(
|
// Create subdiscipline Marker Manager
|
||||||
this.map,
|
managers[SCIMAP_TYPE.SUBDISCIPLINE] = new SubdisciplineMarkerManager(
|
||||||
new SubdisciplineColorStrategy(),
|
this.map,
|
||||||
null
|
new SubdisciplineColorStrategy(),
|
||||||
);
|
null
|
||||||
this.keyToMarkerManagers = managers;
|
);
|
||||||
}
|
this.keyToMarkerManagers = managers;
|
||||||
},
|
}
|
||||||
needLoaded: function(){
|
},
|
||||||
return this.isUnloaded;
|
needLoaded: function(){
|
||||||
},
|
return this.isUnloaded;
|
||||||
loadJsonData: function(data) {
|
},
|
||||||
var me = this;
|
loadJsonData: function(data) {
|
||||||
me.uri = data.uri;
|
var me = this;
|
||||||
me.label = data.label;
|
me.uri = data.uri;
|
||||||
me.pubsWithNoJournals = data.pubsWithNoJournals;
|
me.label = data.label;
|
||||||
me.pubsWithInvalidJournals = data.pubsWithInvalidJournals;
|
me.pubsWithNoJournals = data.pubsWithNoJournals;
|
||||||
me.pubsMapped = data.pubsMapped;
|
me.pubsWithInvalidJournals = data.pubsWithInvalidJournals;
|
||||||
|
me.pubsMapped = data.pubsMapped;
|
||||||
this.isUnloaded = false;
|
|
||||||
$.each(this.keyToMarkerManagers, function(key, manager) {
|
var scienceActivities = {};
|
||||||
// Need to create the AreaSizeCoding function
|
scienceActivities[SCIMAP_TYPE.DISCIPLINE] = me._collateDisciplineActivity(data.subdisciplineActivity);
|
||||||
manager.setSizeCoder(new CircleSizeCoder({
|
scienceActivities[SCIMAP_TYPE.SUBDISCIPLINE] = data.subdisciplineActivity;
|
||||||
scaler: new Scaler({ maxValue: me.pubsMapped })
|
|
||||||
}));
|
this.isUnloaded = false;
|
||||||
//markerManager.setSiseCodingFunction(new AreaSizeCoding(0, data.pubsMapped));
|
|
||||||
$.each(data.subdisciplineActivity, function(subdiscipline, density) {
|
$.each(this.keyToMarkerManagers, function(key, manager) {
|
||||||
|
|
||||||
// Create marker and add it to manager
|
// Need to create the AreaSizeCoding function
|
||||||
var marker = manager.createMarker(subdiscipline, density);
|
manager.setSizeCoder(new CircleSizeCoder({
|
||||||
|
scaler: new Scaler({ maxValue: me.pubsMapped })
|
||||||
}); // end each subdisciplineActivity
|
}));
|
||||||
|
|
||||||
manager.sort();
|
$.each(scienceActivities[key], function(science, density) {
|
||||||
}); // end each markerManagers
|
|
||||||
me.updateMap();
|
// Create marker and add it to manager
|
||||||
},
|
var marker = manager.createMarker(science, density);
|
||||||
mouseIn: function(key, childKey) {
|
|
||||||
var manager = this.getMarkerManager(key);
|
}); // end each scienceActivity
|
||||||
// Focus if only it is an active manager
|
|
||||||
if (manager == this.activeManager) {
|
manager.sort();
|
||||||
// Focus all if no childKey is given
|
}); // end each markerManagers
|
||||||
if (childKey) {
|
me.updateMap();
|
||||||
manager.mouseIn(childKey);
|
},
|
||||||
} else {
|
|
||||||
manager.mouseInAll();
|
_collateDisciplineActivity: function(subdiscipline) {
|
||||||
}
|
|
||||||
}
|
var disciplineToActivity = {};
|
||||||
},
|
|
||||||
mouseOut: function(key, childKey) {
|
$.each(DISCIPLINES, function(id, discipline) {
|
||||||
var manager = this.getMarkerManager(key);
|
disciplineToActivity[id] = 0.0;
|
||||||
// Focus if only it is an active manager
|
});
|
||||||
if (manager == this.activeManager) {
|
|
||||||
// Unfocus all if no childKey is given
|
$.each(subdiscipline, function(key, activity) {
|
||||||
if (childKey) {
|
var currentSubdisciplinesDiscipline = SUBDISCIPLINES[key].discipline;
|
||||||
manager.mouseOut(childKey);
|
disciplineToActivity[currentSubdisciplinesDiscipline] += activity;
|
||||||
} else {
|
});
|
||||||
manager.mouseOutAll();
|
|
||||||
}
|
return disciplineToActivity;
|
||||||
}
|
},
|
||||||
},
|
|
||||||
getMarkerManager: function(key) {
|
mouseIn: function(key, childKey) {
|
||||||
return this.keyToMarkerManagers[key];
|
var manager = this.getMarkerManager(key);
|
||||||
},
|
// Focus if only it is an active manager
|
||||||
hasKey: function(key) {
|
if (manager == this.activeManager) {
|
||||||
return (this.keyToMarkerManagers.hasOwnProperty(key));
|
// Focus all if no childKey is given
|
||||||
},
|
if (childKey) {
|
||||||
show: function(key) {
|
manager.mouseIn(childKey);
|
||||||
var manager = this.getMarkerManager(key);
|
} else {
|
||||||
if (manager) {
|
manager.mouseInAll();
|
||||||
this._switchActiveManager(manager);
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
hide: function(key) {
|
mouseOut: function(key, childKey) {
|
||||||
var manager = this.getMarkerManager(key);
|
var manager = this.getMarkerManager(key);
|
||||||
if (this.activeManager == manager) {
|
// Focus if only it is an active manager
|
||||||
this.cleanup();
|
if (manager == this.activeManager) {
|
||||||
}
|
// Unfocus all if no childKey is given
|
||||||
},
|
if (childKey) {
|
||||||
_switchActiveManager: function(manager) {
|
manager.mouseOut(childKey);
|
||||||
if (this.activeManager != manager) {
|
} else {
|
||||||
this.cleanUp();
|
manager.mouseOutAll();
|
||||||
manager.addMarkersToMap();
|
}
|
||||||
this.activeManager = manager;
|
}
|
||||||
this.updateMap();
|
},
|
||||||
}
|
getMarkerManager: function(key) {
|
||||||
},
|
return this.keyToMarkerManagers[key];
|
||||||
cleanUp: function() {
|
},
|
||||||
if (this.activeManager) {
|
hasKey: function(key) {
|
||||||
this.activeManager.removeMarkersFromMap();
|
return (this.keyToMarkerManagers.hasOwnProperty(key));
|
||||||
INFO_WINDOW.close();
|
},
|
||||||
}
|
show: function(key) {
|
||||||
},
|
var manager = this.getMarkerManager(key);
|
||||||
updateDisplayedMarkers: function(numberOfMarkers) {
|
if (manager) {
|
||||||
this.activeManager.display(numberOfMarkers);
|
this._switchActiveManager(manager);
|
||||||
},
|
}
|
||||||
updateMap: function() {
|
},
|
||||||
var manager = this.activeManager;
|
hide: function(key) {
|
||||||
if (manager) {
|
var manager = this.getMarkerManager(key);
|
||||||
var length = manager.length();
|
if (this.activeManager == manager) {
|
||||||
var slider = this.sliderControl;
|
this.cleanup();
|
||||||
slider.setMin(Math.min(1, length));
|
}
|
||||||
slider.setMax(length);
|
},
|
||||||
slider.setValue(length);
|
_switchActiveManager: function(manager) {
|
||||||
}
|
if (this.activeManager != manager) {
|
||||||
},
|
this.cleanUp();
|
||||||
changeFilter: function(filterType) {
|
manager.addMarkersToMap();
|
||||||
this.show(filterType);
|
this.activeManager = manager;
|
||||||
}
|
this.updateMap();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
cleanUp: function() {
|
||||||
|
if (this.activeManager) {
|
||||||
|
this.activeManager.removeMarkersFromMap();
|
||||||
|
INFO_WINDOW.close();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
updateDisplayedMarkers: function(numberOfMarkers) {
|
||||||
|
this.activeManager.display(numberOfMarkers);
|
||||||
|
},
|
||||||
|
updateMap: function() {
|
||||||
|
var manager = this.activeManager;
|
||||||
|
if (manager) {
|
||||||
|
var length = manager.length();
|
||||||
|
var slider = this.sliderControl;
|
||||||
|
slider.setMin(Math.min(1, length));
|
||||||
|
slider.setMax(length);
|
||||||
|
slider.setValue(length);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
changeFilter: function(filterType) {
|
||||||
|
this.show(filterType);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
Loading…
Add table
Reference in a new issue