Community

Error on creating mdule

5652
11
Jump to solution
04-06-2016 06:59 AM
jamesa
by
New Contributor III
‎04-06-2016 06:59 AM

I try to create a identify module from the fiddler code here:Edit fiddle - JSFiddle  but I got error message for Unexpected identifier and moduleI.executeIdentifyTask when try to click on the map. At this moment, I am trying to understand how to write a module.  Please help.  Thanks.

1. index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Identify with Popup</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
 <style type="text/css">
  html, body {
   height:100%;
   width:100%;
   margin:0;
   padding:0;
   margin:0;
   font-family: "Open Sans";
  }
  #leftPane {
   width:20%;
   margin:0;
   border:none;
  }
  #map {
   padding:0;
  }
  .nav {
   padding: 5px 10px;
   background: #4479BA;
   color: #FFF;
   border-radius: 5px;
   border: solid 1px #20538D;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  }
  #header {
   text-align: center;
   height:60px;
   border-bottom: solid 1px #ccc;
  }
 </style>
 
  <script type="text/javascript">  
                var dojoConfig = {  
                    packages: [{  
                        name: 'myCustomModule',  
                        location: location.pathname.replace(/\/[^/]+$/, '') + '/myCustomModule'  
                    }]  
                };  
      </script>     
    <script src="https://js.arcgis.com/3.16/"></script>
 
 <script>
    require([
     "dojo/ready", 
        "dojo/on", 
        "dojo/dom",
        "dijit/registry",
        "dojo/dom-construct",
        "dojo/parser", 
        "dijit/layout/BorderContainer", 
        "dijit/layout/ContentPane", 
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/domUtils",
        "esri/dijit/Popup", "dojo/promise/all", 
        "dojo/_base/array",
        "esri/Color",
  "myCustomModule/moduleI",
        "dojo/domReady!"
    ], function(
        ready, 
        on, 
        dom,
        registry,
        domConstruct,
        parser, 
        BorderContainer, 
        ContentPane,
        Map, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,
        SimpleLineSymbol,  domUtils, Popup, All,
        arrayUtils, Color, moduleI
    ) {
 
       parser.parse();
   
        var popup = new Popup({
          fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
              new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]))
        }, domConstruct.create("div"));
  
   
   
    map = new Map("map", {
       basemap: "satellite",
       center: [-83.275, 42.573],
       zoom: 18,
       infoWindow: popup
     });
     
  
        var landBaseLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer", { opacity: .55 });  
            map.addLayer(landBaseLayer);  
   
     
         //change in prod
  esriConfig.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
  
  
   
  map.on("click", function(evt){
    moduleI.executeIdentifyTask(evt);
   })
    });
</script>
</head>
 <body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" 
    data-dojo-props="design:'headline',gutters:false" 
    style="width:100%; height:100%;">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:false" 
        region="left" style="width: 20%;height:100%;">
        <div id="leftPane" data-dojo-type="dijit/layout/ContentPane" 
            data-dojo-props="region:'center'"></div>
        <div id="header" data-dojo-type="dijit/layout/ContentPane" 
            data-dojo-props="region:'top'">
            <div id="featureCount" style="margin-bottom:5px;">Click to select feature(s)</div>
        </div>
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>

2. module.js

