Latest Contributions by SergeDe_Backer

‎10-17-2019

sigh...Correct. Thanks Undral..now it works like a charm.. I used the .toFixed with a copy/paste of the sample code but read over it.

‎10-15-2019

Thank you for the link Dan. I am trying to comprehend it I have made a small sample which shows me the current coords in WGS84 format (lon/lat). I want them to show me the Lambert_72 coords but I get it to work. On every move of the mouse I do this var outSpatialReference = new SpatialReference({ wkid: 31370 //lambert }); var wgsPoints = new Point({ longitude: pt.latitude.toFixed(5), latitude: pt.longitude.toFixed(5) }) var projectedPoints = projection.project(wgsPoints, outSpatialReference); I create an outSpatialReference where I use the wkid for lambert. Then I get the point where the mousecursor is and put it in the projection with the function .project() --> Projects a geometry or an array of geometries to the specified output spatial reference. However I am not really sure about the result being correct since I get coords that don't seem te be correct. Could anyone see if the code is correct or if I am missing something? <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS JavaScript Tutorials: Select a basemap</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css"> <script src="https://js.arcgis.com/4.11/"></script> <script> require([ "esri/Map", "esri/request", "esri/views/MapView", "esri/layers/WMSLayer", "esri/Graphic", "esri/geometry/Polygon", "esri/symbols/SimpleFillSymbol", "esri/WebMap", "esri/geometry/projection", "esri/geometry/SpatialReference", "esri/geometry/Extent", "esri/geometry/Point" ], function (Map, esriRequest, MapView, WMSLayer, Graphic, Polygon, SimpleFillSymbol, WebMap, projection, SpatialReference, Extent, Point) { layer = new WMSLayer({ url: 'https://geoservices.informatievlaanderen.be/raadpleegdiensten/GRB-basiskaart/wms?' }); var url = "http://loc.geopunt.be/v2/location?" var map = new Map({ basemap: "topo-vector" //Dit is je basismap om in te lezen, }); map.add(layer); //Hier is de WMS layer die je erop "plakt" var view = new MapView({ container: "viewDiv", map: map, center: [4.474, 51.023], //lon, lat zoom: 20, }); const cs1 = new SpatialReference({ wkid: 4272 //PE_GCS_ED_1950 }); const cs2 = new SpatialReference({ wkid: 4167 }); const extent = new Extent({ xmin: -186.0, ymin: -42.0, xmax: -179.0, ymax: -38.0 }); projection.load().then(function (evt) { //const geogtrans = projection.getTransformations(cs1, cs2, extent); //geogtrans.forEach(function (geogtran, index) { // geogtran.steps.forEach(function (step, index) { // console.log("step wkid: ", step.wkid); // }); //}); }); var coordsWidget = document.createElement("div"); coordsWidget.id = "coordsWidget"; coordsWidget.className = "esri-widget esri-component"; coordsWidget.style.padding = "7px 15px 5px"; coordsWidget.style.width = "500px"; view.ui.add(coordsWidget, "bottom-right"); //*** Update lat, lon, zoom and scale ***// function showCoordinates(pt) { var outSpatialReferenceWebMercator = new SpatialReference({ "wkid": 3857}); var outSpatialReferenceLambert = new SpatialReference({ "wkid": 31370 }); var wgsPoints = new Point({ longitude: pt.latitude.toFixed(5), latitude: pt.longitude.toFixed(5) }) var projected3857 = []; var projected31370 = []; projected3857 = projection.project(wgsPoints, outSpatialReferenceWebMercator); projected31370 = projection.project(wgsPoints, outSpatialReferenceLambert); var coords = "Lat/Lon: " + pt.latitude.toFixed(5) + " " + pt.longitude.toFixed(5) + "</br> WebMercator: " + projected3857.x + " " + projected3857.y + "</br> Lambert: " + projected31370.x + " " + projected31370.y + "</br> Scale 1:" + Math.round(view.scale * 1) / 1 + " | Zoom " + view.zoom; coordsWidget.innerHTML = coords; } view.watch("stationary", function (isStationary) { showCoordinates(view.center); }); view.on("pointer-move", function (evt) { showCoordinates(view.toMap({ x: evt.x, y: evt.y })); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html> Kind regards

‎10-15-2019

Hello, Is it possible to convert the x an y coords from webmercator to lambert_72 (31370)? Kind regards, Serge

‎10-15-2019

Apparantly I used the wrong api to get the right ring coords.

‎10-12-2019

Hi Todd, Well I am now able to use the Lambert_72 coords by using the spatialReference wkid: 31370. However I have a small mismatch as you can see on the screenshot. kind regards

‎10-12-2019

Ok..I am a bit closer. I added the spatialReferen like this: var polygon = new Polygon({ rings: [ [157429.70069999993, 190033.62999999896], [157432.48480000347, 190037.28400000185], [157456.1977000013, 190068.42199999839], [157460.03270000219, 190073.45600000024], [157472.0196999982, 190089.19509999827], [157463.03480000049, 190096.19099999964], [157454.14069999754, 190084.39409999922], [157453.84179999679, 190083.99700000137], [157451.09969999641, 190080.36410000175], [157440.74469999969, 190066.81210000068], [157420.71779999882, 190040.58509999886], [157417.42369999737, 190036.27299999818], [157420.22770000249, 190033.54309999943], [157425.62669999897, 190028.28599999845], [157429.70069999993, 190033.62999999896] ], spatialReference: { wkid: 31370 } }); And that seems to work a bit but not completely tho...the drawing is off...It doesn't connect completely to the borders. Is it the map which is wrong? What could be the cause of this?

‎10-12-2019

Hello, I have a problem which needs an urgent solution (like the most of us I guess ). I live in Belgium which uses the Lambert_72 coords. In a nutshell: I use an API to get me the correct lambert_72 coords : http://loc.geopunt.be/v2/location?q=van%20benedenlaan%2032%20mechelen Then I use another API to get me the full geometry of that area (parcel): https://geoservices.informatievlaanderen.be/capakey/api/v1/parcel?type=json&x=157460.95&y=190082.14&data=cadmap&geometry=full In the 2nd call I get a nice json return: { "municipalityCode":"12025", "municipalityName":"Mechelen", "departmentCode":"12403", "departmentName":"MECHELEN 3 AFD", "sectionCode":"D", "perceelnummer":"0013/00A000", "capakey":"12403D0013/00A000", "grondnummer":"0013", "exponent":"A", "macht":"000", "bisnummer":"00", "adres":[ "Van Benedenlaan 32, 2800 Mechelen" ], "geometry":{ "boundingBox":"{\"coordinates\":[[[157417.42369999737,190028.28599999845],[157472.0196999982,190028.28599999845],[157472.0196999982,190096.19099999964],[157417.42369999737,190096.19099999964],[157417.42369999737,190028.28599999845]]],\"type\":\"Polygon\",\"crs\":{\"type\":\"link\",\"properties\":{\"href\":\"http://www.opengis.net/def/crs/EPSG/0/31370\"}}}", "center":"{\"coordinates\":[157444.72169999778,190062.23849999905],\"type\":\"Point\",\"crs\":{\"type\":\"link\",\"properties\":{\"href\":\"http://www.opengis.net/def/crs/EPSG/0/31370\"}}}", "shape":"{\"coordinates\":[[[157429.70069999993,190033.62999999896],[157432.48480000347,190037.28400000185],[157456.1977000013,190068.42199999839],[157460.03270000219,190073.45600000024],[157472.0196999982,190089.19509999827],[157463.03480000049,190096.19099999964],[157454.14069999754,190084.39409999922],[157453.84179999679,190083.99700000137],[157451.09969999641,190080.36410000175],[157440.74469999969,190066.81210000068],[157420.71779999882,190040.58509999886],[157417.42369999737,190036.27299999818],[157420.22770000249,190033.54309999943],[157425.62669999897,190028.28599999845],[157429.70069999993,190033.62999999896]]],\"type\":\"Polygon\",\"crs\":{\"type\":\"link\",\"properties\":{\"href\":\"http://www.opengis.net/def/crs/EPSG/0/31370\"}}}" }, "result":{ "succes":true, "startTimeStamp":"2019-10-12T08:46:26.8125961+00:00", "endTimeStamp":"2019-10-12T08:46:26.8907356+00:00", "elapsed":78 } } In this return I see boundingBox coords, centerCoords and shapeCoords. Now my goal is to draw a polygon using the shapeCoords (of boundingBox coords). However the values I get are Lambert_72 values which I can't get to work . I have made a testpage where I can see a point created to test if the drawing works and it does. But when I do the polygon using the Lambert_72 coords provided to me it won't draw at the location I expect. After some reading I read that the rings should be filled with lon/lat coords which I don't have. <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS JavaScript Tutorials: Display point, line, and polygon graphics</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css"> <script src="https://js.arcgis.com/4.12/"></script> <script> require([ "esri/WebMap", "esri/views/MapView", "esri/Graphic", "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol", "esri/geometry/Polygon", "esri/symbols/SimpleFillSymbol", "esri/layers/WMSLayer", ], function (WebMap, MapView, Graphic, Point, SimpleMarkerSymbol, Polygon, SimpleFillSymbol ) { var map = new WebMap({ portalItem: { id: "8047aff130794b7fbc991fd1ac12ecf7" } }); var view = new MapView({ container: "viewDiv", map: map, center: [4.475, 51.02], zoom: 5 }); // Create a point var point = new Point({ longitude: 4.4750893831806655, latitude: 51.020886794292629 }); // Create a symbol for drawing the point var markerSymbol = new SimpleMarkerSymbol({ color: [0, 0, 0], outline: { color: [255, 255, 255], width: 1 } }); // Create a graphic and add the geometry and symbol to it var pointGraphic = new Graphic({ geometry: point, symbol: markerSymbol }); view.graphics.add(pointGraphic); // Create a polygon geometry //Test coords var x = 4.4750893831806655 var y = 51.020886794292629 var polygon = new Polygon({ rings: [ [x, y], [x + 0.001, y + 0.001], [x + 0.003, y + 0.003], [x, y] ] }); // Create a symbol for rendering the graphic var fillSymbol = new SimpleFillSymbol({ color: [227, 139, 79, 0.8], outline: { color: [0, 0, 0], width: 1 } }); // Add the geometry and symbol to a new graphic var polygonGraphic = new Graphic({ geometry: polygon, symbol: fillSymbol }); // Add the graphic to the view view.graphics.add(polygonGraphic); });</script> </head> <body> <div id="viewDiv"></div> </body> </html> How can I solve this? Any help is appreciated. Kind regards, Serge

‎10-08-2019

Hello, I am using ArcGis JS 4.11 and my maps are made here on ArcGis Online: A WebMap FeatureLayers (hosted) I have a working sample where I use my WebMap and featurelayers, but it is soooo slow when I call the featurelayer. I use a query to get the featurelayer. It can be tested like this: navigate with search to for example: Veluwestraat 64 2800 Mechelen When you then click another address (for example 68 or so) a api call is made to get the capakey. With this capakey I then load in the featurelayer with a query. This click option only works in "Mechelen" because the FeatureLayer is a layer with the borders of the parcels. The code works, but it is just so slow. Is this normal or can I do something to make it faster? <!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://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://js.arcgis.com/4.11/"></script> <script> require([ "esri/Graphic", "esri/request", "esri/views/MapView", "esri/widgets/Search", "esri/widgets/Search/SearchSource", "esri/geometry/geometryEngine", "esri/geometry/Point", "esri/layers/WMSLayer", "esri/WebMap", "esri/layers/FeatureLayer" ], function ( Graphic, esriRequest, MapView, Search, SearchSource, geometryEngine, Point, WMSLayer, WebMap, FeatureLayer ) { var url = "http://loc.geopunt.be/v2/location?", layer = new WMSLayer({ url: 'https://geoservices.informatievlaanderen.be/raadpleegdiensten/GRB-basiskaart/wms' }); //*** ADD ***// var map = new WebMap({ portalItem: { id: "8047aff130794b7fbc991fd1ac12ecf7" } }); var featureLayer; var view = new MapView({ map: map, center: [4.3, 51], //lon, lat container: "viewDiv", scale: 288896 }); view.popup.viewModel.autoOpenEnabled = false; 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 }); searchWidget.on("select-result", function (event) { }); view.on("click", function (event) { map.remove(featureLayer); esriRequest(url, { query: "latlon=" + event.mapPoint.latitude + "," + event.mapPoint.longitude, responseType: "json" }).then(function (results) { var frslt = results.data.LocationResult[0]; $.ajax({ type: "GET", dataType: "json", cache: false, url: "http://geoservices.beta.informatievlaanderen.be/capakey/api/v2/parcel?x=" + frslt.Location.X_Lambert72 + "&y=" + frslt.Location.Y_Lambert72 + "&data=cadmap", success: function (data) { console.log(data); featureLayer = new FeatureLayer({ url: "https://services7.arcgis.com/c7P8EHq0LFjkXc7L/arcgis/rest/services/Percelen_Mechelen/FeatureServer", outFields: ["*"], // Return all fields so it can be queried client-side }); var sql; var queryCaPaKey = data.capakey; sql = "CAPAKEY = '" + queryCaPaKey + "'"; featureLayer.definitionExpression = sql map.add(featureLayer); }, error: function (err) { console.log(err); } }); }); }); // 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 Kind Regards, Serge

‎09-19-2019

Hello, I used ArcGis Online to create a map and I also created a layer which highlights all the different parts (gemeenten). I use the portalItem for the basemap and then the featureLayer for extra layer. In code I then use a SQL expression to filter out the correct part (gemeente) so it is highlighted on the map. However..I don't get the zoom option to work. I would like to zoom more in the highlighted part and get it centered on the page. I have tried with the zoom option on my MapView but that doesn't do the trick. Any help is appreciated. Here is the code so far: <!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([ //*** ADD ***// "esri/WebMap", "esri/views/MapView", "esri/widgets/ScaleBar", "esri/layers/FeatureLayer" ], function (WebMap, MapView, ScaleBar, FeatureLayer) { //*** ADD ***// var map = new WebMap({ portalItem: { id: "8047aff130794b7fbc991fd1ac12ecf7" } }); var featureLayer = new FeatureLayer({ url: "https://services7.arcgis.com/c7P8EHq0LFjkXc7L/arcgis/rest/services/Shapefile_Gemeente/FeatureServer", outFields: ["*"], // Return all fields so it can be queried client-side, opacity:1 }); var sql = "NISCODE like '46014'"; featureLayer.definitionExpression = sql map.add(featureLayer); //*** ADD ***// var view = new MapView({ container: "viewDiv", map: map, }); //SCALEBAR// var scalebar = new ScaleBar({ view: view, unit: 'metric' }); view.ui.add(scalebar, "bottom-left"); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

‎09-17-2019

Hoi Egge-Jan, Ik probeer dit allemaal wat beter te begrijpen, maar ik heb er toch wat moeilijkheden mee. Hoe krijg ik net als jij dat enkel België zichtbaar is en niet de rest? Je begint met een basemap waarbij de verwijst naar een PoralId (Topo RD), maar waar haal je die info vandaan? Als ik dan in de docs wat lees vind ik dit: PortalItem | ArcGIS API for JavaScript 4.12 maar waar/wat is die portal? Enige hulp met dit alles is welkom om me op het juiste pad te zetten. Eventueel via mail mocht je willen (sergedb(at)gmail). Huidige 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?", 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: 8, 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); $beheeraanvragen.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; $beheeraanvragen.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>

‎06-26-2019

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.

‎06-25-2019

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

‎06-25-2019

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

‎06-25-2019

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

‎06-07-2019

Thanks Robert, spot on.

Online Status	Offline
Date Last Visited	‎11-11-2020 02:24 AM

My Ideas

Latest Contributions by SergeDe_Backer

Re: Convert webmercator to lambert_72

Re: Convert webmercator to lambert_72

Convert webmercator to lambert_72

Re: Polygon drawing with Lambert_72 values doen't match

Re: Polygon drawing with Lambert_72 values not working - urgent :(

Re: Polygon drawing with Lambert_72 values not working - urgent :(

Polygon drawing with Lambert_72 values doen't match

Very slow FeatureLayer

Problems with zoom and centering

Re: Aan de slag met ArcGIS JavaScript - Nederlandse basiskaartgalerij

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

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

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

Map works in Chrome not in Edge, IE or FF

Re: Reversegeocoding

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

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

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

Re: Aan de slag met ArcGIS JavaScript - Nederlands...