title: Can I replace the OpenLayers editing toolbar with normal buttons?
body: <p>This little <a href="http://dev.openlayers.org/docs/files/OpenLayers/Control/EditingToolbar-js.html" rel="nofollow noreferrer"><code>OpenLayers.Control.EditingToolbar</code></a> from is inserted by default:</p>
  
  <p><img src="https://i.stack.imgur.com/adnm2.png" alt=""></p>
  
  <p>It's not really evident what these buttons mean. I would like to replace this editing toolbar with a button group (e.g. like the one Twitter Bootstrap offers):</p>
  
  <p><img src="https://i.stack.imgur.com/mMB7Y.png" alt=""></p>
  
  <p>The markup of the editing toolbar currently is this:</p>
  
  <pre><code>&lt;div id="panel" class="olControlEditingToolbar"&gt;
    &lt;div class="olControlNavigationItemInactive olButton"&gt;&lt;/div&gt;
    &lt;div class="olControlDrawFeaturePointItemActive olButton"&gt;&lt;/div&gt;
    &lt;div class="olControlDrawFeaturePathItemInactive olButton"&gt;&lt;/div&gt;
    &lt;div class="olControlDrawFeaturePolygonItemInactive olButton"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The images are basic sprites – so I know I could change these. But I can't see how I could get away from these <code>div</code>s, replacing them with <code>button</code>s. I thought about just creating the button group manually and add <code>click()</code> event listeners to the buttons, triggering OpenLayers' different editing modes. But I couldn't find any documentation on how I could do that.</p>
  
  <hr>
  
  <p>So, basically, I see these options:</p>
  
  <ul>
  <li><p>Create button group manually, and trigger the appropriate OpenLayers events through my own JS — but which events do I need to trigger?</p></li>
  <li><p>Don't use the <code>EditingToolbar</code>, but manually build my toolbar with OpenLayers — how could I do  that?</p></li>
  <li><p>Modify the automatically created editing toolbar by hacking the OpenLayers source <em>(meh…)</em> — is this worth the effort?</p></li>
  </ul>