[GIS] Add point to center of polygon graphic in the Esri javascript api

arcgis-javascript-apijavascript

I’m using the ESRI JavaScript API 3.3 to develop an application. I am selecting parcels and adding a graphic for the selected polygon. What I would like to do is add a point marker to the center of the polygon graphic after the graphic is added. Does anyone know of a sample I could take a look at, or know how to quickly implement this functionality? I feel like I’m missing something simple.

Best Answer

Unless your parcel polygons are unusually shaped, you get get the center point of the extent of the parcel polygon and use that to draw your center graphic.

// in this example, the graphic variable is the graphic of the parcel you added to the map
var centerPoint;
switch (graphic.geometry.type) {
    case "point":
        // if the graphic is a point
        centerPoint = graphic.geometry;
        break;
    case "extent":
        // if the graphic is an extent
        centerPoint = graphic.getCenter();
    default:
        // if the graphic is a line or polygon, which for a parcel this will probably
        // be the case.
        centerPoint = graphic.getExtent().getCenter();
}
var centerGraphic = new esri.Graphic(centerPoint, centerSymbol);

...

Related Solutions

[GIS] Polyline insertPoint issue using ArcGIS API for JavaScript

The best way to make this work is to update your geometry and then set the geometry for your graphic. After a graphic's setGeometry method is called, the graphic will update.

If everything worked as it should, you would call insertPoint on your polyline and then pass your polyline to your graphic's setGeometry method. That being said, your use case uncovered a bug in insertPoint. The current implementation(version 2.6 of the API) won't let you insert a point on the end of a path. The best workaround is to use addPath. The code would look like this:

// add a polyline, line and lineGraphic are global
var p1 = esri.geometry.geographicToWebMercator(new esri.geometry.Point(-100, 40, map.spatialReference));
var p2 = esri.geometry.geographicToWebMercator(new esri.geometry.Point(-90, 40, map.spatialReference));
line = new esri.geometry.Polyline();
line.addPath([p1, p2]);
lineGraphic = map.graphics.add(new esri.Graphic(
  line,
  new esri.symbol.SimpleLineSymbol()
));
dojo.connect(map, "onClick", addPt);

And the body of the addPt function:

line.addPath([
  line.paths[pathCount-1][line.paths[pathCount-1].length-1], 
  [e.mapPoint.x, e.mapPoint.y]
]);
lineGraphic.setGeometry(line);

Here's a working example: http://jsfiddle.net/swingley/SntsN/ Click the map to extend the line. We will (hopefully) fix this bug in the next release of the API, which is 2.7.

ArcGIS API for JavaScript – Restricting Base Map on Specific Extent

Here is an example of one way to do this: http://jsfiddle.net/gh/gist/library/pure/6050806/

Best Answer

Related Solutions

[GIS] Polyline insertPoint issue using ArcGIS API for JavaScript

ArcGIS API for JavaScript – Restricting Base Map on Specific Extent

Related Question