CODEWITHSUNDEEP
arcgis-js-api
Andy
Andy

Reputation: 3799

How do I add graphics to Map in a projected coordinate system other than Web Mercator?

I am trying to draw a cross at London in a map. The code works if I specify the coordinates of the point in either geographic or web mercator. However it does not work if I specify the coordinates in ED50 / UTM zone 31N. According to the documentation the Point constructor takes the spatial reference as the last argument. I would think that this would mean that the point would be transformed to the coordinate system of the map (web mercator)? However the point now appears somewhere in the middle of France. Not sure what is happening here?

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>London Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
    <style>
        html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="https://js.arcgis.com/3.17/"></script>
    <script>
      var map;

      require(["esri/map", "esri/geometry/Point", "esri/SpatialReference", "esri/graphic", "dojo/domReady!"], function (Map, Point, SpatialReference, Graphic) {
        map = new Map("map", {
          basemap: "topo",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
          center: [0.1, 51.5], // longitude, latitude
          zoom: 8
        });
        map.on("load", function () {
            //var P = new Point({ "x": 0.1, "y": 51.5, "spatialReference": { "wkid": 4326 } });       // geographic: works!
            //var P = new Point({ "x": -10978, "y": 6708911, "spatialReference": { "wkid": 102100 } }); // web mercator: works! 
            //var P = new Point({ "x": 284879, "y": 5711864, "spatialReference": { "wkid": 23031 } }); // somewhere in the middle of France !!??
            var P = new Point([284879, 5711864], new SpatialReference({ wkid: 23031 }));             // somewhere in the middle of France !!??
            var pointSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_X, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 0]), 2), new dojo.Color([0, 255, 0, 0.25]));
            var mapPointGraphic = new Graphic(P, pointSymbol);
            map.graphics.add(mapPointGraphic);
        });
      });
    </script>
</head>

<body>
    <div id="map"></div>
</body>
</html>

Upvotes: 0

Views: 528

Answers (1)

T Kambi
T Kambi

Reputation: 1387

ESRI JavaScript API, does not have any client side projection api, except between WebMercator(102100,102113,3875) and WGS84(4326). For these it uses esri/geometry/webMercatorUtils module for convert the spatial reference. For all other projection systems you need to use GeometryService to project. Below is a sample code for the same.

require(["dojo/_base/array", "esri/tasks/GeometryService", "esri/tasks/ProjectParameters", "esri/SpatialReference"], function(GeometryService, ProjectParameters, array) {

    var gsvc = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

    var P = new Point([284879, 5711864], new SpatialReference({ wkid: 23031 }));
    var outSR = new SpatialReference({wkid:102110});

    var params = new ProjectParameters();
    params.geometries = [P];
    params.outSR = outSR;
    params.transformation = transformation;
    gsvc.project(params, function(projectedGeometries){
        P = projectedGeometries[0];
    });

});

Upvotes: 1

Related Questions