0

I have to amend the following code so that on the map it's possible to draw a second circle graphic as well as a line, polygon and point. I've tried to add an else if statement much like the polygon type but that hasn't worked.

Can anyone advise?

function addSearchGraphic(geometry) {

    drawToolbar.deactivate();
    map.enableMapNavigation();
    var type = geometry.type; //can only ever be a point or polygon

    if (type === "point") {
        $('#point').button("option", "label", "Draw Another Search Point");
        $('#polygon').button("disable");
        $('#line').button("disable");
        $('#circle').button("disable");
        symbol = drawToolbar.markerSymbol;
        searchgraphicsLayer.add(new esri.Graphic(geometry, symbol));
    } else if (type === "polygon") {
        $('#point').button("disable");
        $('#line').button("disable");
        symbol = drawToolbar.fillSymbol;
        if (esri.geometry.polygonSelfIntersecting(geometry)) {
            alert('Problem! The area you have drawn has a boundary that crosses over itself.  Please redraw your area');
        } else {
            $('#polygon').button("option", "label", "Draw Another Search Area");
            searchgraphicsLayer.add(new esri.Graphic(geometry, symbol));
        }   
    } else if (type === "polyline") {
        $('#line').button("option", "label", "Draw Another Search Line");
        $('#point').button("disable");
        $('#polygon').button("disable");
        $('#circle').button("disable");
        symbol = drawToolbar.lineSymbol;
        searchgraphicsLayer.add(new esri.Graphic(geometry, symbol));
    }
    bufferSearchGeometries();
}

1 Answer 1

2

I have symbols set up for all those options (you probably do too). Something like this ...

 symbols = {};
 symbols.circle = new SimpleFillSymbol().setColor(new Color([0, 0, 180, 0.25]));

or in your "else if" block,

} else if (type === "circle") {
  symbols.arrow = new SimpleFillSymbol().setColor(new Color([0, 0, 180, 0.25]));

All of the second part (with the else if) is inside a function activateTool(type) as in this sample ... drawing tools. That sample is what I drew upon (no pun intended) for my drawing tools map and the "type" that is activated is indicated by the button that is clicked.

Another piece of this that I borrowed from a different sample (but it serves the same purpose as the "registry.forEach" line in the sample is like this ...

  // find the divs for buttons
  query(".drawing").forEach(function(btn) {
    var button = new Button({
      label: btn.innerHTML,
      onClick: function() {
        activateTool(this.id);
      }
    }, btn);
  });

And that serves to automate the creation of the buttons using dojo. It requires that I have these divs and it adds the buttons to the divs automagically.

  <div id="drawingWrapper">
    Draw Stuff!:
    <div id="point" class="drawing">Point</div>
    <div id="freehandpolyline" class="drawing">Freehand Polyline</div>
    <div id="freehandpolygon" class="drawing">Freehand Polygon</div>
    <div id="line" class="drawing">Straight Line</div>
    <div id="circle" class="drawing">Circle</div>
    <div id="arrow" class="drawing">Arrow</div>
  </div>

If you get stuck take a look at this sample that I made.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.