RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.arcgis.com/javascript/latest/tutorials/edit-feature-data/ below:

Edit feature data | Overview | ArcGIS Maps SDK for JavaScript 4.33

Learn how to add, update, and delete features in a feature service.

You can add, update, and delete features in a feature layer with the Editor component. This component allows you to edit both geometries and attributes. To use the component, you need to ensure that you have the correct credentials to access and edit the feature layer, and that the Enable Editing property is set to true in the feature layer's item page. You can verify credentials and settings on the item property page in your ArcGIS account.

In this tutorial, you will use the Editor component to add, update, and delete features in the My Points feature layer you had created in the Create a new feature layer tutorial.

Note

To learn more about editing feature data, visit Data management in the Mapping and location services guide. To learn more about services, visit Feature service.

Prerequisites ArcGIS Accounts:

You need an ArcGIS Location Platform or ArcGIS Online account.

Steps Create a feature layer to edit

Before you start the tutorial, you need to create your own feature layer hosted in ArcGIS called My Points.

Go to the Create a new feature layer tutorial and follow the steps to create a new My Points feature layer.
In your portal, click Content to access your layers.
Click My Points to open the feature layer property page.
In Overview, find the Layer Id and Service URL. For example:
- Layer Id: 70264c2e37784a819e235d3a0129832f
- Service URL: https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/my_points/FeatureServer

Note

All Layer IDs and service URLs are unique. To access the feature layer directly, you reference the layer with its url and index. In this case, the index is 0. For example: https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/my_points/FeatureServer/0

Create a new pen

To get started, either complete the Display a map tutorial or .

Get an access token

You need an access token with the correct privileges to access the location services used in this tutorial.

Go to the Create an API key tutorial and create an API key with the following privilege(s):
- Privileges
  - Location services > Basemaps
- Item access
  - Note: If you are using your own custom data layer for this tutorial, you need to grant the API key credentials access to the layer item. Learn more in Item access privileges.

In CodePen, set esriConfig.apiKey to your access token.

Use dark colors for code blocks

1
2
3
4
5
6
7
8
9
  var esriConfig = {
    apiKey: "YOUR_ACCESS_TOKEN",
  };

To learn about other ways to get an access token, go to Types of authentication.

Display a map

Follow the steps in the Display a map tutorial to add a map with the arcgis/topographic basemap layer, centered on Point Dume State Beach, Malibu, California.

Add the Editor component

The Editor component gives you the ability to add, update, and delete features interactively. The component will check the map for all editable layers and make them available automatically.

Create the Editor component inside the arcgis-map element and place the component in the top-right corner of the map.

Expand

Use dark colors for code blocks

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
    <arcgis-map basemap="arcgis/topographic" center="-118.805, 34.027" zoom="13">

      <arcgis-zoom position="top-left"></arcgis-zoom>

      <arcgis-editor position="top-right"></arcgis-editor>

    </arcgis-map>

Add script and modules

In a new <script> at the bottom of the <body>, use $arcgis.import() to add the FeatureLayer module.

The ArcGIS Maps SDK for JavaScript is available via CDN and npm, but this tutorial is based on CDN. The $arcgis.import global function accepts a module path or array of module paths, and returns a promise that resolves with the requested modules. This function can only be used when working with the CDN; otherwise, use the standard import syntax. To learn more about the SDK's different modules, visit the References page.

Expand
Use dark colors for code blocks
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
    <script type="module">
      const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");


    </script>
```

Add a feature layer

Use the FeatureLayer class to access your My Points feature layer. The feature layer will be added to the map with the layers property.

In the code editor, create a myPointsFeatureLayer and set its url property to access the My Points feature service created earlier. When using the arcgis-map component, you need to add an event listener for arcgisViewReadyChange to wait until the component is ready before adding the layer.

Expand

Use dark colors for code blocks

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
    <script type="module">
      const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");


      const viewElement = document.querySelector("arcgis-map");
      viewElement.addEventListener("arcgisViewReadyChange", () => {

        // Add feature layer (points)
        const myPointsFeatureLayer = new FeatureLayer({
          url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/my_points/FeatureServer/0",
        });

      });

    </script>

Add addMyPoints layer to the map.

Expand

Use dark colors for code blocks

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
    <script type="module">
      const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");


      const viewElement = document.querySelector("arcgis-map");
      viewElement.addEventListener("arcgisViewReadyChange", () => {

        // Add feature layer (points)
        const myPointsFeatureLayer = new FeatureLayer({
          url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/my_points/FeatureServer/0",
        });

        viewElement.map.add(myPointsFeatureLayer);

      });

    </script>

Edit features

Use the Editor component to add, update, and delete a feature.

If the application is not running, at the top-right click Run.
In the Editor, click Add feature. Click on the map to create a new feature with the following properties:
- id: 100
- name: My Point
- rating: Good
Click Add to add the feature to the map. Click < to return to the main window.
In the Editor, click Edit feature. Click on the feature you created and update its attribute values.
- id: 101
- name: Awesome Beach
- rating: Excellent
Click Update to update the feature in the map. Click < to return to the main window.
In the Editor, click Edit feature. Click on the feature you edited and then click Delete.

Run the app

In CodePen, run your code to display the map.

You should now have the ability to add, update, and delete features from your My Points feature layer.

What's next?

Learn how to use additional API features and ArcGIS services in these tutorials:

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4