This is my first post related to ESRI JavaScript API to build map-based web applications.
So, I am learning to use ArcGIS JavaScript API to build a map based application.
The create a basic map and set its extent, you usually write this code:
var ext = new esri.geometry.Extent({
"xmin": -8869000,
"ymin": 5689000,
"xmax": -7303000,
"ymax": 6639000,
"spatialReference": {
"wkid": 102100
}
});

var map = new esri.Map("map", {
"extent": ext,
"slider": false
});

var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/
ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer");
map.addLayer(basemap);




The above code is doing the following:

  1. Create the extent of the map.
  2. Create the map object.
  3. Set the map extent, and set the spatial map data (in ESRI terms called Layers) that we want to publish in the map.

Now, with ESRI, any more required functionality that we want to add it to this map, we should add it to the same map object. And with more functionality, you will end up with a huge script in the same class the define the map object.

So, I was thinking how to refactor that code.
One idea was to take out the code that set the extent and layers to its own map object.
This refactor will give me these benefits:

  1. I can re-use the code in the future, because the code that will probably change, is the code that set the extent and the desired layers. So by separating that code in its own class, I can reuse the functionality without change.
  2. By separating the code, I can give meaningful names for the classes, that help dismantle the huge code that has everything in the map class.

So, I will have a class called "MapExtentSetter", which when I create it , will create esri.map, with extent and layers that match the desired area and data.

The final code for that class is going to be:
dojo.declare("MapExtentSetter", 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 "MapExtentSetter" , which will create the esri.map that is configured to show the desired extent and data.
Then to use it, I will write the following code:


var mapObject = new MapExtentSetter("mapDiv");
/* where mapDiv is the html DIV's id that will contains the map */

cool, isn't it?