Esri Map Zoom to Certain Point

Question

I was having some problem when trying to set the map to zoom to certain point. Here is how I set up my map using Esri base map with a OneMap 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","esri/tasks/ProjectParameters",
            "dojo/domReady!"
        ],
        function 
        (
            Map, domConstruct, Point,
            SimpleMarkerSymbol, SimpleLineSymbol,
            Graphic, Color,ProjectParameters
        ) {
            map = Map("map-canvas",
            {
            });
            map.setZoom(0);
            coreFunctions();
        });
    // Get current location
    map.on("load", getCurrentLoc);
}
dojo.ready(init);
gsvc = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
}

And I added an overlay:

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

And my method to set the map to zoom to certain point:

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) {

    esriConfig.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
    var loc = new esri.geometry.Point({ "x": data.SearchResults[1].X, "y": data.SearchResults[1].Y, "spatialReference": { "wkid": 3414 } });           

    var params = new esri.tasks.ProjectParameters();
    params.geometries = [loc.geometry];
    params.outSR = map.spatialReference;
    esri.config.defaults.geometryService.project(params, function (loc) {
        map.centerAndZoom(loc[0],12);
    });

    });
}

So far I know to zoom the map to certain level using setZoom but I have no idea how to zoom it to certain point. Any ideas?

Thanks in advance.

I'm sorry but no. I'm Android developer. I just read your question. But I share your issue to my friend maybe he will give you some help. — Konrad Krakowiak, Jan 11 '15 at 14:46
@KonradKrakowiak Okay sure, did your friend know how to do it? — QWERTY, Jan 11 '15 at 15:13
@KonradKrakowiak Hello but your friend's answer are causing some error message. Can you help me to get him to explain more on the answer he provided? — QWERTY, Jan 12 '15 at 01:49

dlimos · Answer 1 · 2015-01-13T14:35:03.953

1

The correct way is to use the centerAndZoom(mapPoint, levelOrFactor) as Sebastian suggested. The error you get is about the fact that the spatial reference of the geometry is not the same as the spatial reference of your map. So just call a geometry service to covert the geometry first.

https://developers.arcgis.com/javascript/jsapi/geometryservice-amd.html#project

                  require([
                        "esri/tasks/ProjectParameters"
                    ], function (ProjectParameters) {
                        var params = new ProjectParameters();
                        params.geometries = [loc.geometry];
                        params.outSR = map.spatialReference;

                       // params.transformation = transformation;

                            esri.config.defaults.geometryService.project(params, function (projectedPoints) {

                                map.centerAndZoom(projectedPoints[0],levelofyourchoice);

                            });
                    });

transformation is not needed if you don't have a datum transformation.

Check here: https://developers.arcgis.com/javascript/jsapi/projectparameters-amd.html#transformation

Add this to instantiate your geometry service:

require(["esri/tasks/GeometryService"], function(GeometryService) {   esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");});

edited Jan 13 '15 at 14:35

answered Jan 12 '15 at 09:21

dlimos

91
5

What does the graph variable do? Also, how should I implement the solutions you provided into my zoomToPostal() function? Because I only zoom based on user input but not when the map first load :( – QWERTY Jan 13 '15 at 04:26
When I tried to implement your solutions, I am gett point and choce is not defined error message – QWERTY Jan 13 '15 at 04:35
i removed the var graph. Yes you can implement it in the zoomPostal () function. Just copy it all and replace the "levelofyourchoice" with a number. Remember to create the geometryService. Check the link and the esri help for details. – dlimos Jan 13 '15 at 09:36
@dilmos But what is the point and choice? Any declaration for both of these variables? Because when I tried to run, I am getting point and choice undefined – QWERTY Jan 13 '15 at 12:14
@dilmos I mean the point.geometry and choice.transformation. What are them for? – QWERTY Jan 13 '15 at 12:30
point is the point where you want to pan and zoom ( loc in your case) and choice was a typo, sorry. I edited the answer – dlimos Jan 13 '15 at 13:08
But with the answer you suggested, I am getting error message: Uncaught TypeError: Cannot call method 'project' of null. Any ideas? – QWERTY Jan 13 '15 at 13:23
As I said, you need to instantiate your geometry service. – dlimos Jan 13 '15 at 14:34
I see. But I am getting another error message after instantiate the geometry service. The error message is: Uncaught TypeError: Cannot call method 'toJson' of undefined at init.js: 274. Any ideas? – QWERTY Jan 13 '15 at 14:48
edit your question reposting a complete updated sample otherwise is really difficult to help you – dlimos Jan 13 '15 at 14:57
I've updated the init() and zoomPostal() according to your suggestions. Help me take a look when you free. Thanks :) – QWERTY Jan 13 '15 at 15:08
you are instantiating it twice, one in setMap and after in postal code. Just do it once inside init. Put this: esriConfig.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); in init() – dlimos Jan 13 '15 at 16:03
Nope, it does not work. Still the same error message which is Uncaught TypeError: Cannot call method 'toJson' of undefined at init.js: 274 – QWERTY Jan 14 '15 at 00:54
Do you have a single html page? In that case post it all. I can't understand where the error is otherwise.... or create a jsfiddle... – dlimos Jan 14 '15 at 08:57
Nevermind, I figured out how already. Thanks for the helps :) – QWERTY Jan 14 '15 at 12:11

score -1 · Answer 2 · answered Dec 30 '16 at 10:25

Maybe is too late for the answer, but I found the apropriate way to do this:

var point = yourPoint;
var offset = 5; // choose your offset for displaying your point
map.setExtent(new esri.geometry.Extent(point.x - offset, point.y - offset, point.x + offset, point.y + offset, new esri.SpatialReference(map.spatialReference));
map.centerAt(point) // it's kind of useless

Esri Map Zoom to Certain Point

2 Answers2