[OpenLayers-Users] Support for Cursors?
Bill Thoen
bthoen at gisnet.com
Thu Jul 2 13:21:51 EDT 2009
Thanks!! That worked. When I configure it like so (using both
.olInfoItemActive and .olInfoActive):
.olControlPanel .olInfoItemActive {
background-image: url("../img/info-on.png");
}
.olInfoActive {
cursor: pointer;
}
Bart van den Eijnden (OSGIS) wrote:
> I now see that your displayClass is olInfo, so you need to use
> olInfoActive for the map cursor:
>
> .olControlPanel .olInfoItemActive {
> background-image: url("../img/info-on.png");
> }
>
> .olInfoActive {
> cursor: pointer;
> }
>
> Best regards,
> Bart
>
> Bill Thoen wrote:
>> Not quite. Now the cursor still appears only over the tool, but only
>> after I activate it. As soon as I move off the icon it reverts to the
>> default arrow cursor. Unless you have (or anyone else has) any other
>> ideas, maybe I'll try a dead-simple OL scrapplication with a basic
>> map and one tool and see if I can get that to work. At least then if
>> it doesn't work I'll have some source code to share, and if it does
>> work, then I'll have a new problem of figuring out what I screwed up
>> in my real application.
>>
>> - Bill
>>
>> Bart van den Eijnden (OSGIS) wrote:
>>
>>> Hi Bill,
>>>
>>> please try:
>>>
>>> .olControlPanel .olInfoItemActive {
>>> background-image: url("../img/info-on.png");
>>> }
>>>
>>> .olInfoItemActive {
>>> cursor: pointer;
>>> }
>>>
>>> Best regards,
>>> Bart
>>>
>>>
>>> Bill Thoen wrote:
>>>
>>>> I'm not sure either. Here's how I'm setting display classes for the
>>>> info tool (as an example). This shows the pointer cursor , but only
>>>> when you hover over the tool icon on the control panel:
>>>> .olControlPanel .olInfoItemActive {
>>>> background-image: url("../img/info-on.png");
>>>> cursor: pointer;
>>>> }
>>>>
>>>> And I add the array of tools to the panel like so:
>>>> // Info Tool
>>>> toolButtons[9] = new OpenLayers.Control.FeatureInfo(
>>>> {title:"Get feature information", "displayClass":
>>>> "olInfo", "showMarker" : false};
>>>> // Add the control panel
>>>> var toolArray = [];
>>>> for( var i=0; i<toolz.length; i++) {
>>>> toolArray[i] = toolButtons[toolz[i]];
>>>> }
>>>> var panel = new OpenLayers.Control.Panel({ div : tool_div });
>>>> panel.addControls( toolArray );
>>>> this.map.addControl( panel );
>>>>
>>>> (the integer array toolz[] that indexs the array of tool objects
>>>> (toolsArray) is just a device that allows me to work with a subset
>>>> of the tools that I have and also put them in a particular order. I
>>>> don't think this has anything to do with it, but I explain it
>>>> 'cause it's a bit weird.)
>>>>
>>>> As far as I can tell, the map window's div displayClass is null.
>>>> What should it be, or am I barking up the wrong tree?
>>>>
>>>> -Bill
>>>>
>>>>
>>>>
>>>> Bart van den Eijnden (OSGIS) wrote:
>>>>
>>>>
>>>>> Hi Bill,
>>>>>
>>>>> not sure, can you check the css class which has been set on the
>>>>> map viewport div when you activate a tool? They should have those
>>>>> values. Maybe there is another class which is preventing the
>>>>> cursors from showing up.
>>>>>
>>>>> Best regards,
>>>>> Bart
>>>>>
>>>>> Bill Thoen wrote:
>>>>>
>>>>>> Thanks Bart, but for some reason this changes the cursor only
>>>>>> over the tool buttons on the control panel. How do I make it
>>>>>> extend over my map window when I change tools?
>>>>>>
>>>>>> bartvde at osgis.nl wrote:
>>>>>>
>>>>>>
>>>>>>> Hi Bill,
>>>>>>>
>>>>>>> yes it's in 2.8.
>>>>>>>
>>>>>>> You need to add css classes depending on the displayClass +
>>>>>>> "Active"
>>>>>>> of a control, e.g. this is what I have:
>>>>>>>
>>>>>>> .olControlDragPanActive {
>>>>>>> cursor: url(lib/openlayers/theme/default/img/pan.cur) 16 16,
>>>>>>> url(../geoservices2.2/lib/openlayers/theme/default/img/pan.cur),
>>>>>>> auto;
>>>>>>> }
>>>>>>> .olControlZoomBoxActive {
>>>>>>> cursor: url(lib/openlayers/theme/default/img/zoomin.cur) 9 9,
>>>>>>> url(../geoservices2.2/lib/openlayers/theme/default/img/zoomin.cur),
>>>>>>> auto;
>>>>>>> }
>>>>>>> .zoomoutActive {
>>>>>>> cursor: url(lib/openlayers/theme/default/img/zoomout.cur) 9 9,
>>>>>>> url(../geoservices2.2/lib/openlayers/theme/default/img/zoomout.cur),
>>>>>>>
>>>>>>> auto;
>>>>>>> }
>>>>>>> .olControlDragPanActive.olDragDown {
>>>>>>> cursor: url(lib/openlayers/theme/default/img/pandown.cur) 16
>>>>>>> 16,
>>>>>>> url(../geoservices2.2/lib/openlayers/theme/default/img/pandown.cur),
>>>>>>>
>>>>>>> auto;
>>>>>>> }
>>>>>>> .GeoServicesControlSLDSelectActive {
>>>>>>> cursor: default;
>>>>>>> }
>>>>>>> .GeoServicesControlFeatureInfoActive {
>>>>>>> cursor: pointer;
>>>>>>> }
>>>>>>> .olControlMeasureActive {
>>>>>>> cursor: crosshair;
>>>>>>> }
>>>>>>> .olControlDrawFeaturePolygonActive {
>>>>>>> cursor: crosshair;
>>>>>>> }
>>>>>>> .olControlDrawFeaturePointActive {
>>>>>>> cursor: crosshair;
>>>>>>> }
>>>>>>> .olControlDrawFeaturePathActive {
>>>>>>> cursor: crosshair;
>>>>>>> }
>>>>>>> .olControlDrawFeaturePointActive {
>>>>>>> cursor: crosshair;
>>>>>>> }
>>>>>>> .olControlDrawFeaturePathActive {
>>>>>>> cursor: crosshair;
>>>>>>> }
>>>>>>> .olControlDrawFeaturePolygonActive {
>>>>>>> cursor: crosshair;
>>>>>>> }
>>>>>>>
>>>>>>> Hope this helps.
>>>>>>>
>>>>>>> Best regards,
>>>>>>> Bart
>>>>>>>
>>>>>>>
>>>>>>>> Was support for using different cursor icons (pointer, text,
>>>>>>>> wait, etc.)
>>>>>>>> built into version 2.8? I didn't see anything about cursors in the
>>>>>>>> release notes but I thought there had been some work done on this.
>>>>>>>>
>>>>>>>> If not, can someone tell me the best place to set the cursor
>>>>>>>> icon for
>>>>>>>> tool buttons? Is there an "on activate" event I can listen for,
>>>>>>>> or is
>>>>>>>> there a better way to do this?
>>>>>>>>
>>>>>>>> Thx,
>>>>>>>> - Bill Thoen
>>>>>>>>
>>>> _______________________________________________
>>>> Users mailing list
>>>> Users at openlayers.org
>>>> http://openlayers.org/mailman/listinfo/users
More information about the Users
mailing list