Turning Sphagetti codes in to Modular structure

[GaneshSolai_Sambandam]

Hi GIS folks,
I started building web application using ARCGIS Javascript and slowly started adding new functionality into my web application.

As my coding is getting bigger and bigger into my application, it is getting to stage where it is very difficult to look at my code.

Can anyone please some provide methods / techniques through which we can organize our code in a modular way, so that allows easy debugging.

I do know that we organize our code in a separate Javascript file for each functionality / feature added on to my application, but, just wanted to know, is there a right way of doing / organizing code better.


And, also if you can point me to the right direction with some sample application, will be really appreciated.

Thanks in advance.


Regards
Ganesh

[IanPeebles]

Hi GIS folks,
I started building web application using ARCGIS Javascript and slowly started adding new functionality into my web application.

As my coding is getting bigger and bigger into my application, it is getting to stage where it is very difficult to look at my code.

Can anyone please some provide methods / techniques through which we can organize our code in a modular way, so that allows easy debugging.

I do know that we organize our code in a separate Javascript file for each functionality / feature added on to my application, but, just wanted to know, is there a right way of doing / organizing code better.


And, also if you can point me to the right direction with some sample application, will be really appreciated.

Thanks in advance.




Regards
Ganesh

Ganesh,

The same thing happened to me with my applications.  The index.html simply got too big and had too much code.  During the past couple of weeks, I started to create a modular based application.  What I have done in the index.html is create references that points to javascript files on the within the application on server.  Below is a screenshot on what I have done.  Is this what you are looking for in terms creating a modular based application?


Here is a sample of the references within the index.html page:

   <script type="text/javascript" src="js/editing/EditorCutFeatures.js"></script>
   <script type="text/javascript" src="js/editing/EditorDeleteFeatures.js"></script>
   <script type="text/javascript" src="js/editing/EditorModifyFeatures.js"></script>
   <script type="text/javascript" src="js/editing/EditorTemplatePicker.js"></script>
   <script type="text/javascript" src="js/find/FindNeighborhood.js"></script>
   <script type="text/javascript" src="js/find/FindEngineeringProject.js"></script>
   <script type="text/javascript" src="js/geocoding/FindAddress.js"></script>
   <script type="text/javascript" src="js/geocoding/FindStreet.js"></script>

The function init for these tools remains in the index.html.

I then created a js file which contains the location of all javascript files.  Within the js folder are folders that contain specific functions such as editing, find, and geocoding (see screenshot).


Is this what you are looking for?

Also, I have a screenshot showing the code (editing and find sample) within one of the .js files.

[GaneshSolai_Sambandam]

Thanks very much ipeebles.

Would you be able to attach your HTML, CSS and the relevant Javascipt files, so that I get know how you did it.


At the moment, I tried organize my code, the way you explained, but I am getting loads of error and I am confused.


So, If you can post some samples files, would be great.


Thanks in advance.


regards
Ganesh

[SunilPalkar]

Thanks its very useful for me too.

thanks for sharing this.

However I was facing problem regarding setting proxy stuff (few .js files contains various ArcGIS Server REST links) so did you applied any proxy settings at your side ? It will be appreciate if ESRI JSAPI team provide some guideline regarding modular building..

thanks..

[IanPeebles]

I will put together a sample application and will attach it as a .zip so both of you can see how it was done.

[IanPeebles]

I haven't forgotten about you guys.  I will need to strip some stuff out of the application before attaching it.  The application will include drawing, geocoding, editing, printing, and find tasks.  Give me until tomorrow and I will attach a sample application.

[GaneshSolai_Sambandam]

HI Ipeebles,
thank you very much for your effort. Take your time and we will wait to see your nice application.

thanks once again.

[IanPeebles]

Attached is a sample application that shows a modular structure.  The small sample contains navigation tools, drawing, find, geocoding, and a template picker.

NOTE** When you open this application it will be broken.  The application is broken because I replaced my map services and references with <machinename>.  You will need to use your own map services and adjust the code accordingly.  When you are able to add in your own references and map services, the application should work.

