How to change the radius of the circle around the marker using javascript Arcgis?

ManjariGoyal · ‎11-12-2014

I am trying to create a buffer based on the drop down box radius value. so far I tried two different things but none of them working.

First try:

var circle;

var radius = parseInt(dom.byId("Radius").value);

function Buffer(evt){

console.log(evt);

var radius = parseInt(dom.byId("Radius").value);

circle = new Circle({

center: evt,

geodesic: true,

radius: radius

radiusUnit: "esriMiles"

}

});

//map.graphics.clear();

map.infoWindow.hide();

var graphic = new Graphic(circle, circleSymb);

map.graphics.add(graphic);

Second try:

var circle;

function Buffer(evt){

console.log(evt);

var selectedRadius = (document.getElementById("Radius"), 'change', function(){

circle.setRadius(document.getElementById('Radius').value)

)};

circle = new Circle({

center: evt,

geodesic: true,

radius: "selectedRadius"

radiusUnit: "esriMiles"

}

});

//map.graphics.clear();

map.infoWindow.hide();

var graphic = new Graphic(circle, circleSymb);

map.graphics.add(graphic);

HTML Part: creates a drop down box

Choose the radius in Miles

<option>2 Miles</option>

<option>3 Miles</option>

<option>4 Miles</option>

<option>5 Miles</option>

</select>

RobertScheitlin__GISP · ‎11-12-2014

Manjari,

Would the value of your Radius select component not be "2 Miles"? How will that be parsed into an int? You need your returned value to only have the integer portion of the selected value before you attempt to parse it to an integer.

var strVal = dom.byId("Radius").value;

var radius = parseInt(strVal.replace(' Miles', ''));

OR better yet define a value attribute in your options list:

<option value="2">2 Miles</option>

<option value="3">3 Miles</option>

<option value="4">4 Miles</option>

<option value="5">5 Miles</option>

</select>

and then use this code:

dom.byId("Radius").options[dom.byId("Radius").selectedIndex].value;

ManjariGoyal · ‎11-12-2014

Robert,

It does make sense and I tried it again but still it's not creating a buffer/draw a circle of specified radius.

RobertScheitlin__GISP · ‎11-12-2014

Manjari,

Here is a full working sample:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.11/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%; width: 100%; margin: 0; padding: 0; 
      }
      #controls {
        background: #fff;
        box-shadow: 0 6px 6px -6px #999;
        color: #444;
        font-family: sans-serif;
        height: auto;
        left: 1em;
        padding: 1em;
        position: absolute;
        top: 1em;
        width: auto;
        z-index: 40;
      }
      #controls div {
        padding: 0 0 1em 0;
      }
    </style>

    <script src="//js.arcgis.com/3.11/"></script>
    <script>
      var map;
    
      require([
        "esri/map", "esri/geometry/Circle", "esri/symbols/SimpleFillSymbol", 
        "esri/graphic", "esri/layers/GraphicsLayer",
        "dojo/dom", "dojo/dom-attr", "dojo/domReady!"
      ], function(
        Map, Circle, SimpleFillSymbol, 
        Graphic, GraphicsLayer, 
        dom, domAttr
      ) {
        map = new Map("map", {
          basemap: "streets",
          center: [-120.741, 56.39],
          slider: false,
          zoom: 6
        });
        var symbol = new SimpleFillSymbol().setColor(null).outline.setColor("blue");
        var gl = new GraphicsLayer({ id: "circles" });
        var geodesic = dom.byId("geodesic");
        map.addLayer(gl);
        map.on("click", function(e) {
          var radius = dom.byId("Radius").options[dom.byId("Radius").selectedIndex].value;
          var circle = new Circle({
            center: e.mapPoint,
            geodesic: domAttr.get(geodesic, "checked"),
            radius: radius,
            radiusUnit: "esriMiles"
          });
          var graphic = new Graphic(circle, symbol);
          gl.add(graphic);
        });
      });
    </script>
  </head>
  <body>
    <div id="map"></div>
    <div id="controls">
      <select id="Radius">
        <option selected="selected" value="5">5 Mile</option>
        <option value="10">10 Miles</option>
        <option value="20">20 Miles</option>
        <option value="30">30 Miles</option>
        <option value="40">40 Miles</option>
      </select>
      <input type="checkbox" id="geodesic">
      <label for="geodesic">Geodesic?</label>
    </div>
  </body>
</html>

ManjariGoyal · ‎11-12-2014

Thanks Robert.