Week 11 ArcGIS JavaScript API

Week 11: ArcGIS API for JavaScript

&nbsp &nbsp

ArcGIS JavaScript API Documentation¶

API's software development kit (SDK) provide many sample code to demonstrate how to accomplist a interactive map with the API. A good way for learning the API, espically for the beginner is to find a sample that fit your needs and midify it based on your requirements.

JavaScript API in ArcGIS Pro has contents but not limited to below:

1. Key features
2. Install and Set up
3. ...

API Reference¶

Referecne > Core API Reference

Sample Code¶

• Check the code in Sandbox

You can modify the code and see the change immediately appear on the right side

basemap: "dark-gray" zoom = 10 center : []

JavaScript Github¶

JavaScript ArcGIS Pro Github Documentation

Setup API¶

Web Page Component¶

MapView¶

Create a 2D map

1. Define a basemap

2. MapView display map in 2D

3. SceneView display map in 3D

Create a 3D map

Load the map and mapview modules¶

• Load modules
• Creating instance

For the name of the module, you can have any name but make sure it is easier to keep track

The name of the module should be in the same order of module

  require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
        const map = new Map({
          basemap: "topo-vector"
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 4,
          center: [15, 65] // longitude, latitude
        });
      });

Add layers¶

Thank you Dr. John Rogan, for providing the Solar Panel data to enrich my course content! :)

Data Soucr: Clark University HERO program

Different layers

• Check link below to see how the different layers are defined in web map

The below map add the feature layer and GeoJson layer

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=featurereduction-cluster

Practice 1. Add Feature Layer¶

Feature layer can be added to the map through ArcGIS Online Service URL

Feature Layer Documentation

Add Data: Solor Panel to the map

1. Define the module
2. Add FeatureLayer

   const featureLayer = new FeatureLayer({
         url:  "https://services5.arcgis.com/FKwcDz27wRAj4HUT/arcgis/rest/services/Solar_Panel_Data/FeatureServer/0"});

3. Add FeatureLayer to the Map

map.add(featureLayer);

Map interaction using popups¶

• Respond to mouse clicks
• Provides info on
  • feature attribute
• Customizable

FeatureLayer has associated popupTemplate property¶

Check the popupTemplate Property in FeatureLayer

Practice 2: Add Popup Windown to FeatureLayer¶

Sample Code

• Create a popuptemplate object and add a title

const template = { title:"Solar Panel in Providence"};

• Add content to the PopupTemplate

Please add two fields date_built and solar_area based on sample code

Widgets¶

The LayerList widget display a list of layers and switch/off their visibility.

Practice 4: Add LayerList¶

LayerList widget display a list of layers for your map

Add title property to FeatureLayer can change the layer's name in LayerList

Legend¶

• Create a legend instance
• Add legend to view

Practice 5: Add Legend¶

Sample Code

Renderers¶

• Define a set of symbols to use for the layer
• Set the rules on how the symbols are used

First, check the render for Solar Panel in ArcGIS Online

Renderers can be accomplished by various property

Practice 6: Add Renderers¶

Sample Code