Marker.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. /* Copyright (c) 2006-2013 by OpenLayers Contributors (see authors.txt for
  2. * full list of contributors). Published under the 2-clause BSD license.
  3. * See license.txt in the OpenLayers distribution or repository for the
  4. * full text of the license. */
  5. /**
  6. * @requires OpenLayers/BaseTypes/Class.js
  7. * @requires OpenLayers/Events.js
  8. * @requires OpenLayers/Icon.js
  9. */
  10. /**
  11. * Class: OpenLayers.Marker
  12. * Instances of OpenLayers.Marker are a combination of a
  13. * <OpenLayers.LonLat> and an <OpenLayers.Icon>.
  14. *
  15. * Markers are generally added to a special layer called
  16. * <OpenLayers.Layer.Markers>.
  17. *
  18. * Example:
  19. * (code)
  20. * var markers = new OpenLayers.Layer.Markers( "Markers" );
  21. * map.addLayer(markers);
  22. *
  23. * var size = new OpenLayers.Size(21,25);
  24. * var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
  25. * var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);
  26. * markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon));
  27. * markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon.clone()));
  28. *
  29. * (end)
  30. *
  31. * Note that if you pass an icon into the Marker constructor, it will take
  32. * that icon and use it. This means that you should not share icons between
  33. * markers -- you use them once, but you should clone() for any additional
  34. * markers using that same icon.
  35. */
  36. OpenLayers.Marker = OpenLayers.Class({
  37. /**
  38. * Property: icon
  39. * {<OpenLayers.Icon>} The icon used by this marker.
  40. */
  41. icon: null,
  42. /**
  43. * Property: lonlat
  44. * {<OpenLayers.LonLat>} location of object
  45. */
  46. lonlat: null,
  47. /**
  48. * Property: events
  49. * {<OpenLayers.Events>} the event handler.
  50. */
  51. events: null,
  52. /**
  53. * Property: map
  54. * {<OpenLayers.Map>} the map this marker is attached to
  55. */
  56. map: null,
  57. /**
  58. * Constructor: OpenLayers.Marker
  59. *
  60. * Parameters:
  61. * lonlat - {<OpenLayers.LonLat>} the position of this marker
  62. * icon - {<OpenLayers.Icon>} the icon for this marker
  63. */
  64. initialize: function(lonlat, icon) {
  65. this.lonlat = lonlat;
  66. var newIcon = (icon) ? icon : OpenLayers.Marker.defaultIcon();
  67. if (this.icon == null) {
  68. this.icon = newIcon;
  69. } else {
  70. this.icon.url = newIcon.url;
  71. this.icon.size = newIcon.size;
  72. this.icon.offset = newIcon.offset;
  73. this.icon.calculateOffset = newIcon.calculateOffset;
  74. }
  75. this.events = new OpenLayers.Events(this, this.icon.imageDiv);
  76. },
  77. /**
  78. * APIMethod: destroy
  79. * Destroy the marker. You must first remove the marker from any
  80. * layer which it has been added to, or you will get buggy behavior.
  81. * (This can not be done within the marker since the marker does not
  82. * know which layer it is attached to.)
  83. */
  84. destroy: function() {
  85. // erase any drawn features
  86. this.erase();
  87. this.map = null;
  88. this.events.destroy();
  89. this.events = null;
  90. if (this.icon != null) {
  91. this.icon.destroy();
  92. this.icon = null;
  93. }
  94. },
  95. /**
  96. * Method: draw
  97. * Calls draw on the icon, and returns that output.
  98. *
  99. * Parameters:
  100. * px - {<OpenLayers.Pixel>}
  101. *
  102. * Returns:
  103. * {DOMElement} A new DOM Image with this marker's icon set at the
  104. * location passed-in
  105. */
  106. draw: function(px) {
  107. return this.icon.draw(px);
  108. },
  109. /**
  110. * Method: erase
  111. * Erases any drawn elements for this marker.
  112. */
  113. erase: function() {
  114. if (this.icon != null) {
  115. this.icon.erase();
  116. }
  117. },
  118. /**
  119. * Method: moveTo
  120. * Move the marker to the new location.
  121. *
  122. * Parameters:
  123. * px - {<OpenLayers.Pixel>|Object} the pixel position to move to.
  124. * An OpenLayers.Pixel or an object with a 'x' and 'y' properties.
  125. */
  126. moveTo: function (px) {
  127. if ((px != null) && (this.icon != null)) {
  128. this.icon.moveTo(px);
  129. }
  130. this.lonlat = this.map.getLonLatFromLayerPx(px);
  131. },
  132. /**
  133. * APIMethod: isDrawn
  134. *
  135. * Returns:
  136. * {Boolean} Whether or not the marker is drawn.
  137. */
  138. isDrawn: function() {
  139. var isDrawn = (this.icon && this.icon.isDrawn());
  140. return isDrawn;
  141. },
  142. /**
  143. * Method: onScreen
  144. *
  145. * Returns:
  146. * {Boolean} Whether or not the marker is currently visible on screen.
  147. */
  148. onScreen:function() {
  149. var onScreen = false;
  150. if (this.map) {
  151. var screenBounds = this.map.getExtent();
  152. onScreen = screenBounds.containsLonLat(this.lonlat);
  153. }
  154. return onScreen;
  155. },
  156. /**
  157. * Method: inflate
  158. * Englarges the markers icon by the specified ratio.
  159. *
  160. * Parameters:
  161. * inflate - {float} the ratio to enlarge the marker by (passing 2
  162. * will double the size).
  163. */
  164. inflate: function(inflate) {
  165. if (this.icon) {
  166. this.icon.setSize({
  167. w: this.icon.size.w * inflate,
  168. h: this.icon.size.h * inflate
  169. });
  170. }
  171. },
  172. /**
  173. * Method: setOpacity
  174. * Change the opacity of the marker by changin the opacity of
  175. * its icon
  176. *
  177. * Parameters:
  178. * opacity - {float} Specified as fraction (0.4, etc)
  179. */
  180. setOpacity: function(opacity) {
  181. this.icon.setOpacity(opacity);
  182. },
  183. /**
  184. * Method: setUrl
  185. * Change URL of the Icon Image.
  186. *
  187. * url - {String}
  188. */
  189. setUrl: function(url) {
  190. this.icon.setUrl(url);
  191. },
  192. /**
  193. * Method: display
  194. * Hide or show the icon
  195. *
  196. * display - {Boolean}
  197. */
  198. display: function(display) {
  199. this.icon.display(display);
  200. },
  201. CLASS_NAME: "OpenLayers.Marker"
  202. });
  203. /**
  204. * Function: defaultIcon
  205. * Creates a default <OpenLayers.Icon>.
  206. *
  207. * Returns:
  208. * {<OpenLayers.Icon>} A default OpenLayers.Icon to use for a marker
  209. */
  210. OpenLayers.Marker.defaultIcon = function() {
  211. return new OpenLayers.Icon(OpenLayers.Util.getImageLocation("marker.png"),
  212. {w: 21, h: 25}, {x: -10.5, y: -25});
  213. };