Latest Contributions by IanPeebles

Does anyone have and feedback? ... View more

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

Still looking for some input.  Here is the code block I am working with right now.  The first post contains the entire application. //  ***************************************************************************** //  *   EDIT FEATURES - MOVE, EDIT VERTICES, SCALE, ROTATE, OPTIONS             * //  *****************************************************************************           function createEditToolbar() {       var activeFeatureLayer = null;          var landuseLayerFL = map.getLayer("landuseLayer");    var militaryareasFL = map.getLayer("militaryareas");             editModifyFeaturesTools = new esri.toolbars.Edit(map);             // ACTIVATE TOOLBAR WHEN CLICKING ON PLANTING SITES             dojo.connect(landuseLayerFL, "onClick", function(evt) {                dojo.stopEvent(evt);                activateEditToolbar(evt.graphic);       activeFeatureLayer = landuseLayerFL;             });         // ACTIVATE TOOLBAR WHEN CLICKING ON PUBLIC TREE INVENTORY       dojo.connect(militaryareasFL, "onClick", function(evt) {               dojo.stopEvent(evt);               activateEditToolbar(evt.graphic);      activeFeatureLayer = militaryareasFL;             });       // DEACTIVATE TOOLBAR             dojo.connect(map,"onClick", function(evt){             editModifyFeaturesTools.deactivate();             });            // POST EDITS AFTER TOOL IS DEACTIVATED    dojo.connect(editModifyFeaturesTools, "onDeactivate", function(editTool,graphic) {                activeFeatureLayer.applyEdits(null, [graphic], null);       alert("Feature successfully updated.");             });            }      // ACTIVATE TOOLBAR EDITING         function activateEditToolbar(graphic) {             var editTool = 0;                     if (dijit.byId("tool_move").checked) {                 editTool = editTool | esri.toolbars.Edit.MOVE;                }             if (dijit.byId("tool_vertices").checked) {                 editTool = editTool | esri.toolbars.Edit.EDIT_VERTICES;             }             if (dijit.byId("tool_scale").checked) {                 editTool = editTool | esri.toolbars.Edit.SCALE;             }             if (dijit.byId("tool_rotate").checked) {                 editTool = editTool | esri.toolbars.Edit.ROTATE;             }             // SPECIFY TOOLBAR OPTIONS             var options = {                 allowAddVertices: dijit.byId("vtx_ca").checked,                 allowDeleteVertices: dijit.byId("vtx_cd").checked,                 uniformScaling: dijit.byId("uniform_scaling").checked             };             editModifyFeaturesTools.activate(editTool, graphic, options);            }   //  ***************************************************************************** //  *   DELETE FEATURES                                                         * //  *****************************************************************************  function editingDeleteFeature(results) {   var layers = dojo.map(results, function (result) {   return result.layer;     });     // DELETE FEATURE USING ONCLICK     dojo.forEach(layers, function (deleteFeatureslLayer) {   dojo.connect(deleteFeatureslLayer, "onClick", function (evt) {         dojo.stopEvent(evt);         // DELETE FEATURE IS DELETE BUTTON IS CHECKED (ACTIVE)         if (dijit.byId("tool_delete").checked) {             deleteFeatureslLayer.applyEdits(null, null, [evt.graphic], function () {               operation = new esri.dijit.editing.Delete({                     featureLayer: deleteFeatureslLayer,                     deletedGraphics: [evt.graphic]      });      // ALERT WHEN FEATURE IS DELETED      alert("Feature deleted.")     });    }   }); }); } ... View more

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. ... View more

