Pongamos que tienes un mapa con un control para, al hacer click sobre objetos de una capa, ver su información, del tipo ‘OpenLayers.Control.SelectFeature‘. Quieres poner otra para cualquier otra cosa, pero tienes que declararlo también como ‘OpenLayers.Control.SelectFeature‘ porque si no lo haces (La declaras como ModifyLayer, por ejemplo, y rezas para que no se queje al añadirla al mapa) la barra de controles empezará a hacer cosas raras. Y cuando digo raras quiero decir que no va a funcionar.
El problema es que si declaras dos controles del mismo tipo, te van a coger los dos el mismo estilo y van a aparecer en la barra de herramientas con el mismo icono y el mismo title. Y tú lo que quieres es que cada una tenga su icono y su title, claro.
Esto es tremendamente sencillo y seguramente ya sabréis cómo hacerlo, pero de nuevo me he encontrado con que la información “concreta” sobre este tema no está “concentrada” en un único sitio, y además está en inglés. Y además me pareció algo interesante que poner aquí.
Al declarar el controlador, para cambiar el atributo title solo tienes que cambiar el parámetro title (duh). Puedes meterle a capón el texto que quieras o usar internacionalización, eso ya es cuestión de cada aplicación.
Para cambiar el icono es casi igual de fácil, solo hay que dar un pasito más. El parámetro a tocar es displayClass. Si no pones este atributo en la inicialización del control, la clase que se le asigna al control por defecto es ‘olControlSelectFeature‘, y en la barra de herramientas tendrá asociadas las clases ‘olControlSelectFeatureItemActive‘ y ‘olControlSelectFeatureItemInactive‘.
Si se usa displayClass, al control se le asigna la clase que se indique, y las clases que tendrá en la barra de herramientas serán ‘[miclase]ItemActive‘ y ‘[miclase]ItemInactive‘, así que lo único que queda por hacer es definir el estilo de esas dos clases en el .css que toque.
var pick_station_feature_control = new OpenLayers.Control.SelectFeature([vectorLayer],{
multiple: false,
toggle: false,
multipleKey: 'shiftKey',
hover: false,
title: OpenLayers.i18n('map.select'),
displayClass:'abc'
}
.abcItemActive {
background-image: url("../imagenes/icon_select_station.png");
background-repeat: no-repeat;
margin-left:4px;
width: 34px;
height: 34px;
}
.abcItemInactive {
background-image: url("../imagenes/icon_select_station_unselected.png");
background-repeat: no-repeat;
margin-left:4px;
width: 34px;
height: 34px;
}
Y ya está, el control se añade con sus imágenes de selecciado y no seleccionado, y su atributo title particulares.
Espero que esta entrada pueda ser de utilidad para alguien. Y si no, como siempre, aquí tenéis un gato para compensar.
