Changing map projection and adding graphic features in projected coordinate system using ArcGIS API for JavaScript?

Question

I'm having some problems with the ArcGIS API for JavaScript.

I have a web service that traces an electric network and sends back JSON with point and polyline (path) geometry.

I've created a function to loop through the returned features and get an XY for each one.

This service sends the XY in the projected coordinate system that the data is in, which is a NAD 1983 state plane feet.

Right now I have a sample of the returned JSON in an external js file with a variable called result assigned to it.

Here's the code:

var map_extent = new Extent(7300100.788, 545856.679, 7308850.788, 551134.457, new SpatialReference({ wkid:102726 }));

    map = new Map("mapDiv", {
      basemap: "streets",
      extent: map_extent
    });

    map.on("load", function() {
        total_objects = Object.keys(result.results).length;

        for (object = 0; object < total_objects; object++) {
            total_features = Object.keys(result.results[object].features).length;

            for (feature = 0; feature < total_features; feature++) {
                var x_coord = result.results[object].features[feature].geometry.x;
                var y_coord = result.results[object].features[feature].geometry.y;

                var pt = new Point([x_coord, y_coord], new SpatialReference({ wkid:102726 }));
                var sms = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_SQUARE).setSize("10").setColor(new Color("green"));
                var graphic = new Graphic(pt, sms);
                map.graphics.add(graphic);
            }
        }
    });

The extent doesn't seem to be working. It's just zoomed way out from where it should be. The features are being added to the map, but they are to the east of Africa- they should be in Oregon.

What am I doing wrong?

Answer 1

The map object will take on the projection of the first layer you add to it, in the case of your code, the streets basemap is 102100 (web mercator). You have two options to solve this:

1. Use your own basemap service that is in your 102726 projection so that the points from the web service show up in the correct place.
2. Stick with arcgis online basemaps, which are all 102100, and project the points from the service to 102100. There are two ways to achieve this. The first is to change the code in your web service to return coordinates in 102100. The second would be to use the geometry service to project the points to 102100 on the client. Here is a link to the project method you would use: https://developers.arcgis.com/javascript/jsapi/geometryservice-amd.html#project