I have added the locator with the two feature Layers and doesn't seem to be working. Thanks in advance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Search Widget 3D - 4.4</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/widgets/Search",
"esri/layers/FeatureLayer",
"esri/symbols/PictureMarkerSymbol",
"esri/config",
"dojo/domReady!"
], function (
Map,
SceneView,
Search, FeatureLayer, PictureMarkerSymbol, esriConfig) {
esriConfig.request.corsEnabledServers.push("cdn4.iconfinder.com");
var map = new Map({
basemap: "satellite",
ground: "world-elevation"
});
var view = new SceneView({
scale: 123456789,
container: "viewDiv",
map: map
});
var locatorUrl = new Locator({
popupTemplate: { // autocasts as new popupTemplate()
title: "Post Code: ${Postcode}</br>UPRN: ${UPRN}</br>ADDRESS: ${ADDRESS}",
overwriteActions: true
}
})
var featureSource1 = new FeatureLayer({
popupTemplate: { // autocasts as new popupTemplate()
title: "Post Code: ${Postcode}</br>UPRN: ${UPRN}</br>ADDRESS: ${ADDRESS}",
overwriteActions: true
}
})
var featureSource2 = new FeatureLayer({
popupTemplate: { // autocasts as new popupTemplate()
title: "Post Code: ${Postcode_3}</br>Wards Name: ${Ward_Name}</br>Ward: ${Ward_Code}",
overwriteActions: true
}
})
var searchWidget = new Search({
view: view,
sources: [
{
//Pass in the custom locator to the sources
locator: new Locator(locatorUrl),
singleLineFieldName: "DataID",
outFields: ["Match_addr"],
name: "Address_search",
//Create an InfoTemplate
infoTemplate: new InfoTemplate("DataID", "ID: ${Match_addr}")
}
{
featureLayer: featureSource1,
searchFields: ["Postcode", "UPRN"],
displayField: "Postcode",
exactMatch: false,
outFields: ["*"],
name: "Postcode",
placeholder: "example: CM2 0HU",
resultSymbol: new PictureMarkerSymbol({
height: 36,
width: 36
})
},
{
featureLayer: featureSource2,
searchFields: ["Postcode_3", "Ward_Name"],
name: "PostCode",
exactMatch: false,
displayField: "Postcode_3",
placeholder: "example: ...",
outFields: ["*"]
}]
});
console.log(document.getElementById("submitButton"))
document.getElementById("submitButton").onclick = (e) => {
e.preventDefault()
let el = document.getElementById("input")
console.log(el.value)
searchWidget.search(el.value).then((result) => {
console.log("result", result)
})
}
});
</script>
</head>
<body>
<div>
<form>
<input placeholder="Enter your address" type="text" id="input">
<button id="submitButton">Submit</button>
</form>
</div>
<div id="viewDiv"></div>
</body>
</html>
