I am working with Esri Map. When I tried to load json data on the map, I discovered that Word findAddressCandidates is appended to the url when view from the console. So instead having http://localhost/data.json and am having http://localhost/data.json/findAddressCandidates
How do I remove findAddressCandidates from the URL so that I can have http://localhost/data.json?
Some Stack Overflow engineers suggests the use of History API as per this source.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS API for JavaScript Tutorials: Find places</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.20/"></script>
<script>
require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/tasks/Locator",
"esri/Graphic"
], function(esriConfig,Map, MapView, Locator, Graphic) {
esriConfig.apiKey = "my api key";
const map = new Map({
basemap: "arcgis-navigation"
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [18.9553, 69.6492], //Longitude, latitude
zoom: 13
});
const places = ["Choose a place type...", "Parks and Outdoors", "Coffee shop", "Gas station", "Food", "Hotel"];
const select = document.createElement("select","");
select.setAttribute("class", "esri-widget esri-select");
select.setAttribute("style", "width: 175px; font-family: 'Avenir Next W00'; font-size: 1em");
places.forEach(function(p){
const option = document.createElement("option");
option.value = p;
option.innerHTML = p;
select.appendChild(option);
});
view.ui.add(select, "top-right");
const locator = new Locator({
url: "http://localhost/data.json"
});
// Find places and add them to the map
function findPlaces(pt) {
locator.addressToLocations({
location: pt,
maxLocations: 25,
outFields: ["Place_addr", "PlaceName"]
})
.then(function(results) {
view.popup.close();
view.graphics.removeAll();
results.forEach(function(result){
view.graphics.add(
new Graphic({
attributes: result.attributes, // Data attributes returned
geometry: result.location, // Point returned
symbol: {
type: "simple-marker",
color: "#000000",
size: "12px",
outline: {
color: "#ffffff",
width: "2px"
}
},
popupTemplate: {
title: "{PlaceName}", // Data attribute names
content: "{Place_addr}"
}
}));
});
});
}
// Search for places in center of map
view.watch("stationary", function(val) {
if (val) {
findPlaces(select.value, view.center);
}
});
// Listen for category changes and find places
select.addEventListener('change', function (event) {
findPlaces(event.target.value, view.center);
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
