Add data interactively

Help / Tutorials / Personal

In previous tutorials, you've made maps from layers created by other people. That's great up to a point, but eventually, you want to make maps from data that you've found, compiled, or created yourself. One way to do this is with an editable layer. Editable layers let you draw shapes directly on a web map and define pop-up windows for these features.

In this tutorial, you'll make a points of interest map for Redlands, California. You can tailor this kind of map to various purposes: to show points of interest in your own city, to document trips or explorations, or to map locations on a subject of interest to you: surf spots, ghost towns, airport cafes, or whatever it might be.

Open a map

Steps:
  1. Open a web browser and go to www.arcgis.com/home.
  2. Sign in, if necessary.
  3. In the Find maps, applications, and more box, type Redlands owner: ArcGISTutorials and click the Search button.
    The Find maps text box

    There should be just one search result: a map called Redlands Places.

  4. Click the thumbnail image to open the map.
    The thumbnail image in the search results

    The map opens to a view of Redlands, California.

  5. In the side panel, click the Show Contents of Map button.
    Click to show the contents of the map

    The map has just one layer: the Topographic basemap. There's not much to this map, apart from its list of bookmarks.

  6. On the ribbon, click Bookmarks and click Kimberly Crest House.
    Click the Kimberly Crest bookmark at the top of the list

    The map zooms to a hilltop flanked by orange groves and trees. The Kimberly Crest House, a local landmark, is the building circled in the image below.

    The Kimberly Crest House is circled in red on the map
    TipTip:

    Features of interest, such as buildings, streets, parks, and lakes, may be labeled on some basemaps and not others. If you're trying to identify a place, it may help to change basemaps. It so happens that none of the ArcGIS Online basemaps label the Kimberly Crest House as of this writing.

Create an editable layer and add a feature

You'll mark the Kimberly Crest House as a point of interest.

Steps:
  1. On the ribbon, click Add and choose Create Editable Layer.
    The list of choices on the Add drop-down menu
  2. In the Create Editable Layer dialog box, change the name to Points of Interest. Leave the template set to Map Notes and click Create.
    The Create Editable Layer dialog box

    The side panel becomes the Add Features panel and shows symbols for drawing features on the map. On the ribbon, the Edit button is selected. This means that you're in Edit mode and can add, delete, or move features.

    NoteNote:

    A template, in this context, is a palette of map symbols. The Map Notes template has generic symbols; other templates have more specific uses.

  3. In the Add Features panel, under Points, click the Stickpin symbol to select it.
    The Stickpin symbol in the Add Features panel
  4. Move the mouse pointer over the Kimberly Crest House and click to add a symbol.
    A Stickpin symbol on the Kimberly Crest House

    A stickpin is added to the map and a pop-up window opens.

  5. In the pop-up window, replace the default title, Point, with Kimberly Crest House.
  6. Click in the Description box and type Kimberly Crest, a three-story house in the style of a French chateau, is a popular site for weddings and events.
    The title and description in the pop-up window
  7. Click Close on the pop-up window.

    We can do a lot more with pop-up windows. We'll come back to this in a moment.

  8. On the ribbon, click the Details button.
    The Contents panel showing the Points of Interest layer

    In the Contents panel, the layer you created appears above the basemap layer.

  9. On the ribbon, click the Save button and choose Save As.
  10. On the Save Map dialog box, change the title if you want to, and click Save Map.
    The Save Map dialog box with a new title

    The map is added to your My Content page.

Link the pop-up window to an image and a website

Now you'll reopen the pop-up window for the Kimberly Crest House and add links to an online image and a website. You can link to images hosted on any public website, such as social media and photo-sharing sites.

