Center And Zoom function using ArcGIS API for JavaScript?

Question

I'm trying to insert x, and y coordinates manually through input text, and center the map and zoom it to that point. I have this code:

var x = $("#x").val();
var y = $("#y").val();
var point=new esri.geometry.Point(x, y, map.spatialReference);
map.centerAndZoom(point,6);

When executing this code, it gives me a blank page. What's wrong? I also tried this code:

 map.graphics.clear();
 var xMin, yMin, xMax, yMax;
 var mp = new esri.geometry.Point;
 mp.x = $("#x").val();
 mp.y = $("#y").val();
 mp.spatialReference = map.spatialReference;
 var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CROSS, 30, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25]));
 var graphic = new esri.Graphic(mp, symbol);
 xMin = mp.x-1000;
 yMin = mp.y-1000;
 xMax = mp.x+1000; 
 yMax = mp.y+1000;
 var newExtent = new esri.geometry.Extent();
 newExtent.xmin = xMin;
 newExtent.ymin = yMin;
 newExtent.xmax = xMax;
 newExtent.ymax = yMax;
 newExtent.spatialReference = map.spatialReference;
 map.setExtent(newExtent);
 map.graphics.add(graphic);

Also does not work. Any help??

• john gravois: do the X and Y match the spatial reference of the map? sure they aren't transposed?
• Omar Taha: I'm not sure, but I tried different values for x and y, and the same happens, my spatial reference is 102100

Answer 1

I just finished doing something very similar so perhaps this will help you. I'm not using map.setExtent though (except as a fallback). Instead I'm using map.centerAndZoom. Right after I add the graphic, I have this bit of code. I'm thinking this may point you in the right direction (instead of maxZoom, you may be able to plug that zoom level 6 in?). One other difference is that I'm using a graphics layer ("esri/layers/GraphicsLayer") and adding the graphic to that instead of directly to map.graphics. Try adding this (after my comment line) after you add the graphic to the map.

EDIT: I do also have this line further up in the script.

var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
graphicsLayer = new GraphicsLayer(); 
graphicsLayer.add(graphic); 
map.addLayer(graphicsLayer);
// Add this bit of code after adding your graphic, 
if (graphic.geometry.type === 'point') { 
 maxZoom = map.getMaxZoom(); 
 map.centerAndZoom(graphic.geometry, maxZoom - 1); 
} else { 
 map.setExtent(graphicsUtils.graphicsExtent([graphic])); 
} // end if

EDIT: I took out the second else per your commment. I was doing this nested inside a second if block that tests for the presence of a comma in a string entered by a user (lat, long) and the first if is testing for the index of the ",". I don't know what else you would need to do because this is working for me.

• Omar Taha: Thanks jbchurchill for your answer, I tried your code, and still didn't work. In your answer, you have tow else blocks, for one if statement, I removed the second one, and tried the code, the same happens
• jbchurchill: Odd. This is working for me. If you look at the console, what kind of error(s) are you getting other than just seeing a white page? Are you sure your coordinates are valid? What do you get with console.log(mp.x)
• Omar Taha: Well, now it is working, I just added this line, mp = esri.geometry.geographicToWebMercator(mp); no errors were on the console

Answer 2

Want to improve this post? Provide detailed answers to this question, including citations and an explanation of why your answer is correct. Answers without enough detail may be edited or deleted.

 if (shape == "Point") {
 map.centerAndZoom(features[0].geometry, 18);
 }
 else if (shape == "Line") {
 var extent = esri.graphicsExtent(features);
 if (extent) {
 $scope.map.setExtent(extent)
 }
 }

• Oto Kaláb: Welcome to GIS.SE! While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.

Answer 3

It works for me:

package.json:

"esri-loader": "^2.14.0",
"angular2-draggable": "^2.3.2",

component:

 async initializeMap() {
 try {
 // Load the modules for the ArcGIS API for JavaScript
 const [EsriMap, EsriMapView, Graphic, GraphicsLayer, TextSymbol, Point] = await loadModules([
 "esri/Map",
 "esri/views/MapView",
 "esri/Graphic",
 "esri/layers/GraphicsLayer",
 "esri/symbols/TextSymbol",
 "esri/geometry/Point"
 ]);
 this.Point = Point;
 this.Graphic = Graphic;
 this.TextSymbol = TextSymbol;
 // Configure the Map
 const mapProperties: esri.MapProperties = {
 basemap: this._basemap
 };
 const map: esri.Map = new EsriMap(mapProperties);
 this.graphicsLayer = new GraphicsLayer();
 map.add(this.graphicsLayer);
 // Initialize the MapView
 const mapViewProperties: esri.MapViewProperties = {
 container: this.mapViewEl.nativeElement,
 center: this._center,
 zoom: this._zoom,
 map: map
 };
 this._view = new EsriMapView(mapViewProperties);
 await this._view.when();
 return this._view;
 } catch (error) {
 console.log("EsriLoader: ", error);
 }
 }
 setNewCenter(point: Point) {
 if (this._view && this._view.center) {
 this._view.center = new this.Point(point.latitude, point.longitude);
 this._view.zoom = 5;
 }
 }