1

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?

  • Do you need to supply a geotransformation to project from SVY21 to EPSG:3414? I'm not familiar with either... Just because they are the same doesn't mean they are the same: one is as WKT the other is EPSG - the software may not see them as being the same. Can you force your overlay to use the EPSG (Factory Code) rather than Well Known Text? – Michael Stimson Jan 12 '15 at 0:39
  • @MichaelMiles-Stimson Sorry but I don't get what you mean. Would you mind to provide me with some examples? Because so far when I plot markers using this method, it's working perfectly. Just that when I tried to zoom to the point on the map, then I will get this error message. – 20 Cents Jan 12 '15 at 1:46
  • @PolyGeo Hello PolyGeo, any ideas to fix this? I have no problem on plotting the markers using this method. The error message only appear when I tried to zoom to certain point on the map – 20 Cents Jan 12 '15 at 1:47
  • 1
    I don't program with the ArcGIS API for JavaScript so I cannot help personally. However I have just retagged it to try and throw your question into the path of those that follow the arcgis-javascript-api tag. – PolyGeo Jan 12 '15 at 1:52
  • @MichaelMiles-Stimson I've edited my code to see if the conversion went well by plotting a marker with that coordinate. The marker did shows up but I just can't zoom to that point on the map – 20 Cents Jan 12 '15 at 2:02
3

@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]]'
});
| improve this answer | |
  • So basically what should I changed for the zoomToPostal function? I am a little bit confused. – 20 Cents Jan 13 '15 at 3:58
  • i've updated my answer to include a code snippet from the example application i included initially. hope it helps. – john gravois Jan 14 '15 at 5:08
  • How come it only works when I hardcode the coordinates x and y like yours? It does not work if I replace the coordinate x to data.SearchResults[1].X; It told me Error: Invalid value for <image> attribute x="NaN" but then when I print it out, it did shows the exact coordinates as your x – 20 Cents Jan 14 '15 at 9:57
  • Check my edited portion, sorry for the poor explanation above :( – 20 Cents Jan 14 '15 at 10:22
0

when your map is being drawn with a spatialReference based by yourself, you need to create a point object (with the same spatialReference) and pass the point as the center in the map constructor. as the following:

var point = new Point({
    "x": 575442.9940072033,
    "y": 383796.1914205253, 
    "spatialReference":'PROJCS["BJ-city",GEOGCS["GCS_Beijing_1954",DATUM["D_Beijing_1954",SPHEROID["Krasovsky_1940",6378245.0,298.3]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],PROJECTION["Transverse_Mercator"],PARAMETER["False_Easting",500000.0],PARAMETER["False_Northing",300000.0],PARAMETER["Central_Meridian",116.3502518],PARAMETER["Scale_Factor",1.0],PARAMETER["Latitude_Of_Origin",39.86576603],UNIT["Meter",1.0]]'
});
map.centerAndZoom(point,5);  
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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