Try to change:  // DELETE TOOL function EditingDeleteFeature(results) { var deleteFeatureslLayer = results[0].layer; var layers = dojo.map(results, function (result) {   return result.layer; }); // Ctrl+click to delete features and add this delete operation to undomanager dojo.connect(deleteFeatureslLayer, "onClick", function (evt) {   dojo.stopEvent(evt);   // DELETE FEATURE IS DELETE BUTTON IS CHECKED (ACTIVE)   if (dijit.byId("tool_delete").checked) {    deleteFeatureslLayer.applyEdits(null, null, [evt.graphic], function () {        operation = new esri.dijit.editing.Delete({                             featureLayer: deleteFeatureslLayer,                             deletedGraphics: [evt.graphic]      });    });   } }); } To:  // DELETE TOOL function EditingDeleteFeature(results) {     var layers = dojo.map(results, function (result) {         return result.layer;     });     // Ctrl+click to delete features and add this delete operation to undomanager     dojo.forEach(layers, function (deleteFeatureslLayer) { dojo.connect(deleteFeatureslLayer, "onClick", function (evt) {         dojo.stopEvent(evt);         // DELETE FEATURE IS DELETE BUTTON IS CHECKED (ACTIVE)         if (dijit.byId("tool_delete").checked) {             deleteFeatureslLayer.applyEdits(null, null, [evt.graphic], function () {               operation = new esri.dijit.editing.Delete({                     featureLayer: deleteFeatureslLayer,                     deletedGraphics: [evt.graphic]   });             }); }     }); }; } Tried to incorporate your code changes, but I found that the following lines break the application (see bold code): // DELETE TOOL function EditingDeleteFeature(results) {     var layers = dojo.map(results, function (result) {         return result.layer;     });     // Ctrl+click to delete features and add this delete operation to undomanager     dojo.forEach(layers, function (deleteFeatureslLayer) { dojo.connect(deleteFeatureslLayer, "onClick", function (evt) {         dojo.stopEvent(evt);         // DELETE FEATURE IS DELETE BUTTON IS CHECKED (ACTIVE)         if (dijit.byId("tool_delete").checked) {             deleteFeatureslLayer.applyEdits(null, null, [evt.graphic], function () {               operation = new esri.dijit.editing.Delete({                     featureLayer: deleteFeatureslLayer,                     deletedGraphics: [evt.graphic]   });             }); }     }); }; Here is an updated code block. I have commented out the dojo.forEach line. and the replaced the }; with a regular }. The functionality is still broken. Here is the code I am working with: <!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">     <!--The viewport meta tag is used to improve the presentation and behavior of the samples       on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">     <title>UndoManager</title>     <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">     <style>       html, body {         height: 100%;         width: 100%;         margin: 0;         padding: 0;         overflow:hidden;       }       .instructions{         padding-top:20px;         font-size:12px;       }       .undoButtons{         width:60%;         margin-left:auto;         margin-right:auto;         padding-top:4px;       }       #map{         padding:0px;         border:solid 2px #1A84AD;         -moz-border-radius: 4px;         border-radius: 4px;       }       #rightPane{         border:none;         width:300px;       }       .templatePicker {         border:solid 2px #1A84AD !important;       }       .undoIcon { background-image:url(images/undo.png); width:16px; height:16px; }       .redoIcon { background-image:url(images/redo.png); width:16px; height:16px;}     </style>     <script>var dojoConfig = { parseOnLoad:true };</script>     <script src="http://js.arcgis.com/3.7/"></script>     <script>       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("esri.map");       dojo.require("esri.dijit.editing.TemplatePicker-all");       dojo.require("esri.dijit.AttributeInspector-all");       dojo.require("esri.dijit.editing.editOperation");       var map;       function init() {         //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to          //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic         //for details on setting up a proxy page.         esri.config.defaults.io.proxyUrl = "/proxy";         esri.config.defaults.io.alwaysUseProxy = false;         map = new esri.Map("map", {           basemap: "topo",           center: [-97.367, 37.691],           zoom: 14         });         dojo.connect(map, "onLayersAddResult", initEditing);                 var landuseLayer = new esri.layers.FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/6", {           mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,           outFields: ["*"]         });     var militaryareas = new esri.layers.FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/9", {           mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,           outFields: ["*"]         });         map.addLayers([landuseLayer, militaryareas]);               }   function initEditing(results) {    var layers = dojo.map(results, function (result) {    return result.layer;   });   // Ctrl+click to delete features and add this delete operation to undomanager   //dojo.forEach(layers, function (deleteFeatureslLayer) {    dojo.connect(deleteFeatureslLayer, "onClick", function (evt) {    dojo.stopEvent(evt);            // DELETE FEATURE IS DELETE BUTTON IS CHECKED (ACTIVE)         if (dijit.byId("tool_delete").checked) {             deleteFeatureslLayer.applyEdits(null, null, [evt.graphic], function () {               operation = new esri.dijit.editing.Delete({                     featureLayer: deleteFeatureslLayer,                     deletedGraphics: [evt.graphic]      });     });    }         }); }       dojo.ready(init);     </script>   </head>   <body class="claro">     <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="gutters:true, design:'sidebar'" style="width:100%;height:100%;">       <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>       <div id="rightPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'">         <div id="templatePickerDiv"></div>         <div class="undoButtons">          <button id="undo"  data-dojo-type="dijit.form.Button" data-dojo-props="disabled:true, iconClass:'undoIcon'" >Undo</button>          <button id="redo"  data-dojo-type="dijit.form.Button" data-dojo-props="disabled:true, iconClass:'redoIcon'" >Redo</button>    <div id="tool_delete" data-dojo-type="dijit.form.ToggleButton" data-dojo-props="checked:false, iconClass:'dijitCheckBoxIcon'">Delete</div>         </div>         <div class='instructions'>           <ul style="list-style:none;padding-left:4px;">             <li><b>Create Features:</b> Select template then click on map.</li>             <li><b>Delete Features:</b> Ctrl or Cmd + Click feature.</li>           </ul>           The undo/redo buttons will become enabled after editing the feature attributes or geometry.         </div>       </div>     </div>   </body> </html> ... View more

