Thanks Christian.
See the full code below. Using the search to search for an address, the search result should have a red graphic point and a popup window.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>DevLabs - Search and Geocode</title>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#viewDiv {
padding: 0;
margin: 0;
height: 80%;
width: 60%;
}
#instruction {
padding: 15px;
background: white;
color: black;
border: 5px solid gold;
font-family: sans-serif;
font-size: 1.2em;
}
#instruction2 {
width: 60%;
margin-top: 4px;
}
#getLocBtn {
float: left;
margin-top: 4px;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Search",
"esri/layers/FeatureLayer",
"esri/widgets/Locate",
"esri/Graphic",
"dojo/domReady!"
], function(Map, MapView, Search, Graphic, FeatureLayer, Locate) {
var map = new Map({
basemap: "topo"
});
// Add the layer to the map
//map.add(trailsLayer); // Optionally add layer to map
var view = new MapView({
container: "viewDiv",
map: map,
center: [-0.14718, 51.51161],
zoom: 17
});
// Search
var search = new Search({
view: view
});
search.defaultSource.withinViewEnabled = false; // Limit search to visible map area only
view.ui.add(search, "top-right"); // Add to the map
// Add instruction to the map
view.ui.add("instruction", "bottom-left")
// Find address
var simpleMarkerSymbol = {
type: "simple-marker",
color: [226, 119, 40], // orange
outline: {
color: [255, 255, 255], // white
width: 1
}
};
var pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol
});
view.graphics.add(pointGraphic);
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,
actions: [{
id: "find-brewery",
image: "beer.png",
title: "get xy"
}]
});
}
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);
});
});
view.on("click", function (event) {
view.popup
.fetchFeatures(event.screenPoint)
.then(function (response) {
console.log(response);
// Access the response from fetchFeatures
response.allGraphicsPromise.then(function (graphics) {
// Set the feature widget's graphic to the returned graphic from fetchFeatures
console.log(graphics[0]);
});
});
view.popup.open({
location: event.mapPoint,
});
});
});</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="instruction">
Click on the map to retrieve coordinates and address
</div>
</body>
</html>