topic Re: How to change the radius of the circle around the marker using javascript Arcgis? in ArcGIS JavaScript Maps SDK Questions

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

ManjariGoyal — Wed, 12 Nov 2014 16:42:40 GMT

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>

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

RobertScheitlin__GISP — Wed, 12 Nov 2014 16:52:54 GMT

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;

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

ManjariGoyal — Wed, 12 Nov 2014 17:20:50 GMT

Robert,

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

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

RobertScheitlin__GISP — Wed, 12 Nov 2014 17:33:07 GMT

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>

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

ManjariGoyal — Wed, 12 Nov 2014 18:01:58 GMT

Thanks Robert.