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
<select id="Radius">
<option selected="selected">1 Mile</option>
<option>2 Miles</option>
<option>3 Miles</option>
<option>4 Miles</option>
<option>5 Miles</option>
</select>
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:
<select id="Radius">
<option selected="selected" value="1">1 Mile</option>
<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;
Robert,
It does make sense and I tried it again but still it's not creating a buffer/draw a circle of specified radius.
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>
Thanks Robert.