Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Create circles
Explore in the sandbox
Open in CodePen
View live sample
Description
Create geodesic or planar circles using the esri/geometry/Circle module (added at version 3.8 of the JS API).Code
<!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>Create circles</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/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="https://js.arcgis.com/3.46/"></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: "topo-vector",
center: [-120.741, 56.39],
slider: false,
zoom: 5
});
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 = map.extent.getWidth() / 10;
var circle = new Circle({
center: e.mapPoint,
geodesic: domAttr.get(geodesic, "checked"),
radius: radius
});
var graphic = new Graphic(circle, symbol);
gl.add(graphic);
});
});
</script>
</head>
<body>
<div id="map"></div>
<div id="controls">
<div>Click the map.</div>
<input type="checkbox" id="geodesic">
<label for="geodesic">Geodesic?</label>
</div>
</body>
</html>