Hello,
I have a working example for search a location in Belgium. This works in Chrome, but somehow it doesn't seem to work in IE or Edge.
For the locator I use this provider: https://loc.api.geopunt.be/geolocation/location
When I test it on Chrome and check the network tab in devtools I see the request and response of the call:
But when checking Edge for example I get nothing back:
I have tried another example which I found here on the forums: https://twiav.nl/cursus/arcgis/javascript/cursus_arcgis_javascript_adres_zoeken.htm and here it works on all browsertypes. But I can't seem to find where the problem lies.
This is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Search widget with custom source - 4.11</title>
<style>html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet"
href="https://js.arcgis.com/4.11/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require([
"esri/tasks/Locator",
"esri/Map",
"esri/Graphic",
"esri/request",
"esri/views/MapView",
"esri/widgets/Search",
"esri/widgets/Search/SearchSource",
"esri/geometry/geometryEngine",
"esri/geometry/Point",
"esri/layers/WMSLayer",
"esri/widgets/Compass",
"esri/widgets/Home"
], function (
Locator,
Map,
Graphic,
esriRequest,
MapView,
Search,
SearchSource,
geometryEngine,
Point,
WMSLayer,
Compass,
Home
) {
var url = "http://loc.geopunt.be/v2/location?c=5",layer = new WMSLayer({
url: 'https://geoservices.informatievlaanderen.be/raadpleegdiensten/GRB-basiskaart/wms'
});var map = new Map({
basemap: "gray"
});map.add(layer);
var view = new MapView({
map: map,
center: [4.3, 51], //lon, lat
zoom: 9,
container: "viewDiv"
});
var homeWidget = new Home({
view: view
});view.ui.add(homeWidget, "top-left");
var compass = new Compass({
view: view
});view.ui.add(compass, "top-left");
var customSearchSource = new SearchSource({
name: "Vlaanderen zoekopdracht",
placeholder: "Geef je straatnaam in",
displayField: "name",
// Provide a getSuggestions method
// to provide suggestions to the Search widget
getSuggestions: function (params) {
// You can request data from a
// third-party source to find some
// suggestions with provided suggestTerm
// the user types in the Search widget
return esriRequest(url, {
query: {
q: params.suggestTerm
},
responseType: "json"
}).then(function (results) {
// Return Suggestion results to display
// in the Search widget
return results.data.LocationResult.map(function (item) {
return {
key: "name",
text: item.FormattedAddress,
sourceIndex: params.sourceIndex
};
});
});
},
// Provide a getResults method to find
// results from the suggestions
getResults: function (params) {
// If the Search widget passes the current location,
// you can use this in your own custom source
var operation = "&q=" + params.suggestResult.text.replace(/ /g, "+") ;
var query = {};
// You can perform a different query if a location
// is provided
if (params.location) {
query.lat = params.location.latitude;
query.lon = params.location.longitude;
} else {
query.q = params.suggestResult.text.replace(/ /g, "+");
}
return esriRequest(url + operation, {
query: query,
responseType: "json"
}).then(function (results) {
// Parse the results of your custom search
var searchResults = results.data.LocationResult.map(function (feature) {
// Create a Graphic the Search widget can display
var graphic = new Graphic({
geometry: new Point({
x: feature.Location.Lon_WGS84,
y: feature.Location.Lat_WGS84
}),
attributes: feature
});
// Optionally, you can provide an extent for
// a point result, so the view can zoom to it
var buffer = geometryEngine.geodesicBuffer(
graphic.geometry,
50,
"meters"
);
// Return a Search Result
var searchResult = {
extent: buffer.extent,
feature: graphic,
name: feature.FormattedAddress
};
return searchResult;
});// Return an array of Search Results
return searchResults;
});
}
});// Create Search widget using custom SearchSource
var searchWidget = new Search({
view: view,
sources: [customSearchSource],
includeDefaultSources: false
});//Wanneer er gezocht moet worden kan je hier de waarde uithalen
searchWidget.on("select-result", function (event) {
// event is the event handle returned after the event fires.
console.log(event.target.selectedResult.name);
$admin.getKadastrale(event.target.selectedResult.name, false);
});view.on("click", function (event) {
view.popup.clear();
view.popup.content = "Opzoeken adres...";
// Haal de co�rdinaten van het aangeklikte punt op
var rdx = Math.round(event.mapPoint.x);
var rdy = Math.round(event.mapPoint.y);view.popup.open({
// Toon de gevonden RD co�rdinaten in de titel van de popup. De co�rdinaten worden
// afgerond op hele meters en er wordt een punt geplaatst tussen de duizendtallen
//title: "RD Coordinaten: X = " + rdx.toLocaleString() + " / Y = " + rdy.toLocaleString(),
location: event.mapPoint // Plaats de popup op de aangeklikte locatie
});esriRequest(url, {
query: "latlon=" + event.mapPoint.latitude + "," +
event.mapPoint.longitude,
responseType: "json"
}).then(function (results) {var frslt = results.data.LocationResult[0];
console.info(frslt);
view.popup.content = frslt.FormattedAddress;
$admin.getKadastrale(frslt.FormattedAddress, false);
//view.popup.title = frslt.Location.Lat_WGS84 + ", " + frslt.Location.Lon_WGS84
});});
// 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>
Any help is appreciated.
Serge
Accepted Solutions
Hi Serge De Backer,
Hmmm, I don't get your example with the custom Locator running, not in IE, nor in FF or Chrome. I don't know how to find an address in Belgium with your application... And when I follow the link to the provider you are using (https://loc.api.geopunt.be/geolocation/location), my browser stops me from doing so because of possible security issues. It remains a challenge to get your custom Locator running.
So, why don't you just use Esri's World GeocodeServer? You mentioned the disadvantage of the address points falling outside the actual building footprints (see screen capture below). But there are also a lot of advantages, like easy and straightforward implementation and the provision of suggestions while typing your address (see also screen capture below).
I quickly created a little example application for testing purposes: Aan de slag met ArcGIS JavaScript - Vlaanderen (please feel free to check and modify the source code).
I would be interested to see your final solution working.
Met vriendelijke groet,
Egge-Jan
Flanders upside down:
- Right-click and drag to rotate your map
- Use to Compass widget to turn it back 🙂
Hi Serge De Backer,
Cool! I did some testing and yes, it works now, even in Internet Explorer...!! So, I guess you should mark your own answer above as correct to close this call. (Yes, you solved your own issue so you should be allowed to mark your own answer as the correct one...)
A few test results:
- The number of suggestions (just one) is quite limited. Could this be increased to 5 or 6?
- After finding and showing the right address, the search box shows a message that it could not find any results (see screen capture below). Would it be possible to suppress this message?
- (The WMS layer is not showing in IE 11 - Version: 11.557.17763.0)
Cheers,
Egge-Jan
BTW - If you think an answer you see on GeoNet is useful, do not hesitate to mark it as such. This will help the community to find not only the correct answer, but also other useful information.
Extending the number of suggestions is no problem. I can do this with adding "c=5" to the url like so: var url = "http://loc.geopunt.be/v2/location?c=5". I have updated the main code with this and with your compass and home button 
Surpressing the messagebox however is something I have not yet found.
Hi Rene,
well I used the example from Egge-Jan and changed to locator to this
locator: new Locator({ url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/?locationType=rooftop"}),
This works but when the result is clear it still gives me 6 suggestions even when the address is fully filled in