Steps:
  1. On the map, click the stickpin for the Kimberly Crest House.

    The feature is selected and its pop-up window opens.

  2. On the pop-up window, click Edit.
    The pop-up window for the Kimberly Crest House
  3. Open a new browser tab or window to www.kimberlycrest.org.
  4. Open another browser tab or window to www.panoramio.com/user/387885.

    This Panoramio page has pictures by Esri employee Piotr Andzel.

  5. On the Panoramio page, find the image of Kimberly Crest Park, Redlands. Right-click the image and copy the image location.
    The context menu for the image in the Firefox browser
    6. TipTip:

    You need to copy the image location—that is, the image's URL—not the image itself. In Mozilla Firefox (v. 13), the command is Copy Image Location. In Google Chrome (v. 19), it's Copy Image URL. In Microsoft Internet Explorer (v. 8), click Properties on the context menu, then highlight and copy the address (URL) on the Properties dialog box.

  6. Go back to the web map. In the Image URL box of the pop-up window, highlight and delete the http:// prefix.
  7. Use CTRL+V to paste the image location into the Image URL box.
    The Image URL box on the pop-up window
  8. Now go to the browser tab or window with the Kimberly Crest website. Highlight the URL and use CTRL+C to copy it.
    The URL of the Kimberly Crest website
  9. Go back to the map. In the Image Link URL box, highlight and delete the http:// prefix. Use CTRL+V to paste the URL.

    When a map user clicks the stickpin symbol, the pop-up window will show a thumbnail version of the image. Clicking the thumbnail will open the website.

  10. In the pop-up window, click in the Description box and place the cursor at the end of the text you entered before. Press ENTER twice.
  11. Type Image courtesy of Piotr Andzel. Click image to open web page.
  12. Highlight the text you just entered. On the pop-up window toolbar, click the Italic button The Italic button.
  13. Look over your pop-up window, then click Close.
    The completed pop-up window
  14. On the ribbon, click the Edit button to leave edit mode.

    The side panel disappears. It will come back if you click the Details button or the Edit button.

    15. LINKING TO IMAGES

    Issues of copyright protection and fair use with respect to image links may need consideration on your part. (Image links point to an image on a host computer while displaying, typically, a small, low-resolution version of the image on a client computer.) In this case, the photographer has given permission to link to the images.

Test the pop-up window

You should make sure the pop-up window looks and works the way you want it to.

Steps:
  1. On the map, click the stickpin for the Kimberly Crest House.
    The pop-up window showing a thumbnail image of the Kimberly Crest House

    You should see a thumbnail version of the image (showing a view of the gardens from the house).

    2. TipTip:

    Images with a landscape orientation fit the image space better than those with a portrait orientation.

  2. Click the thumbnail image.

    The Kimberly Crest website should open in a new browser tab or window.

  3. Close the browser tab or window that just opened to the Kimberly Crest website.
  4. Leave the Panoramio web page open, but close the other instance of the Kimberly Crest website. Go back to the map.

Change a symbol

You might want to use a symbol other than the green stickpin.

Steps:
  1. If necessary, click the Kimberly Crest stickpin to open the pop-up window.
  2. At the bottom of the pop-up window, click Edit.
    The Edit link on the pop-up window

    The pop-up window becomes editable.

  3. At the bottom of the pop-up window, click the Change Symbol button.
  4. On the Change Symbol dialog box, scroll through the list of basic symbols.
    The Change Symbol dialog box

    The basic symbols include stickpins, pushpins, flags, and other icons.

  5. Click the drop-down arrow, currently set to Basic, and choose the People Places symbol set. Scroll through those symbols.
  6. Look at some other symbol sets. Find a symbol you want to use and click to select it.
  7. Optionally, change the symbol size with the slider bar or by typing a value in pixels.
  8. Click Done on the Change Symbol dialog box.
    The Change Symbol dialog box with a red star selected from the Shapes symbol set
  9. Click Close on the pop-up window.

    The new symbol appears on the map.

    The Kimberly Crest House with a red star symbol
  10. Save the map.
    NoteNote:

    The Points of Interest layer will eventually include diverse features like buildings, parks, and streets. You can use a single symbol to represent all these features or a different symbol for each feature type (one symbol for buildings, another for parks, and so on).

Add another feature

