Web Layers and widgets¶

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.

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:

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) {

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],
});

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

map.add(trailheads);

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.

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.

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",
  },
};
```
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",
    },
  ],
};
```

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",
  },
};

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.

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.

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",
};

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",
          },
        },
      ],
    },
  ],
};

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

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");

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");

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");

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");

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");

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");

Interacting with the Map¶

Here is more

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);
});

Example: Zoom to selected feature¶

Setting Up the Click Event Listener
- To add click functionality to the map, you use the view.on("click", function (event) {...}) method.
- This method sets up an event listener that triggers every time the user clicks on the map.
```
view.on("click", function (event) {
    view.hitTest(event).then(function (response) {
        ...
    });
});
```
Performing a Hit Test
- The view.hitTest(event) method performs a hit test at the location where the user clicked.
- A hit test identifies features at a given screen coordinate. The results of the hit test are processed within the then function.

Filtering Hit Test Results

The hit test results are filtered to find graphics that belong to the specific layers you are interested in (trailheads, trails, parks).
The filter method ensures that only relevant features are processed.

if (response.results.length > 0) {
 const graphic = response.results.filter((result) => {
     return (
     result.graphic.layer === trailheads ||
     result.graphic.layer === trailsLayer ||
     result.graphic.layer === parksLayer
     );
 })[0].graphic;

Checking for Valid Graphics

After filtering, it checks if a valid graphic was found.
If a graphic is found, the map view zooms into the feature and opens a pop-up at the location where the user clicked.

if (graphic) {
  view.goTo({
    target: graphic.geometry,
    zoom: 15,
  });

  view.popup.open({
    features: [graphic],
    location: event.mapPoint,
  });
}

Handling Clicks Outside of Features
- If the hit test does not find any features (the user clicked on an empty area of the map), the pop-up is closed.

view.on("click", function (event) {
  view.hitTest(event).then(function (response) {
    if (response.results.length > 0) {
      const graphic = response.results.filter((result) => {
        return (
          result.graphic.layer === trailheads ||
          result.graphic.layer === trailsLayer ||
          result.graphic.layer === parksLayer
        );
      })[0].graphic;

      if (graphic) {
        view.goTo({
          target: graphic.geometry,
          zoom: 15,
        });

        view.popup.open({
          features: [graphic],
          location: event.mapPoint,
        });
      }
    } else {
      view.goTo(originalView);
      view.popup.close();
    }
  });
});

Web Layers and widgets¶

Adding Feature Layer into WebMap¶

Feature Layer¶

Customized Rendering¶

Renderers¶

Labeling¶

Pop-up¶

Adding Widgets¶

ScaleBar Widget¶

Home Widget¶

Full-Screen Widget¶

LayerList Widget¶

BasemapGallery Widget¶

Search Widget¶

Interacting with the Map¶

Adding a Click Event¶

Example: Zoom to selected feature¶

Web Layers and widgets¶

Adding Feature Layer into WebMap¶

Feature Layer¶

Customized Rendering¶

Renderers¶

Labeling¶

Pop-up¶

Popup Template¶

Adding Widgets¶

ScaleBar Widget¶

Home Widget¶

Full-Screen Widget¶

LayerList Widget¶

BasemapGallery Widget¶

Search Widget¶

Interacting with the Map¶

Adding a Click Event¶

Example: Zoom to selected feature¶