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.