[GIS] Map Spatial Reference

arcgis-javascript-apiarcgis-online-basemapscoordinate system

I was having some trouble when trying to zoom to certain point in ESRI base map. So basically I got an ESRI base map and added a map overlay on top of it:

function setMap() {
function init() {
    require(
        [
            "esri/map",
            "dojo/dom-construct",
            "esri/geometry/Point", 
            "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
            "esri/graphic", "esri/Color",
            "dojo/domReady!"
        ],
        function 
        (
            Map, domConstruct, Point,
            SimpleMarkerSymbol, SimpleLineSymbol,
            Graphic, Color
        ) {
            map = Map("map-canvas",
            {
            });
            map.setZoom(0);
            coreFunctions();
        });
}
dojo.ready(init);
gsvc = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
}

Here is the part for me to add map overlay with wkid:3414:

function addLayersToData() {
var layer = new esri.layers.ArcGISTiledMapServiceLayer("https://www.onemap.sg/ArcGIS/rest/services/BASEMAP/MapServer");
mapLayers.push(layer);

}

And then I got a function to zoom to certain point of the map:

function zoomPostal(postalCode) {
 $.getJSON("http://www.onemap.sg/API/services.svc/basicSearch?token=qo/s2TnSUmfLz+32CvLC4RMVkzEFYjxqyti1KhByvEacEdMWBpCuSSQ+IFRT84QjGPBCuz/cBom8PfSm3GjEsGc8PkdEEOEr&searchVal="
                        + postalCode
                        + "&otptFlds=SEARCHVAL,CATEGORY&returnGeom=0&rset=1", function (data) {

    var loc = new esri.geometry.Point({ "x": data.SearchResults[1].X, "y": data.SearchResults[1].Y, "spatialReference": { "wkid": 3414 } });           
    console.log(data.SearchResults[1].X);   
    console.log(data.SearchResults[1].Y);
    map.centerAndZoom(loc,1);
    });
}

When I print out the X and Y, I am getting: 23948.7465,47505.7986. And I am getting these error message after I tried to zoom to certain point:

Map: Geometry (wkid: 3414) cannot be converted to spatial reference of the map (wkid: PROJCS["SVY21",GEOGCS["SVY21[WGS84]",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137.0,298.257223563]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],PROJECTION["Transverse_Mercator"],PARAMETER["False_Easting",28001.642],PARAMETER["False_Northing",38744.572],PARAMETER["Central_Meridian",103.8333333333333],PARAMETER["Scale_Factor",1.0],PARAMETER["Latitude_Of_Origin",1.366666666666667],UNIT["Meter",1.0]]) 

I have no idea how to solve this. Any ideas?

Basically if I added these code to see the conversion of the coordinate by plotting a marker, it works as in the marker did shows up. Just that I cannot zoom to that point:

var mrtIcon = [];
    var symbol = new esri.symbol.PictureMarkerSymbol('img/transportation/mrt_marker.PNG', 30, 30);
    var PointGraphic = new esri.Graphic(loc, symbol);
    map.graphics.add(PointGraphic);

    var graphic = PointGraphic;
    graphic.setSymbol(symbol);
    mrtIcon.push(map.graphics.add(graphic));
    map.centerAt(loc);

EDIT

var x =  data.SearchResults[1].X;
     console.log(x);
     var y =  data.SearchResults[1].Y;
     console.log(y);
    var loc = new esri.geometry.Point({ 
        "x": x, 
        "y": y, 
        "spatialReference":'PROJCS["SVY21",GEOGCS["SVY21[WGS84]",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137.0,298.257223563]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],PROJECTION["Transverse_Mercator"],PARAMETER["False_Easting",28001.642],PARAMETER["False_Northing",38744.572],PARAMETER["Central_Meridian",103.8333333333333],PARAMETER["Scale_Factor",1.0],PARAMETER["Latitude_Of_Origin",1.366666666666667],UNIT["Meter",1.0]]' });           

    map.centerAndZoom(loc, 5);

So I got variable x and y which hold the same value as your hardcoded x and y coordinates. It does not work if I put it this way, it only work when I hardcoded the x and y with coordinates like your solutions. Any ideas?

Best Answer

@Michael Miles-Stimson was on track w/ his first comment.

since your ArcGIS Tiled Map Service defines its own projection using WKT (as opposed to WKID), you need to use an identical projection definition in your code to indicate to the JSAPI that the point you are passing is in the same coordinate system as the map.

check out a working jsbin here

another alternative would be to republish the map service, making sure to define the projection as explicitly wkid:3414.

edit: from the jsbin i linked above:

var point = new Point({
  "x": 23948.7465,
  "y": 47505.7986, 
  "spatialReference":'PROJCS["SVY21",GEOGCS["SVY21[WGS84]",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137.0,298.257223563]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],PROJECTION["Transverse_Mercator"],PARAMETER["False_Easting",28001.642],PARAMETER["False_Northing",38744.572],PARAMETER["Central_Meridian",103.8333333333333],PARAMETER["Scale_Factor",1.0],PARAMETER["Latitude_Of_Origin",1.366666666666667],UNIT["Meter",1.0]]'
});