[GaneshSolai_Sambandam]

thank you very much for the sample application.  I will look into it and will get back to you
.


Thank you very much for the help.

[GaneshSolai_Sambandam]

HI Ipeebles
I started organizing my code using modular way, but unfortunately, I can't figure out, why code isn't working properly.
Can you please look into my code and find why I  couldn't able to create to point graphic using geocoder widget.

function showLocation(evt) {
    map.graphics.clear();
    var point = evt.result.feature.geometry;
    var symbol = new SimpleMarkerSymbol().setStyle(
      SimpleMarkerSymbol.STYLE_SQUARE).setColor(
      new Color([255, 0, 0, 0.5])
    );
    var graphic = new Graphic(point, symbol);
    map.graphics.add(graphic);

    map.infoWindow.setTitle("Search Result");
    map.infoWindow.setContent(evt.result.name);
    map.infoWindow.show(evt.result.feature.geometry);

  
}

[HTML] <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9"/>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"/>
      
 
    <title>GeoInfoScape</title>
   
     
  <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dojo/resources/dojo.css"/>
  <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dgrid/css/dgrid.css"/>
  <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dgrid/css/skins/tundra.css"/>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css"/>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/soria/soria.css"/>

    <link rel="stylesheet" href="CSS/Layout.css" />


    <style>
    
  
    </style>

     <script type="text/javascript" src="JS/Geocoding/Geocoder.js"></script>

    <script>var dojoConfig = { parseOnLoad: true }</script>
<script src="http://js.arcgis.com/3.6/"></script>
<!--<script  type="text/javascript" src="JavaScript2.js">
    
     /// <reference path="jsapi_vsdoc12_v36.js"/>

</script>-->
  
<script type="text/javascript">

    // ********************************************
    //          * VARIABLES *
    // ********************************************
    var map; // Map
    var geocoder; // Geocoder Widget

    require([
    "dojo/ready", "dojo/on",
    "esri/map", "esri/config", "esri/dijit/Geocoder", "esri/geometry/screenUtils", "esri/geometry/Extent", "esri/geometry/Point", "esri/geometry/webMercatorUtils", "esri/tasks/locator", "esri/graphic", "esri/SpatialReference",
    "esri/layers/FeatureLayer", "esri/layers/KMLLayer", "esri/tasks/QueryTask", "esri/tasks/query", "esri/tasks/RelationParameters", "esri/tasks/GeometryService", "esri/tasks/BufferParameters",
    "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/PictureMarkerSymbol", "esri/symbols/Font", "esri/symbols/TextSymbol", "esri/InfoTemplate",

    "esri/dijit/BasemapGallery", "esri/arcgis/utils",
     "dojo/_base/array", "dojo/_base/Color",
    "dojo/number", "dojo/parser", "dojo/dom", "dojo/dom-construct", "dojo/query", "dijit/registry",
     "dijit/form/Button", "dijit/form/TextBox", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer", "dijit/layout/TabContainer", "dijit/Menu", "dijit/TitlePane",
      "dojo/domReady!"],
      function (ready, on, Map, esriConfig, Geocoder, screenUtils, Extent, Point, webMercatorUtils, Locator, Graphic, SpatialReference,
    FeatureLayer, KMLLayer, QueryTask, Query, RelationshipParameters, GeometryService, BufferParameters, SimpleMarkerSymbol, SimpleLineSymbol, PictureMarkerSymbol, Font, TextSymbol, InfoTemplate, BasemapGallery, arcgisUtils, arrayUtils, Color, number, parser, dom, domConstruct, query, registry) {

          var initialExtent = new Extent({ "xmin": -2335145.742961492, "ymin": 6433321.958737379, "xmax": 1656701.6222024914, "ymax": 8248242.758340122, "spatialReference": { "wkid": 102100 } });
          map = new Map("map",
              {
                  extent: initialExtent,
                  basemap: "osm",
                  zoom: 3,
                  sliderPosition: "top-right",
                  sliderStyle: "small"
              });


          // Geocoder Widget
           geocoder = new Geocoder({
              arcgisGeocoder: {
                  placeholder: "Find a place"
              },
              map: map,
          }, dom.byId("Search"));
           geocoder.startup();

         

       geocoder.on("select", showLocation);
     


    });

    //*********************************************
    //            FUNCTION INTIALIZE END
    //*********************************************

