I had to comment out the esri/widgets/Search" to get the map to show in the browser. The below is the basic widget code and functions, I had to comment out a number of items so the map would display. The featurlayer will display but I get no functionality.
require([
"esri/Map",
"esri/views/MapView",
//"esri/widgets/Search",
"esri/layers/FeatureLayer",
"esri/renderers/UniqueValueRenderer",
"esri/symbols/SimpleLineSymbol",
"esri/renderers/ClassBreaksRenderer",
"dojo/dom",
"dojo/domReady!"
], function(
Map,
MapView,
FeatureLayer,
UniqueValueRenderer,
SimpleLineSymbol,
ClassBreaksRenderer,
Search,
domStyle,
dom
) {
// *location of webservice for the click query*
var layer = new FeatureLayer({
url: " REMOVED URL ",
outFields: ["*"]
});
// *Base layer selection, change to open Street or other*
var map = new Map({
basemap: "streets",
layers: [layer]
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-122.992, 45.524],
zoom: 10
});
// Search widget
//var search = new Search({
//view: view
//});
//search.defaultSource.withinViewEnabled = false; // NO Limit search to visible map area
//view.ui.add(search, {position: "top-left", index: 0
//}); // Add to the view
// *Load camera layer*
map.add(layer);
view.ui.add("info", "top-right");
// *Set up a click event handler and retrieve the screen x, y coordinates*
view.on("click", function(evt) {
var screenPoint = {
x: evt.x,
y: evt.y
};
dom.byId("info").style.visibility = "hidden";
// *the hitTest() checks to see if any graphics in the view*
// *intersect the given screen x, y coordinates*
console.log(layer);
view.graphics.forEach(function(item, i){
console.log(i);
});
view.hitTest(screenPoint)
.then(getGraphics);
});
// function showPopup(address, pt) {
// view.popup.open({
// title: "Find Address Result",
// content: address + "<br><br> Lat: " + Math.round(pt.latitude * 100000)/100000 + " Lon: " + Math.round(pt.longitude * 100000)/100000,
// location: pt
// });
// }
// view.on("click", function(evt){
// search.clear();
// view.popup.clear();
// var locatorSource = search.defaultSource;
// locatorSource.locator.locationToAddress(evt.mapPoint)
// .then(function(response) {
// var address = response.address.Match_addr;
// *Show the address found*
// showPopup(address, evt.mapPoint);
// }, function(err) {
// *Show no address found*
// showPopup("No address found for this location.", evt.mapPoint);
// });
function getGraphics(response) {
// *the topmost graphic from the click location*
// *and display select attribute values from the*
// *graphic to the user*
var graphic = response.results[0].graphic;
var attributes = graphic.attributes;
console.log(response);
//* fields to be shown by query*
dom.byId("info").style.visibility = "visible";
dom.byId("contact").innerHTML = attributes.contactnam + "<br>" + attributes.Match_addr + "<br>" + attributes.phone + "<br>" + attributes.email;
dom.byId("areas").innerHTML = attributes.areas;
dom.byId("hours").innerHTML = attributes.camhrs;
dom.byId("additional").innerHTML = attributes.otherinfo;
// *symbolize all line segments with the given*
// *storm name with the same symbol*
}
view.then(function() {
layer.then(function() {
// *update the default renderer's*
// *The controls the webservice layer of interest*
// *symbol when the layer loads*
var renderer = layer.renderer.clone();
renderer.symbol.width = 4;
renderer.symbol.color = [128, 128, 128, 0.8];
renderer.symbol.cap = "round";
layer.renderer = renderer;
});
});
});
