[OpenLayers-Users] Customising Toolbar

[Cicconetti, Bob]

This may not be the best way, but here's how I did it:

1) Add your tools to the control in your html file.

  // Extend the edit tool bar to allow deleting features, and gather
  // info about them.
  var selectTool = new OpenLayers.Control.SelectFeature(vlayer,  
  	{
	onSelect:feature_info,
	onUnselect:clear_feature_info
	});

  var deleteTool = new OpenLayers.Control.SelectFeature(vlayer,
        {
	onSelect:deleteFeature,
	onUnselect:clear_feature_info
	});

  var editToolBar = new OpenLayers.Control.EditingToolbar(vlayer);

  var myControls = [ selectTool, deleteTool ];
  // Fun with gimp. Be sure to use patched style.css.
  myControls[0].displayClass = 'olControlSelectFeature';
  myControls[1].displayClass = 'olControlDeleteFeature';

  editToolBar.addControls(myControls);
  map.addControl(editToolBar);


2) Increase the size of the editing toolbar in style.css. 70 extra
pixels may not be exact, but it works for me :) :

.olControlEditingToolbar  {
    float:right;
    right: 0px;
    height: 30px;
    width: 270px;
}

3) Add your icons to the style.css

.olControlEditingToolbar .olControlSelectFeatureItemInactive { 
  background-image: url("img/info_off.png");
}
.olControlEditingToolbar .olControlSelectFeatureItemActive { 
  background-image: url("img/info_on.png");
}
.olControlEditingToolbar .olControlDeleteFeatureItemInactive { 
  background-image: url("img/delete_off.png");
}
.olControlEditingToolbar .olControlDeleteFeatureItemActive { 
  background-image: url("img/delete_on.png");
}

4) Make your new icons.

If you find a good search method, let me know, that's next on my to-do
list after modding LayerSwitcher to turn on and off layers from a single
WMS server.

R C

> -----Original Message-----
> From: users-bounces at openlayers.org
[mailto:users-bounces at openlayers.org]
> On Behalf Of Benoit PESTY
> Sent: Wednesday, April 25, 2007 10:26 AM
> To: users at openlayers.org
> Subject: [OpenLayers-Users] Customising Toolbar
> 
> Hello,
> 
> I'm developping a little application using OpenLayers and Mapserver
and
> I've
> found OpenLayers very promising.
> 
> I'm manager to do a few things I needed thanks to the examples :
> - Show different WMS layers
> - Add the drawing tools and a vector layer
> - Get a feature info when clicking on the map
> - Link the map with a place search function (using geonames and
proj.js
> because i'm in EPSG:27572
> 
> What I would like to do now is to add 2 icons on the (Editing)Toolbar
and
> change the fonctionnalities depending on the selected icon. One icon
to
> show
> info about a feature and one icon to select the feature from a base
layer
> and add it to my vector layer (in order to add the polygon to the
already
> drawn polygons).
> My javascript abilities are a little limited and i'd like to find a
clean
> way to do this without breaking the
> EditingToolbar.js file.