zoom to extent which crosses 180

[JohnCartwright]

Hello All,

I'm using the web mercator projection and wrapAround180 option to provide seamless panning across the antimeridian.  I would like to set the extent of the map to an area which in geographic coordinates would cross the antimeridian, e.g.


var bbox = new esri.geometry.Extent(175.0,15.0,-175.0,25.0, new esri.SpatialReference({ wkid:4326 }));
map.setExtent(esri.geometry.geographicToWebMercator(bbox),true);

However this does not work, centering instead on central Africa and setting the zoom level to the maximum.

Can someone please suggest the appropriate way to do this?

Thanks!

--john

[BrettLord-Castillo]

Try using an object with explicitly property declarions.
var bbox = new esri.geometry.Extent(175.0,15.0,-175.0,25.0, new esri.SpatialReference({ wkid:4326 }));

var bbox = new esri.geometry.Extent({
 "xmin": 175.0,
 "ymin": 15.0,
 "xmax": -175.0,
 "ymax": 25.0,
 "spatialReference": {
  "wkid": 4326
 }
});

If that does not work, considering using map.centerAndZoom() instead of map.setExtent() to set your location.

[KellyHutchins]

John,

Try using esri.geometry.normalizeCentralMeridian) to normalize the geometry before setting the extent. Here's a blurb from the help that explains what normailzeCentralMeridian does:

Normalizes geometries that intersect the central meridian or fall outside the world extent so they stay within the current coordinate system. Only supported for Web Mercator and geographic coordinates. (As of v2.2)

Hello All,

I'm using the web mercator projection and wrapAround180 option to provide seamless panning across the antimeridian.  I would like to set the extent of the map to an area which in geographic coordinates would cross the antimeridian, e.g.


var bbox = new esri.geometry.Extent(175.0,15.0,-175.0,25.0, new esri.SpatialReference({ wkid:4326 }));
map.setExtent(esri.geometry.geographicToWebMercator(bbox),true);

However this does not work, centering instead on central Africa and setting the zoom level to the maximum.

Can someone please suggest the appropriate way to do this?

Thanks!

--john

[JianHuang]

John,

Please try the case with xmax greater than 180.
var bbox = new esri.geometry.Extent({"xmin": 175.0, "ymin": 15.0, "xmax": 185.0, "ymax": 25.0, "spatialReference": {"wkid": 4326}});
Thanks.

[JohnCartwright]

Thanks to all for the suggestions.  Unfortunately, none of them seemed to work for me, but perhaps I misunderstood.  I tried normalizing the geometry both before and after the conversion from geographic to web mercator.  Normalizing the geographic geometry produces a 2-ring polygon as you'd expect but then projecting it and passing to centerAndZoom does work correctly either.

Abandoning centerAndZoom in favor as Brett suggested works but the center point is incorrectly calculated by getCenter in this case.

--john

//fake coords to avoid discontinuity - doesn't seem to help
//        var bbox = new esri.geometry.Extent({xmin:175.0,ymin:-5.0,xmax:185.0,ymax:5.0, spatialReference:{ wkid:4326 }});
        var bbox = new esri.geometry.Extent({xmin:175.0,ymin:-5.0,xmax:-175.0,ymax:5.0, spatialReference:{ wkid:4326 }});
        var merc = esri.geometry.geographicToWebMercator(bbox);

        esri.geometry.normalizeCentralMeridian([merc], 'http://maps.ngdc.noaa.gov/rest/services/Geometry/GeometryServer',
                function(geometries){
                     map.centerAndZoom(geometries[0],true);
                },
                function() {
                    console.log("error normalizing");
                });

var bbox = new esri.geometry.Extent({xmin:175.0,ymin:-5.0,xmax:-175.0,ymax:5.0, spatialReference:{ wkid:4326 }});
esri.geometry.normalizeCentralMeridian([bbox], 'http://maps.ngdc.noaa.gov/rest/services/Geometry/GeometryServer',
                function(geometries){
                    var merc = esri.geometry.geographicToWebMercator(geometries[0]);
                     map.centerAndZoom(merc,true);
                },
                function() {
                    console.log("error normalizing");
                });