<!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.8/js/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.8/"></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, Grahpic, 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 = map.extent.getWidth() / 10; var circle = new Circle({ center: e.mapPoint, geodesic: domAttr.get(geodesic, "checked"), radius: radius }); var graphic = new Grahpic(circle, symbol); gl.add(graphic); map.centerAt(graphic.geometry.center); }); }); </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>
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
