topic Re: Map works in Chrome not in Edge, IE or FF in ArcGIS JavaScript Maps SDK Questions

Map works in Chrome not in Edge, IE or FF

SergeDe_Backer — Tue, 25 Jun 2019 11:00:26 GMT

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

Re: Map works in Chrome not in Edge, IE or FF

Egge-Jan_Pollé — Tue, 25 Jun 2019 13:09:46 GMT

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 🙂

Re: Map works in Chrome not in Edge, IE or FF

SergeDe_Backer — Tue, 25 Jun 2019 14:00:02 GMT

Hi Egge-Jan,

I got it to work. I have updated the source code in my first post for others to see. It was a mismatch of the enpoint of the locator. I changed it a bit and now it's working as it should.

The reason I use that locator because I need the correct point of the parcel (perceel). I also get the same address suggestions like the GeoCodeServer now it's working. For more info about this flemish locator see this pp: https://www.geopunt.be/~/media/geopunt/over%20geopunt/documenten/geopunt%20api.pdf page 19.

Thank you for the nice example. I will use some of the features you use like the home button and the compass widget.

Serge

Re: Map works in Chrome not in Edge, IE or FF

Egge-Jan_Pollé — Tue, 25 Jun 2019 14:31:41 GMT

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.

Re: Map works in Chrome not in Edge, IE or FF

ReneRubalcava — Tue, 25 Jun 2019 19:55:10 GMT

I know you already got this figured out, but I thought I should point out that the geocoder service has a locationType parameter described in the docs.

https://developers.arcgis.com/rest/geocode/api-reference/geocoding-find-address-candidates.htm

Specifies if the output geometry of PointAddress matches should be the rooftop point or street entrance location. Valid values are rooftop and street. The default value is street.

This is pretty useful for a use case like yours for map display. Street is normally preferred for routing purposes.

Re: Map works in Chrome not in Edge, IE or FF

SergeDe_Backer — Wed, 26 Jun 2019 06:51:23 GMT

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

Re: Map works in Chrome not in Edge, IE or FF

SergeDe_Backer — Wed, 26 Jun 2019 07:18:07 GMT

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.