EPolle_TensingInternational

ArcGIS API for JavaScript 4.11 - an exercise

Blog Post created by EPolle_TensingInternational on Apr 24, 2019

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>

Outcomes