The usual code to create a map, and set its extent is as follows:
var ext = new esri.geometry.Extent({ "xmin": -8869000, "ymin": 5689000, "xmax": -7303000, "ymax": 6639000, "spatialReference": { "wkid": 102100 } }); var popup = new esri.dijit.Popup(null, dojo.create("div")); app.map = new esri.Map("map", { "extent": ext, "infoWindow": popup, "slider": false }); var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer"); app.map.addLayer(basemap);
The above code will create a map , and set its extent to Quebec city, in Canada.
For me, I had a huge script that I wanted to refactor and make it look better.
One idea was to take out the code that set the extent and layers to Quebec, and have the code in its own class. And will be cool to inherit that class from esri.map.
So, I will have a class "quebecMap", which when I create it , will create esri.map, with extent and layers match Quebec map.
So the code was like that
dojo.declare("quebecMap", esri.Map, {
constructor: function (divId) {
this.extent = new esri.geometry.Extent({
"xmin": -8869000,
"ymin": 5689000,
"xmax": -7303000,
"ymax": 6639000,
"spatialReference": {
"wkid": 102100
}
});
this.infoWindow = new esri.dijit.Popup(null, dojo.create("div"));
this.slider = false;
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer");
this.addLayer(basemap);
}
});
The above code defined a class called "quebecMap" , which will create esri.map that setup to show Quebec data.
Then to use it, just write the following code:
var mapObject = new quebecMap("mapDiv");
/* where mapDiv is the html DIV's id that will contains the map */
cool, isn't it?