How to center map after extent is declared - JavaScript API

[DavidLetz]

Hello, I have a basemap zoomed into Harris County, Texas with the following code:

        function init() {


            var initialExtent = new esri.geometry.Extent({

                "xmin": -10679597.979853602,
                "ymin": 3465380.1480138917,
                "xmax": -10557604.482710624,
                "ymax": 3504286.5954109943,
                "spatialReference": {
                    "wkid": 102100
                }
            });

            map = new esri.Map("map", { extent: initialExtent });

            //Base Map Layer
            var baseMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
            map.addLayer(baseMapLayer);


However, the map is not exactly centered where I want it. I know there is a method named centerAt(point) that will do this, but whenever i try using it by supplying the lat/lon of my center point in that method, I end up on the other side of the world, or no map at all--I suspect it defaults to (0,0) off of the west coast of Africa.

            //TRY TO CENTER THE MAP USING THE LAT/LON
           // var mygeo = esri.geometry.geographicToWebMercator(new esri.geometry.Point(29.818008, -95.423178, new esri.SpatialReference({ wkid: 102100 })));
            var mylat = 29.818008;
            var mylong = -95.423178;

            var CenPoint = new esri.geometry.Point({ "x": mylat, "y": mylong, " spatialReference": { " wkid": 102100 } });


            map = new esri.Map("map", {
                extent: initialExtent,
                infoWindow: popup
            });

            map.centerAt(CenPoint);

Can yiou tell me what i am doing wrong/

Many thanks for your help.

[derekswingley1]

When using geographicToWebMercator, the point you pass in needs a geographic spatial reference. In your example, you're using web mercator as the spatial reference.

Try this:

var mylat = 29.818008;
var mylong = -95.423178;
var CenPoint = new esri.geometry.Point({ "x": mylat, "y": mylong, " spatialReference": { " wkid": 4326 } });

var mercator = esri.geometry.geographicToWebMercator(CenPoint);
map.centerAt(mercator);

[DavidLetz]

Thanks for the reply!!

I tried your code, and at least I am not in the Atlantic Ocean anymore, but the map did not "center" with the centering code in place. Please see below. I had to put the center reference in the map constructor in order to return the map. do you see any obvious erros on my part?

var mylat = 29.452752;
var mylong = -95.424705;
var CenPoint = new esri.geometry.Point({ "x": mylat, "y": mylong, " spatialReference": { " wkid": 4326 } });

var mercator = esri.geometry.geographicToWebMercator(CenPoint);


map = new esri.Map("map", {
extent: initialExtent,
  centerAt: (mercator), infoWindow: popup
});

[TracySchloss]

I've had better luck modifying the xmin,xmax of the initial extent.  When using the ESRI tiled base maps, it's not exact; you're always going to be tied to whatever scale is the nearest to the extent you specify.

[DavidLetz]

I've had better luck modifying the xmin,xmax of the initial extent.  When using the ESRI tiled base maps, it's not exact; you're always going to be tied to whatever scale is the nearest to the extent you specify.

What is the most expedient way to change the extent? Using Firebug?

[KenMorefield]

I like to use this old ESRI sample to help me when trying to set the initial extent in my apps... It works pretty well...

Sample

Ken

[DavidLetz]

I like to use this old ESRI sample to help me when trying to set the initial extent in my apps... It works pretty well...

Sample

Ken

That is a really cool tool, thanks!!!