define([
        "dojo/_base/connect", 
        "dojo/dom",
        "esri/map",
        "esri/InfoTemplate",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/tasks/IdentifyTask",
        "esri/tasks/IdentifyParameters", "esri/domUtils",
        "esri/dijit/Popup", "dojo/promise/all", 
        "dojo/_base/array",
        "esri/Color"
    ], function(
        connect,
        dom,
        Map, InfoTemplate, ArcGISDynamicMapServiceLayer, SimpleFillSymbol,
        SimpleLineSymbol, IdentifyTask, IdentifyParameters, domUtils, Popup, All,
        arrayUtils, Color
){     
return{  
        executeIdentifyTask:function(evt){
   var identifyTask, identifyParams, content, identifyResults, idPoint;
    map.infoWindow.set("popupWindow", false);
       initializeSidebar(map);  
                identifyResults = [];  
                idPoint = evt.mapPoint;  
                var layers = dojo.map(map.layerIds, function (layerId) {  
                    return map.getLayer(layerId);  
                });  
                layers = dojo.filter(layers, function (layer) {  
                    if (layer.visibleLayers[0] !== -1) {  
                        return layer.getImageUrl && layer.visible  
                    }  
                }); //Only dynamic layers have the getImageUrl function. Filter so you only query visible dynamic layers  
                var tasks = dojo.map(layers, function (layer) {  
                    return new esri.tasks.IdentifyTask(layer.url);  
                }); //map each visible dynamic layer to a new identify task, using the layer url  
                var defTasks = dojo.map(tasks, function (task) {  
                    return new dojo.Deferred();  
                }); //map each identify task to a new dojo.Deferred  
                var params = createIdentifyParams(layers, evt);  

                var promises = [];  

                for (i = 0; i < tasks.length; i++) {  
                    promises.push(tasks.execute(params)); //Execute each task  
                }  

                var allPromises = new All(promises);  
                //allPromises.then(function (r) { showIdentifyResults(r, tasks); });  
    allPromises.then(function (r) {
     function showIdentifyResults(r, tasks){
        var results = [];  
                var taskUrls = [];  
                r = dojo.filter(r, function (result) {  
                    return r[0];  
                });  
                for (i = 0; i < r.length; i++) {  
                    results = results.concat(r);  
                    for (j = 0; j < r.length; j++) {  
                        taskUrls = taskUrls.concat(tasks.url);  
                    }  
                }  


   //combine content ------------------- 
     content = parcels = buildings ="";
          var parcelFeatures = [];  
     dojo.forEach(results, function(result) {      
      var feature = result.feature;
    var atts = feature.attributes;
    feature.attributes.layerName = result.layerName;
    if(result.layerName === 'Tax Parcels'){
      parcels += atts["Postal Address"] + "<br />";
      parcelFeatures[parcelFeatures.length] = result.feature;
    }
    else if (result.layerName === 'Building Footprints'){
      buildings += "Building/Parcel ID: " + atts.PARCELID + "<br />";
    }
    return feature;
     });
   if ( parcels ) {
    content += "<b>Parcels</b><br />" + parcels;
     }
     if ( buildings ) {
    content += "<b>Buildings</b><br />" + buildings;
     }
     console.log("content:  ", content);


      if (results.length === 0) {  
                    map.infoWindow.clearFeatures();  
                } else { 
                     map.infoWindow.setFeatures(parcelFeatures);     
         map.infoWindow.setContent(content); 
                }  
                map.infoWindow.show(idPoint);  
                return results; 

     }
    });  
            }  
          createIdentifyParams:function(layers, evt) {  
                var identifyParamsList = [];  
                identifyParamsList.length = 0;  
                dojo.forEach(layers, function (layer) {  
                    var idParams = new esri.tasks.IdentifyParameters();  
                    idParams.width = map.width;  
                    idParams.height = map.height;  
                    idParams.geometry = evt.mapPoint;  
                    idParams.mapExtent = map.extent;  
                    idParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;  
      idParams.tolerance = 3;  
                    idParams.returnGeometry = true;  
                    identifyParamsList.push(idParams); 
                });  
                return identifyParamsList;  
            } 
            initializeSidebar:function (map){
                var popup = map.infoWindow;
                //when the selection changes update the side panel to display the popup info for the 
                //currently selected feature. 
                connect.connect(popup, "onSelectionChange", function(){
                    displayPopupContent(popup.getSelectedFeature());
                });
                //when the selection is cleared remove the popup content from the side panel. 
                connect.connect(popup, "onClearFeatures", function(){
                    //dom.byId replaces dojo.byId
                    dom.byId("featureCount").innerHTML = "Click to select feature(s)";
                    //registry.byId replaces dijit.byId
                    registry.byId("leftPane").set("content", "");
                   // domUtils.hide(dom.byId("pager"));
                });
                //When features are associated with the  map's info window update the sidebar with the new content. 
                connect.connect(popup, "onSetContent", function(){
                    displayPopupContent(popup.getSelectedFeature());
                    dom.byId("featureCount").innerHTML = popup.features.length + " feature(s) selected";
                    //enable navigation if more than one feature is selected 
                   // popup.features.length > 1 ? domUtils.show(dom.byId("pager")) : domUtils.hide(dom.byId("pager"));
                });
            }
   
        displayPopupContent:function(feature){
          if(feature){
            registry.byId("leftPane").set("content", content);
          }
        }
}
 }); //define function ends.
0 Kudos
11 Replies
ChrisSmith7
by
Frequent Contributor
‎04-06-2016 07:49 AM

Oh, and another example here!

RequireJS and ArcGIS API for JS

jamesa
by
New Contributor III
‎04-06-2016 10:14 AM

Thank you everyone!