AnsweredAssumed Answered

Map works in Chrome not in Edge, IE or FF

Question asked by Sergedb on Jun 25, 2019
Latest reply on Jun 26, 2019 by Sergedb

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

Outcomes