Overview

You will learn: how to use the Map Viewer to interactively sketch points, lines, and polygons.

The Map Viewer can be used to draw, edit, and save graphics in a web map. Graphics are useful when you want to quickly add a shape, such as a point that represents a place on earth, or text, such as a label that represents a geographic feature name, to your map. Graphics behave like map features. They contain a point, line or polygon geometry, attributes, and a symbol; when clicked, they can display a pop-up. Graphics can also be used as input for the analysis tools to perform spatial analysis operations. To create graphics in the Map Viewer, add a Map Notes layer to your map and then add the graphics interactively. As a developer, if you build an application that loads a web map, it will automatically draw all graphics that are present. Graphics can only be created and edited by the original web map author.

In this tutorial, you will use the Map Viewer to create, edit, and save graphics in a web map.

Steps

Create a copy of the web map

  1. Go to the LA Parks and Trails Map web map and click Sign In.

  2. Click Save > Save As > LA Parks and Trails Map with Graphics > Save Map to save a copy.

  3. In the top bar, click Basemaps > Imagery with Labels.

  4. In the Contents, uncheck the Parks and Open Spaces layer.

Create a point graphic

  1. In the top bar, type Malibu in the Search tool and select Malibu, CA, USA.

  2. In the pop-up, click Add to Map Notes to add the graphic.

  3. Click the new graphic and in the pop-up, click Edit. Set the following popup properties:

    • Title: Malibu, California
    • Description: A cool place to visit. Learn more here.
      • Use the editor to add this url to here: https://en.wikipedia.org/wiki/Malibu,_California.
    • Image URL: https://upload.wikimedia.org/wikipedia/commons/4/4f/MalibuAir.jpg
    • Image Link URL: https://en.wikipedia.org/wiki/Malibu,_California
    • Click Close and in the top bar click Edit to close the edit panel.
  4. Click the graphic and test the pop-up and links. Close the pop-up when done.

Create a line graphic

  1. In the map, click + once to zoom the map in closer.

  2. In the top bar, click + Add > Add Map Notes and set the name to Map Notes Line > Create.

  3. In Edit > Map Notes Line - Lines click Freehand Line.

  4. Click on the map and hold the mouse down to sketch a short line along the Malibu coast trail and then release when done. Set the following pop-up properties:

    • Title: Malibu Coast
    • Description: A great section of the trail with epic coastal views. Best explored from East to West.
    • Click Change Symbol and set the following:
      • Color: #FF0000
      • Transparency: 25%
      • Line Width: 4px
      • Pattern: Long Dashes
      • Arrow: Left Arrow
    • Click Ok > Close and in the top bar click Edit.
  5. Click on the line to view the pop-up.

Create polygon graphics

  1. In the map, click + once to zoom the map in closer.

  2. In the top bar, click + Add > Add Map Notes and set the name to Map Notes Polygons > Create.

  3. In Edit > Map Notes Polygons - Areas, select each of the following drawing tools to create a variety of shapes around some of the neighborhoods and features in the area:

    • Area
    • Rectangle
    • Circle
    • Freehand Area
    • Be sure to set the Title and Description for each.
    • Click Edit when you are finished.
  4. Click on each of the polygons are you are done to view the popup. Feel free to edit them futher.

  5. Save the map.

Congratulations, you're done!

Your web map should look something like this.

Challenge

Create a place graphic with a custom symbol

Use the Search tool to find Starbucks Malibu and then add it to a Map Notes layer. Change the symbol so that it better represents a coffee shop. HINT: Browse the People Places symbol category.

Create a text graphic

In the top bar, use Edit to add a text graphic above the Starbucks graphic. Change the text and the symbol color to contrast with the background.