Map.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. /*
  2. Copyright (c) 2004-2012, The Dojo Foundation All Rights Reserved.
  3. Available via Academic Free License >= 2.1 OR the modified BSD license.
  4. see: http://dojotoolkit.org/license for details
  5. */
  6. if(!dojo._hasResource["dojox.geo.charting.Map"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
  7. dojo._hasResource["dojox.geo.charting.Map"] = true;
  8. dojo.provide("dojox.geo.charting.Map");
  9. dojo.require("dojox.gfx");
  10. dojo.require("dojox.geo.charting._base");
  11. dojo.require("dojox.geo.charting._Feature");
  12. dojo.require("dojox.geo.charting._Marker");
  13. dojo.declare("dojox.geo.charting.Map", null, {
  14. // summary:
  15. // Map widget interacted with charting.
  16. // description:
  17. // Support rendering Americas, AsiaPacific, ContinentalEurope, EuropeMiddleEastAfrica,
  18. // USStates, WorldCountries, and WorldCountriesMercator by default.
  19. // example:
  20. // | var usaMap = new dojox.geo.charting.Map(srcNode, "dojotoolkit/dojox/geo/charting/resources/data/USStates.json");
  21. // | <div id="map" style="width:600px;height:400px;"></div>
  22. // defaultColor: String
  23. // Default map feature color, e.g: "#B7B7B7"
  24. defaultColor:"#B7B7B7",
  25. // highlightColor: String
  26. // Map feature color when mouse over it, e.g: "#"
  27. highlightColor:"#D5D5D5",
  28. // series: Array
  29. // stack to data range, e.g: [{name:'label 1', min:20, max:70, color:'#DDDDDD'},{...},...]
  30. series:[],
  31. constructor: function(/*HTML Node*/container, /*String*/shapeFile){
  32. // container:
  33. // map container html node/id
  34. // shapeFile:
  35. // map shape data url, handled as json style
  36. // data format:
  37. // get map container coords
  38. dojo.style(container, "display", "block");
  39. this.containerSize = {
  40. x: dojo.coords(container).x,
  41. y: dojo.coords(container).y,
  42. w: dojo.coords(container).w || 100,
  43. h: dojo.coords(container).h || 100
  44. };
  45. this.surface = dojox.gfx.createSurface(container, this.containerSize.w, this.containerSize.h);
  46. this.container = container;
  47. this._createZoomingCursor();
  48. this.mapObj = this.surface.createGroup();
  49. this.mapObj.features = {};
  50. // load map shape file
  51. dojo.xhrGet({
  52. url: shapeFile,
  53. handleAs: "json",
  54. sync:true,
  55. load: dojo.hitch(this, "_init")
  56. });
  57. },
  58. setMarkerData: function(/*String*/ markerFile){
  59. // summary:
  60. // import markers from outside file, associate with map feature by feature id
  61. // which identified in map shape file, e.g: "NY":"New York"
  62. // markerFile:
  63. // outside marker data url, handled as json style.
  64. // data format: {"NY":"New York",.....}
  65. dojo.xhrGet({
  66. url: markerFile,
  67. handleAs: "json",
  68. handle: dojo.hitch(this, "_appendMarker")
  69. });
  70. },
  71. setDataStore: function(/*ItemFileReadStore*/ dataStore, /*Object*/ query){
  72. // summary:
  73. // populate data for each map feature from fetched data store
  74. this.dataStore = dataStore;
  75. var self = this;
  76. this.dataStore.fetch({
  77. query: query,
  78. onComplete: function(items){
  79. var item = items[0];
  80. var attributes = self.dataStore.getAttributes(item);
  81. dojo.forEach(attributes, function(name){
  82. if(self.mapObj.features[name]){
  83. self.mapObj.features[name].setValue(self.dataStore.getValue(item, name));
  84. }
  85. });
  86. }
  87. });
  88. },
  89. addSeries: function(series){
  90. this.series = series;
  91. },
  92. _init: function(shapeData){
  93. //transform map to fit container
  94. var mapWidth = shapeData.layerExtent[2] - shapeData.layerExtent[0];
  95. var mapHeight = shapeData.layerExtent[3] - shapeData.layerExtent[1];
  96. this.mapObj.scale = Math.min(this.containerSize.w / mapWidth, this.containerSize.h / mapHeight);
  97. this.mapObj.currentScale = this.mapObj.scale;
  98. this.mapObj.boundBox = shapeData.layerExtent;
  99. this.mapObj.currentBBox = {
  100. x: shapeData.layerExtent[0],
  101. y:shapeData.layerExtent[1]
  102. };
  103. this.mapObj.setTransform([
  104. dojox.gfx.matrix.scale(this.mapObj.scale),
  105. dojox.gfx.matrix.translate(-shapeData.layerExtent[0], -shapeData.layerExtent[1])
  106. ]);
  107. // if there are "features", then implement them now.
  108. dojo.forEach(shapeData.featureNames, function(item){
  109. var featureShape = shapeData.features[item];
  110. featureShape.bbox.x = featureShape.bbox[0];
  111. featureShape.bbox.y = featureShape.bbox[1];
  112. featureShape.bbox.w = featureShape.bbox[2];
  113. featureShape.bbox.h = featureShape.bbox[3];
  114. var feature = new dojox.geo.charting._Feature(this, item, featureShape);
  115. feature.init();
  116. this.mapObj.features[item] = feature;
  117. }, this);
  118. // set up a marker.
  119. this.mapObj.marker = new dojox.geo.charting._Marker({}, this);
  120. },
  121. _appendMarker: function(markerData){
  122. this.mapObj.marker = new dojox.geo.charting._Marker(markerData, this);
  123. },
  124. _createZoomingCursor: function(){
  125. if(!dojo.byId("mapZoomCursor")){
  126. var mapZoomCursor = dojo.doc.createElement("div");
  127. dojo.attr(mapZoomCursor,"id","mapZoomCursor");
  128. dojo.addClass(mapZoomCursor,"mapZoomIn");
  129. dojo.style(mapZoomCursor,"display","none");
  130. dojo.body().appendChild(mapZoomCursor);
  131. }
  132. },
  133. onFeatureClick: function(feature){
  134. },
  135. onFeatureOver: function(feature){
  136. },
  137. onZoomEnd:function(feature){
  138. }
  139. });
  140. }