I am having an issue with the search widget. I have a web page that mixes the Editor widget and Search Widget. The symptom is that upon searching my feature layer, the map does zoom to the feature I was searching, but the infoWindow does not pop up upon clicking it. I can use the editor toolbar to add that (search result feature) to select it; but I want it to be preselected. I DO NOT WANT to use the search infowindow but the editor infowindow. I had thought this would be a very common requirement (so search a feature prior to editing it).
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--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>Edit Irrigation Data</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css" />
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
}
#map {
padding: 0;
}
#header {
font-size: 1.1em;
font-family: sans-serif;
padding-left: 1em;
padding-top: 4px;
color: #660000;
}
.templatePicker {
border: none;
}
.dj_ie .infowindow .window .top .right .user .content {
position: relative;
}
.dj_ie .simpleInfoWindow .content {
position: relative;
}
/*
.dijitButton .dijitButtonNode, #drawingWrapper, #printButton {
width: 160px;
}*/
.esriPrint {
padding: 0;
}
/*
label {
display: inline-block;
padding: 5px 5px 0 5px;
font-weight: 400;
font-size: 12pt;
}*/
</style>
<script src="http://js.arcgis.com/3.14/"></script>
<script>
var map;
var app = {};
app.map = null; app.toolbar = null; app.tool = null; app.symbols = null; app.printer = null;
require([
"esri/map", "esri/toolbars/draw", "esri/dijit/Print",
"esri/tasks/GeometryService",
"esri/toolbars/edit",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/layers/LayerDrawingOptions",
"esri/Color",
"esri/geometry/Extent",
"esri/SpatialReference",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol", "esri/graphic",
"esri/symbols/SimpleFillSymbol",
"esri/dijit/editing/Editor",
"esri/dijit/editing/TemplatePicker",
"esri/dijit/LayerList",
"esri/dijit/Search",
"esri/tasks/query",
"esri/InfoTemplate",
"esri/config",
"dojo/i18n!esri/nls/jsapi",
"dojo/_base/array", "dojo/parser", "dojo/keys",
"dojo/query", "dojo/dom", "dojo/dom-construct",
"dijit/form/CheckBox", "dijit/form/Button",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dojo/domReady!"
], function (
Map, Draw, Print, GeometryService, Edit,
ArcGISTiledMapServiceLayer, FeatureLayer,LayerDrawingOptions,
Color, Extent, SpatialReference, SimpleMarkerSymbol, SimpleLineSymbol, Graphic, SimpleFillSymbol,
Editor, TemplatePicker,LayerList, Search, Query, InfoTemplate,
esriConfig, jsapiBundle,
arrayUtils, parser, keys,
query, dom, domConstruct,
CheckBox, Button
) {
parser.parse();
// snapping is enabled for this sample - change the tooltip to reflect this
jsapiBundle.toolbars.draw.start = jsapiBundle.toolbars.draw.start + "<br>Press <b>ALT</b> to enable snapping";
// refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/javascript/jshelp/ags_proxy.html
//esriConfig.defaults.io.proxyUrl = "/proxy/";
esriConfig.defaults.io.corsEnabledServers.push("static.arcgis.com");
esriConfig.defaults.io.corsEnabledServers.push("services.arcgisonline.com");
esriConfig.defaults.io.corsEnabledServers.push("gisweb");
esriConfig.defaults.geometryService = new GeometryService("http://gisweb/arcgis/rest/services/Utilities/Geometry/GeometryServer");
app.map = new Map("map", {
basemap: "streets",
center: [-120.84, 37.49],
zoom: 14,
slider: false
});
app.map.on("load", function () {
app.toolbar = new Draw(app.map);
app.toolbar.on("draw-end", addToMap);
});
app.printer = new Print({
map: app.map,
url: "http://gisweb/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
}, dom.byId("printButton"));
app.printer.startup();
app.symbols = {};
app.symbols.point = new SimpleMarkerSymbol("square", 10, new SimpleLineSymbol(), new Color([0, 255, 0, 0.75]));
app.symbols.polyline = new SimpleLineSymbol("solid", new Color([255, 128, 0]), 2);
app.symbols.polygon = new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.25]));
app.symbols.circle = new SimpleFillSymbol().setColor(new Color([0, 0, 180, 0.25]));
query(".drawing").forEach(function (btn) {
var button = new Button({
label: btn.innerHTML,
onClick: function () {
activateTool(this.id);
}
}, btn);
});
function activateTool(type) {
app.tool = type.replace("freehand", "");
app.toolbar.activate(type);
app.map.hideZoomSlider();
}
function addToMap(evt) {
app.toolbar.deactivate();
app.map.showZoomSlider();
var graphic = new Graphic(evt.geometry, app.symbols[app.tool]);
app.map.graphics.add(graphic);
}
app.map.on("layers-add-result", initEditor);
/*
var irrFieldsMSL = new ArcGISDynamicMapServiceLayer("http://gisweb1/arcgis/rest/services/Water/Irrigation_Mobile_one/MapServer");
irrFieldsMSL.setDisableClientCaching(true);
app.map.addLayer(irrFieldsMSL);
*/
var pumps = new FeatureLayer("http://gisweb/arcgis/rest/services/Water/Irrigation_Mobile_one/FeatureServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ['*']
});
pumps.name = "Pumps";
var sideGate = new FeatureLayer("http://gisweb/arcgis/rest/services/Water/Irrigation_Mobile_one/FeatureServer/1", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ['*']
});
var irrData = new FeatureLayer("http://gisweb/arcgis/rest/services/Water/Irrigation_Mobile_one/FeatureServer/2", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ['*']
});
var canals = new FeatureLayer("http://gisweb/arcgis/rest/services/Water/Irrigation_Mobile_one/FeatureServer/5", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ['*']
});
var idPipeLine = new FeatureLayer("http://gisweb/arcgis/rest/services/Water/Irrigation_Mobile_one/FeatureServer/4", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ['*']
});
app.map.addLayers([pumps, sideGate, irrData,canals, idPipeLine]);
var layerList = new LayerList({
map: app.map,
layers: [{ layer: pumps }, { layer: sideGate }, { layer: irrData }, { layer: canals }, { layer: idPipeLine }]
},"layerList");
layerList.startup();
function initEditor(evt) {
var templateLayers = arrayUtils.map(evt.layers, function (result) {
return result.layer;
});
var templatePicker = new TemplatePicker({
featureLayers: templateLayers,
grouping: true,
rows: "auto",
columns: 3
}, "templateDiv");
templatePicker.startup();
var layers = arrayUtils.map(evt.layers, function (result) {
return { featureLayer: result.layer };
});
var settings = {
map: app.map,
templatePicker: templatePicker,
layerInfos: layers,
toolbarVisible: true,
createOptions: {
polylineDrawTools: [Editor.CREATE_TOOL_FREEHAND_POLYLINE],
polygonDrawTools: [Editor.CREATE_TOOL_FREEHAND_POLYGON,
Editor.CREATE_TOOL_CIRCLE,
Editor.CREATE_TOOL_TRIANGLE,
Editor.CREATE_TOOL_RECTANGLE
]
},
toolbarOptions: {
reshapeVisible: true
}
};
var params = { settings: settings };
var myEditor = new Editor(params, 'editorDiv');
//define snapping options
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CROSS,
15,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0, 0.5]),
5
),
null
);
app.map.enableSnapping({
snapPointSymbol: symbol,
tolerance: 20,
snapKey: keys.ALT
});
myEditor.startup();
var s = new Search({
enableButtonMode: false, //this enables the search widget to display as a single button
enableLabel: false,
enableInfoWindow: false,
showInfoWindowOnSelect: false,
map: app.map
}, "search");
/*
s.on("search-results", function (result) {
console.log(result);
console.log(result.results[1][1]);
s.select(result.results[1][1]);
var selectQuery = new Query();
pumps.clearSelection();
var geom = result.results[1][1].feature.geometry;
console.log(geom);
var ex = new Extent(geom.x - 20, geom.y - 20, geom.x + 20, geom.y + 20, new SpatialReference(3857));
selectQuery.geometry = ex;
selectQuery.spatialRelationship = Query.SPATIAL_REL_CONTAINS;
pumps.selectFeatures(selectQuery, FeatureLayer.SELECTION_NEW, function (features) {
console.log(features);
});
});
s.on("select-result", function (result) {
console.log(result);
});
*/
var sources = s.get("sources");
sources.push({
featureLayer: new FeatureLayer("http://gisweb/arcgis/rest/services/Water/Irrigation_Mobile_one/FeatureServer/0"),
searchFields: ["TIDNUMB"],
displayField: "CAT_2",
exactMatch: false,
outFields: ["CAT_2", "OBJECTID", "NUMB", "TYPE", "TIDNUMB", "Meter", "PUMP_NAME", "GPM", "EC", "Lateral"],
name: "Pumps",
placeholder: "3708",
maxResults: 6,
maxSuggestions: 6,
enableSuggestions: true,
minCharacters: 0
});
s.set("sources", sources);
s.startup();
}
});
</script>
</head>
<body class="claro">
<div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%;height:100%;">
<div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">
Edit Irrigation Features
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width: 350px;overflow:hidden;">
<div id="search"></div>
<hr />
<div style="height:300px; overflow-y:scroll">
<div id="templateDiv"></div>
</div>
<div id="editorDiv"></div>
<hr/>
<div id="printButton"></div>
<hr />
<div id="drawingWrapper">
Add some graphics:
<div id="point" class="drawing">Point</div>
<div id="freehandpolyline" class="drawing">Freehand Polyline</div>
<div id="freehandpolygon" class="drawing">Freehand Polygon</div>
<div id="circle" class="drawing">Circle</div>
</div>
<hr />
<div id="layerToggle">
Toggle Layers: <br />
<div id="layerList"></div>
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>
