<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
</head>
<body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; color: rgb(0, 0, 0); font-size: 14px; font-family: Calibri, sans-serif; ">
<div>
<div>Rob,</div>
<div><br>
</div>
<div>Sorry if you get this twice; I forgot to copy the list the first time.</div>
<div><br>
</div>
<div>The controls aren't tied to icons in any way except CSS. The toolbars in OpenLayers are built from large images containing the "on" and "off" states for all the icons in the toolbar. OpenLayers sets certain classes on the buttons when they are activated
and deactivated, and it's up to you to modify the CSS so that the background image has the correct offset for your particular button. I forget whether the editing toolbar background image has a zoom icon in it; it may not, in which case you'll also need to
alter the editing toolbar image.</div>
<div><br>
</div>
<div>Andrew</div>
</div>
<div><br>
</div>
<span id="OLK_SRC_BODY_SECTION">
<div style="font-family:Calibri; font-size:11pt; text-align:left; color:black; BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; PADDING-BOTTOM: 0in; PADDING-LEFT: 0in; PADDING-RIGHT: 0in; BORDER-TOP: #b5c4df 1pt solid; BORDER-RIGHT: medium none; PADDING-TOP: 3pt">
<span style="font-weight:bold">From: </span>Rob Hyx <<a href="mailto:robhyx@gmail.com">robhyx@gmail.com</a>><br>
<span style="font-weight:bold">Date: </span>Wednesday, May 29, 2013 8:55 AM<br>
<span style="font-weight:bold">To: </span>"<a href="mailto:openlayers-users@lists.osgeo.org">openlayers-users@lists.osgeo.org</a>" <<a href="mailto:openlayers-users@lists.osgeo.org">openlayers-users@lists.osgeo.org</a>><br>
<span style="font-weight:bold">Subject: </span>[OpenLayers-Users] Wrong icon when adding control to editing toolbar<br>
</div>
<div><br>
</div>
<div>
<div>
<div dir="ltr">
<div>
<div>Good day,<br>
<br>
</div>
I'm trying to add my zoom box control to an editing toolbar so I can have all my controls in one contiguous row. When I add it to the example given in OL 2.12 I get the wrong icon and it doesn't toggle when pressed. Any ideas? Below is my code (where the relative
paths just point to the JavaScript and CSS that comes with the download unmodified):<br>
<br>
<!DOCTYPE html><br>
<html><br>
<head><br>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><br>
<meta name="apple-mobile-web-app-capable" content="yes"><br>
<title>OpenLayers Editing Toolbar Example</title><br>
<br>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css"><br>
<!--[if lte IE 6]><br>
<link rel="stylesheet" href="../theme/default/ie6-style.css" type="text/css"><br>
<![endif]--><br>
<link rel="stylesheet" href="style.css" type="text/css"><br>
<script src="../lib/OpenLayers.js"></script><br>
<script src="../lib/Firebug/firebug.js"></script><br>
<script type="text/javascript"><br>
var lon = 5;<br>
var lat = 40;<br>
var zoom = 5;<br>
var map, layer;<br>
<br>
function init(){<br>
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",<br>
"<a href="http://vmap0.tiles.osgeo.org/wms/vmap0">http://vmap0.tiles.osgeo.org/wms/vmap0</a>", {layers: 'basic'} );<br>
<br>
vlayer = new OpenLayers.Layer.Vector( "Editable" );<br>
<br>
var editingToolbar = new OpenLayers.Control.EditingToolbar(vlayer);<br>
var zoomBox = new OpenLayers.Control.ZoomBox();<br>
editingToolbar.addControls(zoomBox);<br>
<br>
map = new OpenLayers.Map( 'map', {<br>
controls: [<br>
new OpenLayers.Control.PanZoom(),<br>
editingToolbar<br>
]<br>
});<br>
map.addLayers([layer, vlayer]);<br>
<br>
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);<br>
}<br>
</script><br>
</head><br>
<body onload="init()"><br>
<h1 id="title">Editing Toolbar Example</h1><br>
<br>
<div id="tags"><br>
digitizing, point, line, linestring, polygon, editing<br>
</div><br>
<br>
<p id="shortdesc"><br>
Demonstrate polygon, polyline and point creation and editing tools.<br>
</p><br>
<br>
<div id="panel"></div><br>
<div id="map" class="smallmap"></div><br>
<br>
<div id="docs"></div><br>
</body><br>
</html><br>
<br>
</div>
Thanks in advance.<br>
</div>
</div>
</div>
</span>
</body>
</html>