IWEB Notes - Basic web mapping app described

1181
0
02-09-2017 11:31 AM

IWEB Notes - Basic web mapping app described

Learning aid for the Introduction to Web Development Using ArcGIS API for JavaScript (IWEB) instructor-led course.

See IWEB Notes - Basic web page described for additional information.

General References:

Basic web mapping application

Reference: Get started with MapView - Create a 2D map 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>Get started with MapView - Create a 2D map - 4.2</title>

    <!-- Load stylesheets -->
    <link rel="stylesheet" 

href="https://js.arcgis.com/4.2/dijit/themes/claro/claro.css">

    <!-- Load JS API required stylesheet -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">

    <!-- Apply any page specific styles -->
    <!-- Note: these CSS settings cause the map to fill the browser window -->

    <style>
      html,
      body,
      #viewDiv {
        height: 100%;
        width: 100%;
        padding: 0;
        border: 0;
        margin: 0;
        text-family: "Tahoma","Helvetica",sans-serif;
      }
    </style>

    <!-- Configure Dojo for asynchronous mode - must be done before loading ArcGIS JS 

API -->
    <script>
      var dojoConfig = {
        async : true
      }
    </script>

    <!-- Load/reference the JS API -->
    <script src="https://js.arcgis.com/4.2/"></script>

    <!-- Load/reference application specific javascript files -->

    <!-- Load the required modules and build the map -->
    <script>
      require([
        "esri/Map",
        "esri/views/MapView",

        "dojo/domReady!"
      ], function(
        Map,
        MapView
      ) { //TOP of REQUIRE

        // create the map
        var map = new Map({
          basemap: "streets"
        });

        // create the 2D view
        var view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 4,
          center: [15, 65]
        });

      }); // BOTTOM of REQUIRE
    </script>

  </head>
  <body class="claro">

    <div id="viewDiv"></div>

  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">

First of two resources required to build web mapping applications using the JavaScript API. main.css contains necessary styling for API components. Failing to request main.css causes your app to behave in unusual ways.

References:

Necessary styling to fill the page

<style>
  html,  
  body,
  #viewDiv {
    height: 100%;
    width: 100%;
    padding: 0;
    border: 0;
    margin: 0;
  }
</style>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The CSS properties on the <html>, <body> and map's container element (usually a <div> identified by its id attribute) determine how much of the web page is filled by the map. Styling all three is required. Defining the styles for any single or pair of elements will only fill half the page. 

<script> var dojoConfig = { async : true } </script>

Switches the AMD loader to asynchronous mode. Dojo provides the module loading functionality for the ArcGIS JavaScript API, specifically the AMD loader. By default, the AMD loader is synchronous in order to maintain backwards compatibility. You switch to asynchronous mode by setting the async flag before the ArcGIS JavaScript API is loaded. Loading the API also loads Dojo. The statement above defines a global JavaScript variable, the dojoConfig object. The parameters specified in the dojoConfig object are meant to over-ride the default settings.

References:

<script src="https://js.arcgis.com/4.3/"></script>

The second of the two resources required to build web mapping applications using the JavaScript API. This line loads the JavaScript API.

References:

<script> require( [...], function(...){...} );</script>

The require statement loads the JavaScript API modules used in the application. The require statement consists of three parts:

  • An array of modules used in the application. The modules are referenced as strings, each string providing the path to and name of the module.
  • An anonymous function whose parameters are a list of aliases corresponding to the list of modules. 
  • The application code. This is the JavaScript API code.

As each module is loaded, it is executed and the resultant object is assigned the alias specified in the anonymous function parameter list. Order is important. The modules and aliases must be in the same order or the application will behave in unusual ways. In the example below, the "esri/Map" module is loaded, executed and assigned the alias "Map" which is used in the anonymous function's code block to create an instance of a map. (Open the code in Sandbox)

<script>
  require([
    "esri/Map",
    "esri/views/MapView",

    "dojo/domReady!"
  ], function(
    Map,
    MapView
  ) { //TOP of REQUIRE

    /*
     *
     * Application code
     *
     */

  }); // BOTTOM of REQUIRE
</script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Tip: Add a comment to mark the closing right brace-right parenthesis ( }); ). It's not unusual to have several right brace-right parenthesis pairs at the end of the code block. Losing track of which is which, having too few or too many is a common coding error, easily remedied by add a comment.

References:

Dojo Toolkit > Tutorials > Hello Dojo!

Dojo Toolkit > Tutorials > Modern Dojo

"dojo/domReady!"

domReady is a loader plug-in (signified by the exclamation point). It's purpose is to block the execution of the require statement's anonymous function until after the document object model is built in memory.

References:

Version history
Last update:
‎12-12-2021 03:47 AM
Updated by: