Geek asks and answers

Can I replace the OpenLayers editing toolbar with regular buttons?

This little OpenLayers.Control.EditingToolbarfrom default:

It is not entirely obvious what these buttons mean. I would like to replace this editing toolbar with a group of buttons (for example, as in what one Twitter botstrap offers):

The layout of the editing toolbar is currently as follows:

<div id="panel" class="olControlEditingToolbar">
  <div class="olControlNavigationItemInactive olButton"></div>
  <div class="olControlDrawFeaturePointItemActive olButton"></div>
  <div class="olControlDrawFeaturePathItemInactive olButton"></div>
  <div class="olControlDrawFeaturePolygonItemInactive olButton"></div>
</div>

Images are the main sprites - so I know I can change them. But I do not see how I can get away from these divs by replacing them with buttons. I thought about just creating a group of buttons manually and adding buttons click()to the buttons, invoking various OpenLayers editing modes. But I could not find documentation on how I can do this.

, , :

  • OpenLayers JS - ?

  • EditingToolbar, OpenLayers - ?

  • , OpenLayers (meh...) - ?

+3
1

- . Draw Feature Example, :

drawControls = {
  point: new OpenLayers.Control.DrawFeature(pointLayer,
      OpenLayers.Handler.Point),
  line: new OpenLayers.Control.DrawFeature(lineLayer,
      OpenLayers.Handler.Path),
  polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
      OpenLayers.Handler.Polygon),
  )
};

for(var key in drawControls) {
  map.addControl(drawControls[key]);
}

, :

function toggleControl(element) {
    for(key in drawControls) {
        var control = drawControls[key];
        if(element.value == key && element.checked) {
            control.activate();
        } else {
            control.deactivate();
        }
    }
}

, HTML . , , onClick, toggleControl. jQuery, :

<ul id="controlToggle">
  <li>
      <input type="radio" name="type" value="none" id="noneToggle"
             onclick="toggleControl(this);" checked="checked" />
      <label for="noneToggle">navigate</label>
  </li>
  <li>
      <input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
      <label for="pointToggle">draw point</label>
  </li>
  <!-- add more elements here, based on which draw modes you added -->
</ul>

( , ) GitHub.

+5

More articles:


All Articles