Ctrl+K

Introduction to ArcGIS JS API

9. Introduction to ArcGIS JS API#

The ArcGIS JavaScript API is a powerful tool for building interactive web maps and geographic information system (GIS) applications.

This tutorial will guide you through the basics of using the ArcGIS JavaScript API, including setting up your development environment, creating a simple map, adding layers, and working with spatial data.

9.1. Setting Up Your Development Environment#

Create a new HTML file (e.g., index.html) and open it in your favorite text editor, and include the ArcGIS JavaScript API in your HTML file by adding the following lines within the <head> section:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ArcGIS JavaScript API Tutorial</title>
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.25/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.25/"></script>
  </head>
  <body>
    <div id="viewDiv" style="height: 100vh;"></div>
    <script>
      require(["esri/Map", "esri/views/MapView"], function (Map, MapView) {
        // Your code will go here
      });
    </script>
  </body>
</html>

9.2. Creating a Basic Map#

9.2.1. Initialize the Map#

Within the <script> tag, initialize a new map by creating an instance of the Map class:

var map = new Map({
  basemap: "topo-vector", // Basemap layer service
});

9.2.2. Create a MapView#

Next, create a MapView to display the map. This defines the center and zoom level of the map:

var view = new MapView({
  container: "viewDiv", // Reference to the scene div created in step 1
  map: map, // Reference to the map object created before the view
  center: [-118.805, 34.027], // Longitude, latitude
  zoom: 13, // Zoom level
});

9.3. Add Points, Lines, and Polygons#

9.3.1. Adding a Point#

  • Point Geometry: Defines the location of the point.

  • Marker Symbol: Customizes the point’s appearance with color and outline.

  • Popup Template: Specifies the template for pop-up information displayed when the graphic is clicked.

  • Attributes: Contains data attributes to be displayed in the popup.

  • Graphic Object: Combines geometry, symbol, and attributes into a graphic, which is then added to the graphics layer.

    const point = {
  type: "point",
  longitude: -118.80657463861,
  latitude: 34.0005930608889,
};

const simpleMarkerSymbol = {
  type: "simple-marker",
  color: [226, 119, 40], // Orange
  outline: {
    color: [255, 255, 255], // White
    width: 1,
  },
};

const popupTemplate = {
  title: "{Name}",
  content: "{Description}",
};

const pointAttribute = {
  Name: "Points",
  Description: "It's a sample Point",
};

const pointGraphic = new Graphic({
  geometry: point,
  symbol: simpleMarkerSymbol,
  popupTemplate: popupTemplate,
  attributes: pointAttribute,
});
graphicsLayer.add(pointGraphic);

9.3.2. Adding a Line#

  • Polyline Geometry: Defines the vertices of the line.

  • Line Symbol: Customizes the line’s appearance with color and width.

    const polyline = {
  type: "polyline",
  paths: [
    [-118.821527826096, 34.0139576938577],
    [-118.814893761649, 34.0080602407843],
    [-118.808878330345, 34.0016642996246],
  ],
};

const simpleLineSymbol = {
  type: "simple-line",
  color: [226, 119, 40], // Orange
  width: 2,
};

const lineAttribute = {
  Name: "Lines",
  Description: "It's a sample line",
};

const polylineGraphic = new Graphic({
  geometry: polyline,
  symbol: simpleLineSymbol,
  popupTemplate: popupTemplate,
  attributes: lineAttribute,
});
graphicsLayer.add(polylineGraphic);

9.3.3. Adding a Polygon#

  • Polygon Geometry: Defines the vertices of the polygon.

  • Fill Symbol: Customizes the polygon’s appearance with color, opacity, and outline.

    const polygon = {
  type: "polygon",
  rings: [
    [-118.818984489994, 34.0137559967283],
    [-118.806796597377, 34.0215816298725],
    [-118.791432890735, 34.0163883241613],
    [-118.79596686535, 34.008564864635],
    [-118.808558110679, 34.0035027131376],
  ],
};

const simpleFillSymbol = {
  type: "simple-fill",
  color: [227, 139, 79, 0.8], // Orange, opacity 80%
  outline: {
    color: [255, 255, 255],
    width: 1,
  },
};

const polygonAttributes = {
  Name: "Graphic",
  Description: "I am a polygon",
};

const polygonGraphic = new Graphic({
  geometry: polygon,
  symbol: simpleFillSymbol,
  attributes: polygonAttributes,
  popupTemplate: popupTemplate,
});
graphicsLayer.add(polygonGraphic);

9.4. Host Web Layers#

In this section, we will explore how to host web layers using the ArcGIS Maps SDK for JavaScript.

9.4.1. WebMap#

The WebMap class is used to create and manipulate web maps.

  • A web map is a configuration of layers, styles, and other settings that can be shared and accessed via a web service.

  • In this script, multiple WebMap instances are created using unique web map IDs.

    • Constructor Parameters: The WebMap constructor takes an object with a portalItem property.

    • portalItem: This is an object that specifies the ID of the web map stored in the ArcGIS Online portal.

    const webmaps = webmapids.map((webmapid) => {
  return new WebMap({
    portalItem: {
      id: webmapid,
    },
  });
});

9.4.2. MapView#

  • The MapView class is used to display a map in a specific HTML container.

  • It allows you to interact with the map, including panning, zooming, and adding layers.

    • map: The WebMap instance to display.

    • container: The ID of the HTML element where the map will be rendered.

    • center: The initial center point of the map.

    • zoom: The initial zoom level of the map.

      const view = new MapView({
  map: webmaps[0],
  container: "viewDiv",
  center: mapConfigurations[0].center,
  zoom: mapConfigurations[0].zoom,
});
Contents