<\/A>https:\/\/community.esri.com\/people\/EPolle_TensingInternational\/blog\/2019\/06\/02\/aan-de-slag-met-arcgis-javascript-inleiding<\/A><\/P><\/P>
<\/P>
We will add a basemap gallery using a
These are the 6 basemaps from Esri Netherlands that we will put in our basemap gallery in this exercise - but of course you can adjust this list yourself with other basemaps. In the script, the maps are called by their unique id<\/SPAN>:<\/P>
<\/-P>
The source code is below.
Oh yes, our basemap gallery now takes up a lot of space on the screen. In a next exercise we will see how to collapse a widget and hide it under a button.<\/-P>
Follow-up exercises:<\/-STRONG>
<!DOCTYPE html>
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>
<!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>
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
