Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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?

share|improve this question
    
Don't use a MarkerSymbol. Use a polygon which represents a circle. –  CaptDragon Dec 7 '11 at 17:05

2 Answers 2

up vote 2 down vote accepted

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/2.5/js/dojo/dijit/themes/tundra/tundra.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{ margin: 0; padding: 0; }
      #controls, #feedback {
        position: absolute;
        height: 80px;
        font-family: arial;
        bottom: 10px;
        margin: 5px;
        padding: 5px;
        z-index: 40;
        background: #fff;
        color: #444;
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px #888;
        box-shadow: 0 0 5px #888;
      }
      #controls {
        width: 440px;
        left: 10px;
      }
      #feedback {
        width: 200px;
        right: 10px;
      }
      h3 { margin: 0 0 5px 0; border-bottom: 1px solid #444; }
      .label { display: inline-block; width: 140px; }
    </style>
    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="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>
share|improve this answer
    
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 Jul 9 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 anymore –  Derek Swingley Jul 10 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

share|improve this answer
    
Hello Mapperz, allow me to ask you some question. By following the codes you provided, it throws me an error message which is esri.config.defaults.io.proxyUrl is not set. Do you have any ideas? –  20 Cents Jul 9 at 13:26

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.