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

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

  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;


Also does not work. Any help??

  • do the X and Y match the spatial reference of the map? sure they aren't transposed? Nov 13, 2014 at 0:38
  • I'm not sure, but I tried different values for x and y, and the same happens, my spatial reference is 102100
    – Omar Taha
    Nov 16, 2014 at 7:44

3 Answers 3


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();  

// Add this bit of code after adding your graphic, 
if (graphic.geometry.type === 'point') {  
    maxZoom = map.getMaxZoom();  
    map.centerAndZoom(graphic.geometry, maxZoom - 1);  
} else {  
} // 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.

  • 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
    – Omar Taha
    Nov 16, 2014 at 7:42
  • 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); Nov 17, 2014 at 13:52
  • Well, now it is working, I just added this line, mp = esri.geometry.geographicToWebMercator(mp); no errors were on the console
    – Omar Taha
    Nov 17, 2014 at 14:26
 if (shape == "Point") {
      map.centerAndZoom(features[0].geometry, 18);
 else if (shape == "Line") {
     var extent = esri.graphicsExtent(features);
     if (extent) {
  • 2
    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.
    – Oto Kaláb
    Feb 22, 2017 at 9:44

It works for me:


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


  async initializeMap() {
    try {
      // Load the modules for the ArcGIS API for JavaScript
      const [EsriMap, EsriMapView, Graphic, GraphicsLayer, TextSymbol, Point] = await loadModules([
      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();

      // 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;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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