Sharing your map in a web application

The most compelling web maps "tell stories" about trends and patterns over geographic space. They may explain where people are buying homes, where sea surface temperature is changing, or where elephants travel in the summer. These maps share information, not just data.

If you've only worked with ArcGIS Desktop in the past, you may wonder what process you have to follow to get your data into a compelling web map that actually tells a story. There are several steps:

  1. Design and share your map services.
  2. Make a web map.
  3. Make a web application.

Here's a summary of the above steps, with some links to more detailed help.

1. Design and share your map services

An ArcGIS Server map service takes a map that you've created in ArcMap and makes it available to a web audience. Websites can use your map services through the URL, or web address, of your server. Before you can share your information on the web, you need to design a few maps that you can make available as services.

Your design process begins in ArcMap, using the same cartographic tools you're already familiar with. When you design your map services, you need to consider that they might overlay other map services with different colors, patterns, and resolutions of data. You might also consider that the map service could be cached, or predrawn at certain scales, for fast performance. If this is the case, you can focus your cartographic design on those particular scales.

When you're ready to share your map, you don't have to leave ArcMap. Just do the following:

Steps:
  1. Click File > Share As > Service from the main menu.
  2. Complete a short wizard that helps you create a draft service. You'll need to provide a name for your service and the connection information for the server on which it will be published.
  3. Use the Analyze button to review your map for performance bottlenecks, the Preview button to see what your map will look like as a service, and the Publish button when you're finally ready to make your map service available to others.

See Publishing a map service for more detailed steps.

2. Make a web map

When you make a web map, you overlay the map services that best tell your story. Often, a web map displays a map service with business data (such as available stands of timber) on top of a map service with reference information (such as imagery or a shaded relief map). Sometimes a reference map service containing boundaries or labels is placed on top of the whole thing to create a "map sandwich": two reference layers with the "meat," or business data, in between.

ArcGIS.com is a good place to practice building a web map.

Steps:
  1. Open a web browser to arcgis.com.
  2. Click Sign In and sign in with your ArcGIS Online user name and password. This ensures that you'll be able to save and come back to the maps you make.
  3. Click Map. You'll see a basemap service already added for you. This is hosted by Esri.
  4. Click Add to add map services on top of the basemap. You can search for publicly available services, such as those hosted by Esri, or you can type the URL to your own ArcGIS Server site if it is public facing.
  5. Pan and zoom to your area of interest.
  6. Click Save and save your map. Your map information is stored on Esri's ArcGIS Online cloud and you can always come back to it using your ArcGIS Online account.

From here, you can print your map, explore it, or even edit features in it, if it includes a service on which editing has been enabled. See Working with maps in the ArcGIS.com Help for ideas of how to create and use maps. Or continue reading below to learn how to put your map in a web application.

Example of a web map in ArcGIS.com

3. Make a web application

You can share your web map for others to see on ArcGIS.com, but you might also want to create a web application with your own look and functionality that you can deploy on your organization's web server. Esri provides template applications on ArcGIS.com that you can use to easily get started creating a web application.

Every map you save on ArcGIS.com has an ID code. To get your web map inside the web application, you just need to copy this ID and paste it in the appropriate place in the template code. Then you can customize the look and title of the application to fit your needs.

Steps:
  1. With your map open in ArcGIS.com, click Share.
  2. Click Make a Web Application.
  3. Select a template and click Download to save it to disk.
  4. From the message that appears, copy the map ID and paste it somewhere safe, like a Notepad file.
    Map ID displayed in ArcGIS.com
  5. Unzip your template files and open index.html in a text editor.
  6. Paste your map ID in the appropriate place. Also customize the template to add a title, and so on.

    Below is an example of pasting your map ID in the template code. Templates will vary, so look for the code comments (denoted with //) to understand where to place your ID.

    //The ID for the map from ArcGIS.com
    webmap = "e88fc77e54a844739a7a1c5affdc6c87";
    //Enter a title, if no title is specified, the webmap's title is used.
    title = "Retail Spending Potential";
    //Enter a subtitle, if not specified the ArcGIS.com web map's summary is used
    subtitle ="Downtown Seattle and vicinity";
    
  7. Copy your modified template files into a publicly available directory on your web server. Consult your web server administrator for guidelines on where to place and expose the template files.
    Application built from an ArcGIS.com template

You can customize the web application further using the ArcGIS API for JavaScript. This API contains various "widgets" that you can include in your web application, which have been precoded for you. These include a basemap picker, similar to the one in the ArcGIS.com map viewer, and a time slider for visualizing temporal changes. If you're not sure where to start, the online help for the API contains many code samples that you can adapt to your web application.

If you are not interested in programming, but the ArcGIS.com templates do not meet your needs, consider building your web application with the ArcGIS Viewer for Flex or the ArcGIS Viewer for Silverlight. These allow you to point and click your way through the process of designing a web mapping application. When asked to choose the map to use in your application, you can reference the one you just made in ArcGIS.com. You can add geoprocessing, editing, and other widgets to your application and customize the title and layout.

Related Topics

12/18/2014