Define a variable which is a reference to the map.onClick event handler. Define the event handler when the button is clicked, and detach the event handler when the identify operation is complete. So the user has to click the popup button every time to start an identify operation. var evtOnMapClick; function btnPopup_onClick() {     evtOnMapClick = map.on("click", onMapClick); } function onMapClick(e) {     // identify the features and display the popup        // at the end    if (evtOnMapClick) {       evtOnMapClick.remove();       evtOnMapClick = null;    } } Hope it helps. Thanks.  That looks promising.  How would I incorporate this code block into this sample? <!DOCTYPE html> <html>    <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">     <!--The viewport meta tag is used to improve the presentation and behavior of the     samples on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">     <title>       San Francisco     </title>     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">     <style>       html, body { height: 100%; width: 100%; margin: 0; padding: 0; } .esriScalebar{       padding: 20px 20px; } #map{ padding:0;}     </style>     <script>var dojoConfig = { parseOnLoad: true };</script>     <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>     <script>       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("esri.map");       dojo.require("esri.layers.FeatureLayer");       dojo.require("esri.dijit.Popup");       var map;       function init() {         esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");                  //define custom popup options         var popupOptions = {           markerSymbol: new esri.symbol.SimpleMarkerSymbol("circle", 32, null, new dojo.Color([0, 0, 0, 0.25])),           marginLeft: "20",           marginTop: "20"         };         //create a popup to replace the map's info window         var popup = new esri.dijit.Popup(popupOptions, dojo.create("div"));                 map = new esri.Map("map", {           basemap: "topo",           center: [-122.448, 37.788],           zoom: 17,           infoWindow: popup         });                 //define a popup template         var popupTemplate = new esri.dijit.PopupTemplate({           title: "{address}",           fieldInfos: [           {fieldName: "req_type", visible: true, label:"Type"},           {fieldName: "req_date", visible:true, label:"Date" ,format:{dateFormat:'shortDateShortTime'}}           ],           showAttachments:true         });           //create a feature layer based on the feature collection         var featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/MapServer/0", {           mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,           infoTemplate: popupTemplate,           outFields: ["req_date", "address"]         });         featureLayer.setDefinitionExpression("address != ''");                         map.addLayer(featureLayer);       }       dojo.ready(init);     </script>   </head>   <body class="claro">     <button id="identify" data-dojo-type="dijit.form.Button">Identify</button>     <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"     style="width: 100%; height: 100%; margin: 0;">       <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"       style="border:1px solid #000;padding:0;">       </div>     </div>   </body> </html> ... View more

Here is an attached screenshot of my working toolset.  I would like to some how use the selection options drop down list to select the selection mode.  As shown in the screenshot, the user will have a variety of selection options. ... View more