Hi All,
Need help to achieve the following
What works at the moment, you click on a map and it returns the coordinates of that location
You do a search and it returns a popup info.
I would like to click on the map using a graphic point
Also when the search result is on the map, I want the graphic point to be used.
I have the graphic symbol in the code, not sure how to use it on the locator and evt.mapPoint.
Thanks in advance
*****************************************************************************************
function(Map, MapView, Search, Graphic, FeatureLayer) {
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);
});
});
});</script>
