En este post os enseñaremos como realizar una personalización en OpenLayers para poder cambiar el cursor del ratón en función de la herramienta que seleccionemos en el panel de OpenLayers.

Parece lógico, que si seleccionamos la herramienta para consultar información, el cursor del ratón sobre el mapa cambie para indicar al usuario que tiene la herramienta información seleccionada. Esto lo podemos replicar para cualquiera de las herramientas que hayamos programado.

mouse200px

Para realizar esto de una manera cómoda, es interesante crear una función que maneje el control que queremos cambiar, y el cursor que le queremos poner.

La función, por tanto, pedirá dos parámetros.

  • idControlButton: id asignado al control cuando se ha implementado la herramienta en el panel de control.

info OpenLayers botón

  • typeCursor: el tipo de cursor que deseamos asociar a esa herramienta, help, crosshair,…

En primer lugar seleccionamos el control sobre el que queremos actuar.

Lo siguiente que debemos hacer es registrar un evento asociado a la activación de ese control.

Indicamos ahora que cuando se active esa herramienta, debe estar observando cualquier evento que se produzca sobre el elemento mapa, y si se introduce el ratón dentro de ese elemento se cambia el cursor y si sale se pone el cursor por defecto.

Ahora ya sólo nos queda indicar, que si la herramienta se desactiva, todo debe volver a estar como se carga por defecto.

Todo esto logicamente va envuelto en una función, con el nombre que os parezca adecuado, la cual debéis invocar cuando se carga todo el programa por primera vez.