Hi.
I have the same problem. Can someone help me? This my 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>Circle with Measure</title><link rel="stylesheet" href="https://js.arcgis.com/3.43/esri/css/esri.css"><style>html,body,#map {height: 100%;margin: 0;padding: 0;}</style><script src="https://js.arcgis.com/3.43/"></script><script>var map;
require(["esri/map","esri/graphic","esri/geometry/Circle","esri/geometry/Polyline","esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleFillSymbol","esri/symbols/SimpleLineSymbol","esri/symbols/TextSymbol","esri/symbols/Font","esri/Color","esri/geometry/geometryEngine","dojo/domReady!"],
function(Map,Graphic,Circle,Polyline,SimpleMarkerSymbol,SimpleFillSymbol,SimpleLineSymbol,TextSymbol,Font,Color,geometryEngine) {
map = new Map("map", {basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wdcenter: [-120.537, 46.592], // longitude, latitudezoom: 13});
var centerPt = null;var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([255,0,0]), 2),new Color([255,255,0,0.25]));var drawCircle = new Graphic(null, sfs, null, null);var sls = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]), 2)var radiusLine = new Graphic(null, sls, null, null);var font = new Font("20px", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLDER);var ts = new TextSymbol("");ts.setFont(font);ts.setColor(new Color([255,0,0]));ts.setOffset(0,20);var radiusText = new Graphic(null, ts, null, null);
//onDragStart, record the centerPtmap.on("mouse-drag-start", function(evt) {try{map.disablePan();map.disableMapNavigation();console.log("drag start. Pan: " + map.isPan + ". Navigation: " + map.isMapNavigation);map.graphics.add(drawCircle);map.graphics.add(radiusLine);map.graphics.add(radiusText);centerPt = evt;}catch(e){console.log(e);}});
//onDrag, calculate distance between currentPoint and centerPtmap.on("mouse-drag", function(evt) {console.log("drag. Pan: " + map.isPan);var pl = new Polyline(map.spatialReference);pl.addPath([centerPt.mapPoint, evt.mapPoint]);var radius = geometryEngine.geodesicLength(pl, "meters");var circle = new Circle({center: centerPt.mapPoint, radius: radius, geodesic: true, spatialReference: map.spatialReference});;drawCircle.setGeometry(circle);radiusLine.setGeometry(pl);ts.setText(radius.toFixed(1) + " meters" + ". Area: " + geometryEngine.geodesicArea(circle, "square-kilometers") + "km2");radiusText.setGeometry(centerPt.mapPoint);//console.log("radius is:" + radius);});
map.on("mouse-drag-end", function(evt) {try{map.enablePan();map.enableMapNavigation();console.log("drag end. Pan: " + map.isPan + ". Navigation: " + map.isMapNavigation);}catch(e){console.log(e);}});});</script></head>
<body><div id="map"></div></body>
</html>
In Firefox, don´t work as expected. In Chrome, OK.
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.