ArcGIS API for JavaScript 4.11 - an exercise

1030
1
04-24-2019 02:42 PM
Egge-Jan_Pollé
MVP Regular Contributor
1 1 1,030

Hi,

Currently I am preparing myself for the new Technical Certification ArcGIS API for JavaScript 19-001, working my way through the documentation: ArcGIS API for JavaScript | ArcGIS for Developers (Latest) (in this case: 4.11).

And I am sharing my first result here. Maybe no rocket science, but at least a working web map. You can see it in action here: ArcGIS API for JavaScript 4.11 Tutorial - Welcome to the Netherlands (source code shared below - all html, css and javascript in one file)

  • I managed to add some widgets: a Home button, a Search bar and a Basemap Gallery
  • The Search widget has a custom Locator to limit search results to the Netherlands only
  • Both the Search widget and the Basemap Gallery are collapsible (using the Expand widget)
  • The custom basemaps are in RD_New (EPSG: 28992) and are hosted by Esri Nederland 

I am not too unhappy with this first map. What do you think? Improvement suggestions are always welcome.

Egge-Jan

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css">
	<script src="https://js.arcgis.com/4.11/"></script>
    <title>ArcGIS API for JavaScript 4.11 Tutorial - Welcome to the Netherlands</title>
    <style>
      html, body, #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
	  
	  #titleDiv {
        font-weight: 400;
        font-style: normal;
        font-size: 2.4rem;
        padding: 10px;
      }
    </style>
	<script>
      require([
      	  "esri/Map",
      	  "esri/views/MapView",
		  "esri/geometry/Point",
          "esri/widgets/Home",
          "esri/widgets/Search",
		  "esri/tasks/Locator",
		  "esri/widgets/BasemapGallery",
		  "esri/widgets/BasemapGallery/support/LocalBasemapsSource",
		  "esri/widgets/Expand",
		  "esri/widgets/Zoom",
		  "esri/Basemap"
      	], function(Map, MapView, Point, Home, Search, Locator, BasemapGallery, LocalBasemapsSource, Expand, Zoom, Basemap) {
		
		var titleDiv = document.getElementById("titleDiv");
		
		var lightGrayCanvas_RD_EsriNL = new Basemap({
            portalItem: {id: "9ff6521e85d24df1aa9cd4aebfef748b"} //Lichtgrijze Canvas RD hosted by Esri Nederland
		});

		var darkGrayCanvas_RD_EsriNL = new Basemap({
            portalItem: {id: "62a3befb579e4d9f9c5c51576c8a7c25"} //Donkergrijze Canvas RD hosted by Esri Nederland
		});
		
		var topo_RD_EsriNL = new Basemap({
            portalItem: {id: "7aea6fa913a94176a1074edb40690318"} //Topo RD hosted by Esri Nederland
		});

		var open_Topo_RD_EsriNL = new Basemap({
            portalItem: {id: "0698b71eb7cf47898086d072e574ac32"} //Open Topo RD hosted by Esri Nederland
		});

		var luchtfoto_RD_EsriNL = new Basemap({
            portalItem: {id: "38e1a1c6ee2c421290622400d22ecf57"} //Luchtfoto RD hosted by Esri Nederland
		});
		
		var localBasemaps = new LocalBasemapsSource({
		  basemaps : [lightGrayCanvas_RD_EsriNL, darkGrayCanvas_RD_EsriNL, topo_RD_EsriNL, open_Topo_RD_EsriNL, luchtfoto_RD_EsriNL]
		});
		
	    var map = new Map({
      	  basemap: topo_RD_EsriNL
      	});
      
		var rdOrigin = new Point({
		  x: 155000,
		  y: 463000,
		  spatialReference: 28992
		});

      	var view = new MapView({
      	  spatialReference: 28992,
      	  map: map,
		  container: "viewDiv",
      	  center: rdOrigin,
      	  zoom: 3
      	});
		
		view.ui.empty("top-left"); //remove default Zoom Buttons to be able to add map title first

		view.ui.add(titleDiv, "top-left");
		
		var zoomBtns = new Zoom({
		  view: view
		});
		
		view.ui.add(zoomBtns, "top-left"); //add Zoom Buttons again underneath the map title

		var homeBtn = new Home({
          view: view
        });

        // Add the home button to the top left corner of the view
        view.ui.add(homeBtn, "top-left");

        var searchWidget = new Search({
		  container: document.createElement("div"),
          sources: [{
		    locator: new Locator({ url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"}),
			singleLineFieldName: "SingleLine", // This allows to search on the combination of Postal Code and House number, e.g. 4181 AE 38
		    countryCode:"NL", //use the default GeocodeServer, but limit the results to the Netherlands only
		    placeholder: "Adres of plaats zoeken"
	      }],
		  view: view,
		  includeDefaultSources: false
        });

		searchWidgetExpand = new Expand({
		  expandIconClass: "esri-icon-search", // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
		  expandTooltip: "Search", // optional, defaults to "Expand" for English locale
		  view: view,
		  content: searchWidget.domNode,
		  group: "top-right"
		});

        var basemapGallery = new BasemapGallery({
		  container: document.createElement("div"),
          view: view,
		  source: localBasemaps
        });

		basemapGalleryExpand = new Expand({
		  expandIconClass: "esri-icon-basemap",
		  expandTooltip: "Basemaps",
		  view: view,
		  content: basemapGallery.domNode,
		  group: "top-right"
		});

        // Add widgets to the top-right corner of the view
        view.ui.add([searchWidgetExpand, basemapGalleryExpand], "top-right");
		
      });
	</script>
  </head>
  <body>
    <div id="viewDiv">
	  <div id="titleDiv" class="esri-widget">
          Welkom in Nederland
      </div>
	</div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
1 Comment
About the Author
GIS Consultant at Avineon-Tensing