<!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>
Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
