<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>