I am trying to add a circle of a specified radius (let's say 200 meters) to a map. My thought is to create a SimpleMarkerSymbol object. The constructor asks for a size of the symbol in pixels, but I don't know what functions are available to convert distance to pixels.
E.g.,
var sizeInPixels = //how do convert 200 meters to pixels???
var circleSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE,
sizeInPixels,
new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new dojo.Color("#0"), 1),
new dojo.Color("#fff"));
Any insight?
-
Don't use a MarkerSymbol. Use a polygon which represents a circle.CaptDragon– CaptDragon2011年12月07日 17:05:09 +00:00Commented Dec 7, 2011 at 17:05
2 Answers 2
Typically, a circle marker symbol is used to symbolize a point, not an area.
When working in a projected coordinated system that uses meters, you can use the following to get the width of a pixel in meters:
var pxWidth = map.extent.getWidth() / map.width;
While the geometry service provides a more robust implementation, you can also draw circles client side with a center point and a radius. Here's a simple example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title></title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
<script>
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
var map, sym, radius = 1000000;
// radius is in meters since the map is in web mercator
function init() {
var ext = new esri.geometry.Extent({"xmin":-5042425,"ymin":3604239,"xmax":8048485,"ymax":8584264,"spatialReference":{"wkid":102100}});
map = new esri.Map("map",{ extent: ext });
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
map.addLayer(basemap);
sym = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([180, 0, 180, 0.25]));
dojo.connect(map, "onLoad", function() {
dojo.connect(dijit.byId("map"), "resize", map, map.resize);
dojo.connect(map, "onClick", addCircle);
});
}
function addCircle(e) {
console.log("clicked the map: ", e);
var pt, radius, circle, ring, pts, angle;
pt = e.mapPoint;
circle = new esri.geometry.Polygon(map.spatialReference);
ring = []; // point that make up the circle
pts = 40; // number of points on the circle
angle = 360 / pts; // used to compute points on the circle
for(var i = 1; i <= pts; i++) {
// convert angle to raidans
var radians = i * angle * Math.PI / 180;
// add point to the circle
ring.push([pt.x + radius * Math.cos(radians), pt.y + radius * Math.sin(radians)]);
}
ring.push(ring[0]); // start point needs to == end point
circle.addRing(ring);
map.graphics.add(new esri.Graphic(circle, sym));
console.log("added a graphic");
}
dojo.ready(init);
</script>
</head>
<body class="tundra">
<div data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline',gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="map"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'center'">
<div id="feedback">
Click the map to add circles.
</div>
</div>
</div>
</body>
</html>
answered Dec 6, 2011 at 23:00
-
Hello Derek Swingley, I followed the codes you provided above but the circle just wont show on the map. So you have any ideas?20 Cents– 20 Cents2014年07月09日 13:35:09 +00:00Commented Jul 9, 2014 at 13:35
-
@20Cents use this: developers.arcgis.com/javascript/jssamples/… which was recently added to the API, no need to build circles by hand anymoreDerek Swingley– Derek Swingley2014年07月10日 16:55:47 +00:00Commented Jul 10, 2014 at 16:55
Taken from the source data:
This will create a buffer of 100m and 200m on the ESRI base map with the ArcGIS Javascript API
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Buffer</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/claro/claro.css">
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.6" type="text/javascript"></script>
<script type="text/javascript">
dojo.require("esri.map");
dojo.require("esri.tasks.geometry");
var map = null;
var gsvc = null;
function initialize() {
map = new esri.Map("map");
var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
map.addLayer(layer);
map.setExtent(esri.geometry.geographicToWebMercator(new esri.geometry.Extent(-97.76, 32.32, -96.11, 33.42, new esri.SpatialReference({wkid: 4326}))));
gsvc = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
dojo.connect(map, "onClick", doBuffer);
}
function doBuffer(evt) {
map.graphics.clear();
var params = new esri.tasks.BufferParameters();
params.geometries = [ evt.mapPoint ];
//buffer in linear units such as meters, km, miles etc.
params.distances = [ 0.1, 0.2 ];
params.unit = esri.tasks.GeometryService.UNIT_KILOMETER;
params.outSpatialReference = map.spatialReference;
gsvc.buffer(params, showBuffer);
}
function showBuffer(geometries) {
var symbol = new esri.symbol.SimpleFillSymbol(
esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new esri.symbol.SimpleLineSymbol(
esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new dojo.Color([0,0,255,0.65]), 2
),
new dojo.Color([0,0,255,0.35])
);
dojo.forEach(geometries, function(geometry) {
var graphic = new esri.Graphic(geometry,symbol);
map.graphics.add(graphic);
});
}
dojo.addOnLoad(initialize);
</script>
</head>
<body class="claro">
<b>Click a location on the map to buffer. Click again on another location to buffer again.</b>
<div id="map" style="width:600px; height:400px; border:1px solid #000;"></div>
</body>
</html>
Note: This uses http://serverapi.arcgisonline.com/jsap =2.6
Source: http://help.arcgis.com/en/webapi/javascript/arcgis/demos/util/util_buffer.html
answered Dec 6, 2011 at 22:30
lang-js