Templates, Templates, Templates

Blog Post created by csergent08 Champion on Jan 7, 2015

Starting this blog series I started working on a template, but now I have three templates that I plan on working on simultaneously. You might wonder, why three templates? The answer is simple. They each serve a different purpose. The gisTemplate will be used to applications that go beyond our county boundaries. One application that this will apply to will be to determine if a potential job candidate lives within a certain distance of the city boundary. The gisWeb template will be used to replace the current City of Decatur external GIS website built with the Flex Viewer  and other desktop browser based apps that exist or future ones. The gisMobile template will be used for mobile field applications used on iPads or Android devices. All apps will be built using HTML5 and the Esri JS API as opposed to native apps for specific devices.


Good news, the GIS web app and the GIS mobile app won't differ much. I will point out the differences as we come to them. In fact, the HTML and CSS are exactly the same for all three sites. And today's JavaScript is the samd for the web app and the mobile app.


OKay, here is my practice of documenting like crazy when building an app. Don't worry about the fact that this adds to page sizes. When these templates are done, we are going to crush our code or minify it. This documentation just helps for development purposes.


First I want to add my references. I have added documentation on the purpose for each module. I needed to make a reference to the three layer types I plan on adding:

// Comments describing require statements are definition from https://developers.arcgis.com/javascript/jsapi/ 
// and http://dojotoolkit.org/reference-guide/1.9/

// Get references to modules to be used
require(["esri/map",                                // mapSection
         "esri/config",                             // The default values for all JS API configuration options. 
         "esri/dijit/HomeButton",                   // homeButton
         "esri/geometry/Extent", // The minimum and maximum X- and Y- coordinates of a bounding box. Used to set custom extent
         "esri/tasks/GeometryService",    // Represents a geometry service resource exposed by the ArcGIS Server REST API.
         "dojo/dom",                            // It is used for code like - dom.byId("someNode")
         "dojo/on",                             // This module is used based on an even such as on("click")
         "dojo/parser",                         // The Dojo Parser is an optional module.
         "dojo/domReady!"],    // An AMD loaded plugin that will wait until the DOM has finished loading before returning

The next section is optional as I referenced in my last post, how to determine if you need a proxy.  I know I will eventually need a proxy, so I just add as part of my template. It's pretty easy to do with the following code:

esriConfig.defaults.io.proxyUrl = "proxy.ashx";
             esriConfig.defaults.io.alwaysUseProxy = false;


My github examples has complete documentation on this.


Finally we add the geometry service and then set the custom extent for our map and then add the three layers that will be displayed on the map. You'll also notice that I removed the Esri logo by adding the code for creating my map in logo:false. For me this makes our website more our own. Adding the Esri logo is up to you. If you do, it does link to Esri's website if that is something you would like to have.

             // Map Services Begin

             // declare geometry service
             esriConfig.defaults.geometryService = new GeometryService("http://maps.decaturil.gov/arcgis/rest/services/Utilities/Geometry/GeometryServer");

             // set custom extent
             var initialExtent = new Extent({
                 "xmin": 777229.03,
                 "ymin": 1133467.92,
                 "xmax": 848340.14,
                 "ymax": 1185634.58,
                 "spatialReference": {
                     "wkid": 3435

             // create map and set slider style to small
             map = new Map("mapSection", {
                 showAttribution: false,
                 sliderStyle: "small",
                 extent: initialExtent,
                 logo: false

             // add imagery
             var tiled = new ArcGISTiledMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");
             // set operational layers
             var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", { "opacity": 0.5 });
             // add operational layers

             // add point feature layer
             var pointFeatureLayer = new FeatureLayer("http://maps.decaturil.gov/arcgis/rest/services/Test/FeatureServer/0");

             // Map Services End

So now we have the basics for all three templates. Let's get that locator button added, in my next post.