</script>


  

</head>
<body class="soria">
   
  
   <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false"
         style="width:100%;height:100%;margin:0;">
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" >GeoInfoScape   

        <div id ="extent"></div>

    </div>

<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'"  id="leftPane">

        <div data-dojo-type="dijit/layout/AccordionContainer">

            <div data-dojo-type="dijit/layout/ContentPane" title="Extent">
                <div id="xmin"> </div>
                <div id="ymin"> </div>
                <div id="xmax"> </div>
                <div id="ymax"> </div>
            </div>

            <div data-dojo-type="dijit/layout/ContentPane" title="NetworkLayer">
                <div data-dojo-type="dijit/layout/TabContainer" tabStrip="true">
                    <div data-dojo-type="dijit/layout/ContentPane" title="Legend">

                    </div>

                    <div data-dojo-type="dijit/layout/ContentPane" title="Color">

                    </div>

                     <div data-dojo-type="dijit/layout/ContentPane" title="Kavitha">

                    </div>
                </div>

            </div>
            <div data-dojo-type="dijit/layout/ContentPane" title="Search Place">
                <div id="Search1"></div>
            </div>
        </div>

    </div>
      <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding:0;">

          <div id="Search"></div>

          <div style="position:absolute; right:50px; top:10px; z-Index:999;">
          <div data-dojo-type="dijit/TitlePane"
               data-dojo-props="title:'Select Basemap', closable:false,  open:false">
            <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
            <div id="basemapGallery" ></div></div>
          </div>
        </div>
<div id="btn1" style="position:absolute; left: 300px; top:2px; z-index:999;">
    <div data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'Menu', closable: false, open:false">
<div data-dojo-type="dijit/Menu" id="popup1campus" contextMenuForWindow="false" targetNodeIds="btn1">
  <div data-dojo-type="dijit/MenuItem" onClick="alert('Hello world');">Enabled Item</div>
  <div data-dojo-type="dijit/MenuItem" disabled="true">Disabled Item</div>
  <div data-dojo-type="dijit/MenuSeparator"></div>
  <div data-dojo-type="dijit/MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut"
    onClick="doNothing();">Cut</div>
  <div data-dojo-type="dijit/MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy"
    onClick="doNothing();">Copy</div>
  <div data-dojo-type="dijit/MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste"
    onClick="doNothing();">Paste</div> 
</div>
        </div>
    </div>
         

       
          
     </div>
<div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
              <div> This is rightPane</div>

    <form action="">
  Search Job: <input id="searchJob" type="text" value="Big Data Scientist" />
              <input id="executeButton" type="button" value="Search" />

        <input id="address" type="text"  size="60" value="Shepherds walk, Bradley stoke, Bristol"/>

        <button id="locate" data-dojo-type="dijit/form/Button">Locate</button>
      
    </form>
    <br />
    <br />

    Buffer Distance (in Kilometers): <input type="text" id="distance" size="5" value="1"/>

    <select id="unit" style="width:100px;">
        <option value="UNIT_STATUTE_MILE"> Miles</option>
         <option value="UNIT_KILOMETER">KILOMETER</option>
         <option value="UNIT_METER">METER</option>
        <option value="UNIT_DEGREE">DEGREE</option>
         <option value="UNIT_FOOT">FEET</option>
    </select>

    <input id="Buffer" type="button" value="Buffer" />


    <div id="info"  class="tundra"  style="padding: 5px; margin: 5px; background-color: #eee;"></div>

    <div id="loc"> geolocation</div>

       <br />
       <div id="acc">geoaccuracy</div>

          </div>



      

      
      

     
<div id="footer" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">
            
          <div id="temp"> Put geolocation coordinates here</div>
    </div>

      
   

   
</body>
</html>
[/HTML]