10. Web Layers and widgets

• Add Web Layers

• Widgets

• Read after finish

10.1. Adding Feature Layer into WebMap

• In this section, we will discuss how to add feature layers to a web map using the ArcGIS Maps SDK for JavaScript.

• A feature layer is a type of layer that contains a set of features (points, lines, or polygons) and their attributes.

10.1.1. Feature Layer

• The FeatureLayer class is used to create a layer that can be added to a map. It connects to a feature service and retrieves the features and their attributes. Here’s how you can add a feature layer to your map:

1. Import the FeatureLayer Class: Ensure you import the FeatureLayer class from the ArcGIS API.

  require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer"
  ], function (Map, MapView, FeatureLayer) {

2. Create a FeatureLayer Instance: Create a new instance of FeatureLayer by providing the URL to the feature service and any additional properties such as the renderer and labeling info.

• url: The URL to the feature service.

• renderer: Defines how the features in the layer should be rendered.

• labelingInfo: Provides labeling information for the features.

  const trailheads = new FeatureLayer({
    url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0",
    renderer: trailheadsRenderer,
    labelingInfo: [trailheadsLabels],
  });
  

3. Add the FeatureLayer to the Map: Add the created FeatureLayer instance to the map using the add method.

map.add(trailheads);

10.2. Customized Rendering

In this section, we will discuss how to customize the rendering of feature layers. Customizing rendering allows you to control how the features in your layer are displayed, including their symbols, colors, sizes, and labels.

10.2.1. Renderers

A renderer defines how features are visualized on the map.

• The renderer property of a FeatureLayer specifies the visual style for the features in the layer.

• There are several types of renderers, but in this example, we will focus on the SimpleRenderer.

1. SimpleRenderer: The SimpleRenderer class applies the same symbol to all features in the layer.

   • type: Specifies the type of renderer. In this case, it is “simple”.

   • symbol: Defines the symbol used for rendering. Here, we are using a picture-marker symbol with a URL to an image.

   const trailheadsRenderer = {
     type: "simple",
     symbol: {
       type: "picture-marker",
       url: "http://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png",
       width: "18px",
       height: "18px",
     },
   };
   

2. VisualVariables: These allow you to vary the symbols used to render features based on their attributes.

   • In the trails layer, the line thickness varies based on the ELEV_GAIN attribute.

   • visualVariables: An array of objects that define how to vary the symbol properties (such as size, color) based on attribute values.

   • field: The attribute field used to drive the visual variable.

   • minDataValue and maxDataValue: Define the range of data values.

   • minSize and maxSize: Define the minimum and maximum sizes for the symbol.

   const trailsRenderer = {
     type: "simple",
     symbol: {
       color: "#BA55D3",
       type: "simple-line",
       style: "solid",
     },
     visualVariables: [
       {
         type: "size",
         field: "ELEV_GAIN",
         minDataValue: 0,
         maxDataValue: 2300,
         minSize: "3px",
         maxSize: "7px",
       },
     ],
   };
   

10.2.2. Labeling

Labeling is used to display text labels for features.

• The labelingInfo property of a FeatureLayer specifies how labels should be rendered.

• symbol: Defines the text symbol for the label, including color, halo, and font properties.

• labelPlacement: Specifies the placement of the label relative to the feature.

• labelExpressionInfo: Defines the attribute field or expression used to generate the label text.

  const trailheadsLabels = {
    symbol: {
      type: "text",
      color: "#FFFFFF",
      haloColor: "#5E8D74",
      haloSize: "2px",
      font: {
        size: "12px",
        family: "Noto Sans",
        style: "italic",
        weight: "normal",
      },
    },
    labelPlacement: "above-center",
    labelExpressionInfo: {
      expression: "$feature.TRL_NAME",
    },
  };
  

10.3. Pop-up

• Popups are a powerful feature that allow you to display attribute information when a feature is clicked.

• This enhances the user experience by providing interactive and detailed information about the map features.

10.3.1. Popup Template

• Popups are configured using the popupTemplate property of the FeatureLayer.

• The popupTemplate property is an object that can contain various properties such as title, content, and fieldInfos.

1. Basic Popup Configuration: A simple popup can display text content with attribute fields.

• title: The title of the popup. It can include static text and attribute values.

• content: The HTML content of the popup. Attribute values are included using curly braces {}.

  const popupTrailheads = {
    title: "Trailhead",
    content:
      "<b>Trail:</b> {TRL_NAME}<br>\
      <b>City:</b> {CITY_JUR}<br>\
      <b>Cross Street:</b> {X_STREET}<br>\
      <b>Parking:</b> {PARKING}<br>\
      <b>Elevation:</b> {ELEV_FT} ft",
  };
  

2. Media Popups: You can include charts, images, and other media in your popup.

   • mediaInfos: Defines the media content. In this case, a line chart is displayed using the fields ELEV_MIN and ELEV_MAX.

   const popupTrails = {
     title: "Trail Information",
     content: [
       {
         type: "media",
         mediaInfos: [
           {
             type: "line-chart",
             caption: "",
             value: {
               fields: ["ELEV_MIN", "ELEV_MAX"],
               tooltipField: "Min and max elevation values",
             },
           },
         ],
       },
     ],
   };
   

10.4. Adding Widgets

• ArcGIS JavaScript API provides various widgets to enhance the functionality of your map, such as a scale bar, legend, or search widget.

• Here is more

10.4.1. ScaleBar Widget

The ScaleBar widget displays a scale bar on the map, which shows the map’s scale.

• view: The view in which the widget will be added.

• unit: Specifies the unit of measurement (metric or non-metric).

  var scaleBar = new ScaleBar({ view: view, unit: "metric" });
  view.ui.add(scaleBar, "bottom-right");
  

10.4.2. Home Widget

The Home widget allows users to return to the map’s initial extent.

var home = new Home({ view: view });
view.ui.add(home, "top-left");

10.4.3. Full-Screen Widget

The Full-screen widget enables the view to be displayed in full-screen mode.

var fullscreen = new Fullscreen({ view: view });
view.ui.add(fullscreen, "top-right");

10.4.4. LayerList Widget

The LayerList widget displays a list of layers in the map and allows users to toggle their visibility.

var layerList = new LayerList({ view: view });
view.ui.add(layerList, "top-right");

10.4.5. BasemapGallery Widget

The BasemapGallery widget allows users to switch between different basemaps.

var basemapGallery = new BasemapGallery({ view: view });
var bgExpand = new Expand({ view: view, content: basemapGallery });
view.ui.add(bgExpand, "bottom-left");

10.4.6. Search Widget

The Search widget provides a search box that allows users to find locations on the map.

var search = new Search({ view: view });
view.ui.add(search, "top-right");

10.5. Interacting with the Map

• Here is more

10.5.1. Adding a Click Event

view.on("click", function (event) {
  var lat = event.mapPoint.latitude;
  var lon = event.mapPoint.longitude;
  console.log("Latitude: " + lat + ", Longitude: " + lon);
});