[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