Steps:
  1. Confirm that the map is in edit mode. (The Edit button is selected on the ribbon.)
    TipTip:

    Click the Edit button to toggle the map in and out of Edit mode.

  2. On the ribbon, click Bookmarks and choose Morey Mansion.
    Morey Mansion is highlighted in the list of bookmarks

    The map zooms to the site circled in the image below. Like Kimberly Crest, the Morey Mansion isn't labeled on the basemap (as of this writing).

    The Morey Mansion building footprint is circled on the image
  3. In the Add Features panel, click the Stickpin symbol to select it.
    The Stickpin symbol
  4. Move the mouse pointer over the Morey Mansion and click to add a symbol.
    A Stickpin symbol on the Morey Mansion
  5. In the pop-up window, replace the default title (Point) with Morey Mansion.
  6. Click in the Description box and type The Morey Mansion is a privately owned, three-story Victorian house from 1890.
  7. Press ENTER twice and type Image courtesy of Piotr Andzel. Click image to open web page.
  8. Make this last text italic.
    The Morey Mansion pop-up window with a title and description
  9. Go to the Panoramio web page with photos by Piotr Andzel. Scroll down and find the Morey Mansion image.
  10. Right-click the image and copy the image location (using the appropriate command for your browser).
    The context menu for the image in the Firefox browser
  11. Go back to the map. In the pop-up window Image URL box, delete the http:// prefix, then use CTRL+V to paste the link.
  12. Open a new browser tab or window to wikipedia.org/wiki/Morey_Mansion. Highlight the web page URL and use CTRL+C to copy it.
  13. Go back to the map. In the pop-up window Image Link URL box, delete the http:// prefix. Use CTRL+V to paste the link.
    The Image URL and Image Link URL boxes in the pop-up window
  14. At the bottom of the pop-up window, click Change Symbol.
  15. In the Change Symbol dialog box, choose the symbol you want to use.
    The red star is selected in the Shapes symbol set
  16. Change the symbol size if you want, then click Done.
  17. On the pop-up window, click Close.
  18. On the ribbon, click the Edit button to leave edit mode.

Test the pop-up window for the feature

Steps:
  1. Click the Morey Mansion symbol to open its pop-up window.
    The Morey Mansion pop-up window
  2. Click the thumbnail image to open the Wikipedia entry for the Morey Mansion.
  3. If necessary, edit the pop-up window description or links.
  4. Leave the Panoramio web page open, but close any tabs or windows open to the Morey Mansion web page.
  5. Go back to the map and close the pop-up window.
  6. Zoom to the Redlands Overview bookmark. (It's at the bottom of the list.)
  7. Save the map.
    The symbols for the Kimberly Crest House and the Morey Mansion on the map

Add features on your own

Add some more features on your own. All the bookmarked locations in the map have corresponding photos on the Panoramio site. (Note that the photos span two pages.)

Most of the remaining sites are labeled on the Topographic basemap, but a few (the Olive Avenue Market, the Asistencia Mission, and the Santa Fe Depot) are not. Try using other basemaps, especially OpenStreetMap, to pinpoint these locations. Or Google the sites for address information that you can enter in the Find Address or place box.

As for websites, you can link to the examples below or to web resources you discover yourself.

Olive Avenue Market

website

All parks

website

Redlands Bowl

website

Asistencia Mission

website

State Street

website

Smiley Library

website

Santa Fe Depot

website

You may also want to mash up your editable layer with existing map services for Redlands. Use the keyword "Redlands" to search ArcGIS Online for layers that might enhance your map.

USING DIFFERENT SHAPES IN AN EDITABLE LAYER

You can use all sorts of shapes to create features in an editable layer. You can mark buildings with a point symbol, such as a Stickpin; draw routes with a line symbol, such as Line or Freehand Line; and use area symbols, such as Area, Rectangle, or Circle, to show neighborhoods or other areas of interest that aren't defined on your basemap.

This is the seventh in a series of online mapping tutorials.