Icon.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. /* Copyright (c) 2006-2011 by OpenLayers Contributors (see authors.txt for
  2. * full list of contributors). Published under the Clear BSD license.
  3. * See http://svn.openlayers.org/trunk/openlayers/license.txt for the
  4. * full text of the license. */
  5. /**
  6. * @requires OpenLayers/BaseTypes/Class.js
  7. */
  8. /**
  9. * Class: OpenLayers.Icon
  10. *
  11. * The icon represents a graphical icon on the screen. Typically used in
  12. * conjunction with a <OpenLayers.Marker> to represent markers on a screen.
  13. *
  14. * An icon has a url, size and position. It also contains an offset which
  15. * allows the center point to be represented correctly. This can be
  16. * provided either as a fixed offset or a function provided to calculate
  17. * the desired offset.
  18. *
  19. */
  20. OpenLayers.Icon = OpenLayers.Class({
  21. /**
  22. * Property: url
  23. * {String} image url
  24. */
  25. url: null,
  26. /**
  27. * Property: size
  28. * {<OpenLayers.Size>}
  29. */
  30. size: null,
  31. /**
  32. * Property: offset
  33. * {<OpenLayers.Pixel>} distance in pixels to offset the image when being rendered
  34. */
  35. offset: null,
  36. /**
  37. * Property: calculateOffset
  38. * {<OpenLayers.Pixel>} Function to calculate the offset (based on the size)
  39. */
  40. calculateOffset: null,
  41. /**
  42. * Property: imageDiv
  43. * {DOMElement}
  44. */
  45. imageDiv: null,
  46. /**
  47. * Property: px
  48. * {<OpenLayers.Pixel>}
  49. */
  50. px: null,
  51. /**
  52. * Constructor: OpenLayers.Icon
  53. * Creates an icon, which is an image tag in a div.
  54. *
  55. * url - {String}
  56. * size - {<OpenLayers.Size>}
  57. * offset - {<OpenLayers.Pixel>}
  58. * calculateOffset - {Function}
  59. */
  60. initialize: function(url, size, offset, calculateOffset) {
  61. this.url = url;
  62. this.size = (size) ? size : new OpenLayers.Size(20,20);
  63. this.offset = offset ? offset : new OpenLayers.Pixel(-(this.size.w/2), -(this.size.h/2));
  64. this.calculateOffset = calculateOffset;
  65. var id = OpenLayers.Util.createUniqueID("OL_Icon_");
  66. this.imageDiv = OpenLayers.Util.createAlphaImageDiv(id);
  67. },
  68. /**
  69. * Method: destroy
  70. * Nullify references and remove event listeners to prevent circular
  71. * references and memory leaks
  72. */
  73. destroy: function() {
  74. // erase any drawn elements
  75. this.erase();
  76. OpenLayers.Event.stopObservingElement(this.imageDiv.firstChild);
  77. this.imageDiv.innerHTML = "";
  78. this.imageDiv = null;
  79. },
  80. /**
  81. * Method: clone
  82. *
  83. * Returns:
  84. * {<OpenLayers.Icon>} A fresh copy of the icon.
  85. */
  86. clone: function() {
  87. return new OpenLayers.Icon(this.url,
  88. this.size,
  89. this.offset,
  90. this.calculateOffset);
  91. },
  92. /**
  93. * Method: setSize
  94. *
  95. * Parameters:
  96. * size - {<OpenLayers.Size>}
  97. */
  98. setSize: function(size) {
  99. if (size != null) {
  100. this.size = size;
  101. }
  102. this.draw();
  103. },
  104. /**
  105. * Method: setUrl
  106. *
  107. * Parameters:
  108. * url - {String}
  109. */
  110. setUrl: function(url) {
  111. if (url != null) {
  112. this.url = url;
  113. }
  114. this.draw();
  115. },
  116. /**
  117. * Method: draw
  118. * Move the div to the given pixel.
  119. *
  120. * Parameters:
  121. * px - {<OpenLayers.Pixel>}
  122. *
  123. * Returns:
  124. * {DOMElement} A new DOM Image of this icon set at the location passed-in
  125. */
  126. draw: function(px) {
  127. OpenLayers.Util.modifyAlphaImageDiv(this.imageDiv,
  128. null,
  129. null,
  130. this.size,
  131. this.url,
  132. "absolute");
  133. this.moveTo(px);
  134. return this.imageDiv;
  135. },
  136. /**
  137. * Method: erase
  138. * Erase the underlying image element.
  139. *
  140. */
  141. erase: function() {
  142. if (this.imageDiv != null && this.imageDiv.parentNode != null) {
  143. OpenLayers.Element.remove(this.imageDiv);
  144. }
  145. },
  146. /**
  147. * Method: setOpacity
  148. * Change the icon's opacity
  149. *
  150. * Parameters:
  151. * opacity - {float}
  152. */
  153. setOpacity: function(opacity) {
  154. OpenLayers.Util.modifyAlphaImageDiv(this.imageDiv, null, null, null,
  155. null, null, null, null, opacity);
  156. },
  157. /**
  158. * Method: moveTo
  159. * move icon to passed in px.
  160. *
  161. * Parameters:
  162. * px - {<OpenLayers.Pixel>}
  163. */
  164. moveTo: function (px) {
  165. //if no px passed in, use stored location
  166. if (px != null) {
  167. this.px = px;
  168. }
  169. if (this.imageDiv != null) {
  170. if (this.px == null) {
  171. this.display(false);
  172. } else {
  173. if (this.calculateOffset) {
  174. this.offset = this.calculateOffset(this.size);
  175. }
  176. var offsetPx = this.px.offset(this.offset);
  177. OpenLayers.Util.modifyAlphaImageDiv(this.imageDiv, null, offsetPx);
  178. }
  179. }
  180. },
  181. /**
  182. * Method: display
  183. * Hide or show the icon
  184. *
  185. * Parameters:
  186. * display - {Boolean}
  187. */
  188. display: function(display) {
  189. this.imageDiv.style.display = (display) ? "" : "none";
  190. },
  191. /**
  192. * APIMethod: isDrawn
  193. *
  194. * Returns:
  195. * {Boolean} Whether or not the icon is drawn.
  196. */
  197. isDrawn: function() {
  198. // nodeType 11 for ie, whose nodes *always* have a parentNode
  199. // (of type document fragment)
  200. var isDrawn = (this.imageDiv && this.imageDiv.parentNode &&
  201. (this.imageDiv.parentNode.nodeType != 11));
  202. return isDrawn;
  203. },
  204. CLASS_NAME: "OpenLayers.Icon"
  205. });