Setting initial extent in Configurable Map Viewer (CMV) via ArcGIS API for JavaScript API?

Question

I've been playing around with the Configurable Map Viewer (CMV) and would like to set a custom initial extent.

I was thinking I could replace

center:[-96.59179687497497,39.09596293629694]

with

extent: ({xmin:-123.45,ymin:123.45,xmax:123.45,ymax:123.45,spatialReference:{"wkid":102100}})

in viewer.js but either I'm missing something entirely or I'm not doing something quite right.

Could anyone provide an example of setting a custom initial extent in CMV?

Answer 1

The ArcGIS JavaScript API, will allow the map center to be like you show but to use an extent, you need to do it a little differently. Here's how you can set a custom extent:

First ensure that the esri Extent module is included at the top of your config/viewer file. If you are using the demo configuration that comes with CMV, then it is already there. If not, you will need to add it. The first few lines will look something like this:

define([ 'esri/units', 'esri/geometry/Extent', 'esri/config', 'esri/tasks/GeometryService', 'esri/layers/ImageParameters' ], function(units, Extent, esriConfig, GeometryService, ImageParameters) {

then the extent for your mapOptions would look something like this:

extent: new Extent({ xmin: -106.5918, ymin: 28.0959, xmax: -86.5918, ymax: 48.0959, spatialReference: { wkid: 4326 } }),

The extent above is around the center of the CMV demo map at the same zoom level as the demo. The coordinates and the spatialReference wkid you use in the extent would be different depending on the basemap (ArcGIS Online or a MapService from an ArcGIS Server) you use.

Answer 2

You have to pass in an esri/geometry/Extent object:

extent: new Extent({xmin:-123.45,ymin:123.45,xmax:123.45,ymax:123.45,spatialReference:{"wkid":102100}})

center just happens to take an array as parameter :)

Answer 3

I am using the demo configuration.

I had been trying:

extent: new Extent({ 
    xmin: -106.5918, 
    ymin: 28.0959, 
    xmax: -86.5918, 
    ymax: 48.0959, 
    spatialReference: { wkid: 4326 } }),

It was throwing "0x800a1391 - JavaScript runtime error: 'Extent' is undefined."

In the demo configuration I had overlooked:

define([
    "esri/units", 
    "esri/geometry/Extent", 
    "esri/config", 
    "esri/tasks/GeometryService", 
    "esri/layers/ImageParameters"
], function (a, b, c, d, e) {

Ahhhhhh:

extent: new b({ 
        xmin: -106.5918, 
        ymin: 28.0959, 
        xmax: -86.5918, 
        ymax: 48.0959, 
        spatialReference: { wkid: 4326 } }),

Thanks for getting me back on track.