nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Please help - constrain radius of a circle, ArcGIS API

OliviaGill2

I am using this code to draw a circle:

$('#circle').click(function () {

clearPreviousSearch();

map.disableMapNavigation();

$('#run').fadeOut();

buttonclickvalue = 'circle';

drawToolbar.activate(esri.toolbars.Draw.CIRCLE);

});

I've been told I need this code to constrain the radius:

var circle = new Circle({   center: e.mapPoint,   geodesic: domAttr.get(geodesic, "checked"),   radius: 100,   radiusUnit:units.MILES });

But where on earth should it go - it's driving me nuts!!

Find more posts tagged with

Accepted answers

All comments

RobertScheitlin__GISP

Olivia,

Basically you would be replacing the users drawn circle with the contained circle that you create above. So in your draw-end function you would get the event geometry and its centroid and replace it with your circle.

Sample:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Maps Toolbar</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/nihilo/nihilo.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
    <style>
      html, body, #mainWindow {
        font-family: sans-serif;
        height: 100%;
        width: 100%;
      }
      html, body {
        margin: 0;
        padding: 0;
      }
      #header {
        height: 80px;
        overflow: auto;
        padding: 0.5em;
      }
    </style>

    <script src="http://js.arcgis.com/3.12/"></script>
    <script>
      var map, toolbar, symbol, geomTask;

      require([
        "esri/map",
        "esri/toolbars/draw",
        "esri/graphic",
        "esri/geometry/Circle",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/units",
        "dojo/parser", "dijit/registry",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
        "dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!"
      ], function(
        Map, Draw, Graphic, Circle,
        SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
        units, parser, registry
      ) {
        parser.parse();

        map = new Map("map", {
          basemap: "streets",
          center: [-15.469, 36.428],
          zoom: 3
        });

        map.on("load", createToolbar);
        var tool;
        // loop through all dijits, connect onClick event
        // listeners for buttons to activate drawing tools
        registry.forEach(function(d) {
          // d is a reference to a dijit
          // could be a layout container or a button
          if ( d.declaredClass === "dijit.form.Button" ) {
            d.on("click", activateTool);
          }
        });

        function activateTool() {
          tool = this.label.toUpperCase().replace(/ /g, "_");
          toolbar.activate(Draw[tool]);
          map.hideZoomSlider();
        }

        function createToolbar(themap) {
          toolbar = new Draw(map);
          toolbar.on("draw-end", addToMap);
        }

        function addToMap(evt) {
          var symbol;
          toolbar.deactivate();
          map.showZoomSlider();
          switch (evt.geometry.type) {
            case "point":
            case "multipoint":
              symbol = new SimpleMarkerSymbol();
              break;
            case "polyline":
              symbol = new SimpleLineSymbol();
              break;
            default:
              symbol = new SimpleFillSymbol();
              break;
          }
          if (tool === 'CIRCLE'){
            console.info(evt.geometry);
            var circle = new Circle({
              center: evt.geometry.getCentroid(),
              geodesic: true,
              radius: 100,
              radiusUnit: units.MILES
            });
            map.graphics.add(new Graphic(circle, symbol));
          }else{
            map.graphics.add(new Graphic(evt.geometry, symbol));
          }
        }
      });
    </script>
  </head>
  <body class="nihilo">

  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
      <span>Draw:<br /></span>
      <button data-dojo-type="dijit/form/Button">Point</button>
      <button data-dojo-type="dijit/form/Button">Multi Point</button>
      <button data-dojo-type="dijit/form/Button">Line</button>
      <button data-dojo-type="dijit/form/Button">Polyline</button>
      <button data-dojo-type="dijit/form/Button">Polygon</button>
      <button data-dojo-type="dijit/form/Button">Freehand Polyline</button>
      <button data-dojo-type="dijit/form/Button">Freehand Polygon</button>
      <!--The Arrow,Triangle,Circle and Ellipse types all draw with the polygon symbol-->
      <button data-dojo-type="dijit/form/Button">Arrow</button>
      <button data-dojo-type="dijit/form/Button">Triangle</button>
      <button data-dojo-type="dijit/form/Button">Circle</button>
      <button data-dojo-type="dijit/form/Button">Ellipse</button>
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
  </div>

  </body>
</html>

OliviaGill2

Hi Robert, thank you for your help.

This is the toolbar initiate code I have - I'm assuming I can make the amendments you suggest here?

function initToolbars() {

drawfillsymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,

new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,

new dojo.Color([0, 0, 0]), 3.0),

new dojo.Color([255, 255, 0, 0.2]));

drawmarkersymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 25,

new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,

new dojo.Color([0, 0, 0]), 3.0),

new dojo.Color([255, 255, 0, 1.0]));

drawlinesymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,

new dojo.Color([0, 0, 0]), 3.0);

drawToolbar = new esri.toolbars.Draw(map);

drawToolbar.setFillSymbol(drawfillsymbol);

drawToolbar.setMarkerSymbol(drawmarkersymbol);

drawToolbar.setLineSymbol(drawlinesymbol);

editToolbar = new esri.toolbars.Edit(map);

dojo.connect(drawToolbar, "onDrawEnd", addSearchGraphic);

dojo.connect(editToolbar, "onDeactivate", editGraphicEnd);

graphicClickListener = dojo.connect(searchgraphicsLayer, "onClick", graphicsLayerClicked);

}

RobertScheitlin__GISP

Olivia,

The code that you are showing me here has little to do with answering your question.

This line dojo.connect(drawToolbar, "onDrawEnd", addSearchGraphic);

in the addSearchGraphic function is where you need to check if the drawn graphic is a circle (unless that is the only type of geometry that you are using the drawtoolbar to do) and if it is a circle then you replace the drawn circle with your constrained circle:

if (tool === 'CIRCLE'){              console.info(evt.geometry);              var circle = new Circle({                center: evt.geometry.getCentroid(),                geodesic: true,                radius: 100,                radiusUnit: units.MILES              });              map.graphics.add(new Graphic(circle, symbol));            }else{              map.graphics.add(new Graphic(evt.geometry, symbol));            }

JoelBennett

Robert -

Your code would produce a circle of 100 mile radius even if the user drew a circle with a radius less than that, which I don't think is what's intended. Perhaps something like the following would be more appropriate:

function addSearchGraphic(evt) {
 var maxCircle = new Circle({    
  center: evt.geometry.getCentroid(),    
  geodesic: true,    
  radius: 100,    
  radiusUnit: units.MILES    
 });
var maxCircleExtent = maxCircle.getExtent();
 var maxCircleArea = maxCircleExtent.getWidth() * maxCircleExtent.getHeight();
var drawnCircleExtent = evt.geometry.getExtent();
 var drawnCircleArea = drawnCircleExtent.getWidth() * drawnCircleExtent.getHeight();
var resultCircle = ((drawnCircleArea > maxCircleArea) ? maxCircle : evt.geometry);
//set the symbol to something meaningful
 var symbol = null;
//assume reference to map is valid
 map.graphics.add(new Graphic(resultCircle, symbol));
}

RobertScheitlin__GISP

Joel,

OK, my interpretation of her request was different then. Olivia did not say constrain to no larger than. But that is good code for the case that it is her intent, to constrain to no larger than.

OliviaGill2

Sorry I should have been clearer. I am hoping that the user will only be able to draw circles that are a specific radius (10km). So no larger or smaller. Thank you to all for the very helpful replies. I will try and put your suggestions into action today and hopefully I can finally get this very pesky problem pinned down.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.