Nasrul Hazim Bin Mohamad

OpenLayers – Hover on Feature


Use the following to have your own custom on hover feature.

OpenLayers.Control.Hover = OpenLayers.Class(OpenLayers.Control,
		defaultHandlerOptions :
			'delay' : 500,
			'pixelTolerance' : null,
			'stopMove' : false

		initialize : function (options)
			this.handlerOptions = OpenLayers.Util.extend(
				{}, this.defaultHandlerOptions);
				this, arguments);
			this.handler = new OpenLayers.Handler.Hover(
					'pause' : this.onPause,
					'move' : this.onMove

		onPause : function (e)
			var target =;
			if (target._featureId)
				var ft = OpenLayers.Map.getLayer(target._featureId);
				var xy = e.xy;

				// do something with feature;

				// display custom info window for the feature;

				// or display label for the feature

				// position the info window using `xy`

		onMove : function (e)
			//do something
Custom Hover on Feature and Info Window

Custom Hover on Feature and Info Window

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    Markdown is turned off in code blocks:
     [This is not a link](

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see

four + nine =