3

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?

1
  • Don't use a MarkerSymbol. Use a polygon which represents a circle.
    – CaptDragon
    Dec 7, 2011 at 17:05

2 Answers 2

4

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>
2
  • 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, 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 anymore Jul 10, 2014 at 16:55
0

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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