Is there something similar to the District Lookup Widget you can use with the JavaScript SDK?
I'd like to search an address and display the features of a hosted feature layer. Using the Search widget with multiple sources example , it allows me to search by features of a feature layer, however this requires the user to know what to look for. I'm looking enter an address to get the feature and its attributes--something similar to the District Lookup Widget.
This is what I currently have using the search widget.
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Access Will County</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.27/"></script>
<script>
require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/widgets/Search"], (
Map,
MapView,
FeatureLayer,
Search
) => {
const map = new Map({
basemap: "dark-gray-vector"
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-88, 41.5], // lon, lat
scale: 1000000
});
const featureLayerService = new FeatureLayer({
url:
"https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/DialARide_Service_Areas/FeatureServer",
popupTemplate: {
// autocasts as new PopupTemplate()
title: "Service Area: {Service}",
overwriteActions: true
}
});
const searchWidget = new Search({
view: view,
// allPlaceholder: "Search",
searchAllEnabled: false,
includeDefaultSources: false,
sources: [
{
name: "Search by address",
placeholder: "search by address",
apiKey: "Your API Key Here",
singleLineFieldName: "SingleLine",
url: "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"
},
{
layer: featureLayerService,
searchFields: ["Service"],
displayField: "Service",
exactMatch: false,
outFields: ["Service"],
name: "Search by Service Area",
placeholder: "example: Will Ride"
}
]
});
// Add the search widget to the top left corner of the view
view.ui.add(searchWidget, {
position: "top-right"
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
