This sample demonstrates how to add, edit, and save map notes using the MapNotesLayer and SketchViewModel in a 2D Map. Map notes can be created directly in the app, edited, and then saved as a new WebMap.

Map notes are commonly used to quickly add comments, sketches, or action items to a map. The MapNotesLayer allows you to display and modify these notes, which are typically created in the Map Viewer, but here you can create them programmatically and interactively.

This workflow allows you to create, edit, and save map notes interactively, mirroring the experience of the Map Viewer but with programmatic control and custom UI.

How to use this sample

• Use the toolbar in the top right to select a drawing tool: point, polyline, polygon, or text.
• After selecting a tool, click on the map to add a new feature. You can enter the title for the map note in the attribute panel that appears.
• After adding a graphic, click it to view its popup with the title you entered.
• To edit or move features, click the select tool, then click a feature on the map. The attribute panel will become visible so you can edit the title.
• To delete all graphics, use the delete action in the toolbar and confirm in the dialog. To delete individual features, select them and press the delete key.
• When you are ready to save, enter a title for your web map and click the Save button in the bottom right panel. The app will show a dialog with a link to the new web map or an error message if saving fails.

How it works

Create a MapNotesLayer and add it to the map

The sample creates a new MapNotesLayer and adds it to a WebMap with a gray-vector basemap. The MapNotesLayer contains sublayers for points, polylines, polygons, and text.

      // Dedicated layer for storing and managing all user-created map note graphics—including
      // points, lines, polygons, and text—on the map.
      const mapNotesLayer = new MapNotesLayer();

      // Extract individual sublayers for points, polylines, polygons, and text from the MapNotesLayer
      // for direct access and management.
      const { pointLayer, polylineLayer, polygonLayer, textLayer } = mapNotesLayer;

      // Instantiate the main WebMap, configured with a gray vector basemap and the MapNotesLayer
      // as its operational layer for displaying user notes.
      const webMap = new WebMap({
        basemap: "gray-vector",
        layers: [mapNotesLayer],
      });

      // Assign the configured WebMap to the map view element,
      // making it visible and interactive in the application UI.
      viewElement.map = webMap;

Set up SketchViewModels for each geometry type

Four SketchViewModel instances are created, one for each sublayer (point, polyline, polygon, text). Each SketchViewModel is connected to its respective sublayer, allowing independent drawing and editing.

Drawing and editing features

Use the toolbar to select a drawing tool. When you draw a feature, an attribute panel appears to let you set the title (or text for text features). The select tool enables editing of existing features. You can move, reshape, or update the title attribute. When editing, the attribute panel appears to let you update the title.

Deleting graphics

The delete action opens a confirmation dialog. Confirming will remove all graphics from all sublayers. To delete individual features, select them and press the delete key.

Saving the WebMap

Enter a title for your web map in the input field. Click the Save button. The app synchronizes the map state and saves it as a new WebMap using the WebMap.saveAs() method. A dialog displays a link to the new web map or an error message if saving fails.