Image class

An Image object.

Syntax:

new websis.graphic.Image([options]);

Arguments:

  1. options - (object, optional) See below.

Options:

  • id - (string, default: an automatically generated unique identifier) The id of the Image.
  • style - (object) The style of the Image. The object can have the following properties:
    • src - (string, default: websis.url + "/user/default/img/default.png") The url to the Image.
    • width - (number, default: 20) The width of the Image in pixels.
    • height - (number, default: 20) The height of the Image in pixels.
    • opacity - (number, default: 1.0) The opacity of the Image. A value beetween 0.0 and 1.0.
    • cursor - (string) The CSS cursor when hovering over the Image.
  • shape - (object || array(object)) The shape of the Image or an array of shape objects (for multipart images).
    • x - (number) The x-coordinate of the Image.
    • y - (number) The y-coordinate of the Image.
    • width - (number) The width of the Image in meters.
    • height - (number) The height of the Image in meters.
  • bbox - (object, default: generated from property shape) The bounding box of the Image. An object with the properties (minx, miny, maxx, maxy).
  • levels - (array) An array of zoom levels. If this property is set, the Image will only be drawn when the current map zoom level is included in the array.
  • name - (string) The name of the Image.
  • visible - (boolean, default: true) Should this Image be drawn in the map? You can change the visibility of a Image with the methods show and hide.
  • events - (object) An object with events. You can initialize the Image with various events. Your function receives a jQuery event object as the first and a reference to the Image as second argument.
    • mouseover - (function) The event will be fired if the mouse is moved over the graphic.
    • mouseout - (function) The event will be fired if the mouse is moved out of the graphic.
    • mouseenter - (function) The event will be fired if the mouse enters the graphic. The event will not be fired if the mouse is over the graphic but an element is beetween the mouse and the graphic, e.g. another graphic.
    • mouseleave - (function) The event will be fired if the mouse leaves the graphic. The event will not be fired if the mouse leaves the graphic but an element is beetween the mouse and the graphic, e.g. another graphic.
    • mouseup - (function) The event will be fired if the mouse button is released.
    • mousedown - (function) The event will be fired if the mouse button is pressed.
    • mousemove - (function) The event will be fired if the mouse is moved over the map.
    • click - (function) The event will be fired if the user clicks on the graphic.
    • dblclick - (function) The event will be fired if the user double clicks on the graphic.

Returns:

  • (websis.graphic.Image) The Image itself.

Example:

Creates a new Image with a width and a height of 40 pixels and a click event.

				var image = new websis.graphic.Image({
					style: {
						src: 'http://www.map-api.de/user/img/default.png',
						width: 40,
						height: 40
					},
					shape: {
						x: 75000,
						y: 73000
					},
					events: {
						click: function(e, it) {
							alert(it.id);
						}
					}
				});
			

Note:

See websis.graphic.Graphic for inherited methods.