OpenLayers – Hover on Feature

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);
			OpenLayers.Control.prototype.initialize.apply(
				this, arguments);
			this.handler = new OpenLayers.Handler.Hover(
					this,
				{
					'pause' : this.onPause,
					'move' : this.onMove
				},
					this.handlerOptions);
		},

		onPause : function (e)
		{
			var target = e.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 *

3 × two =