Sharing your map in a web application
In this topic
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:
- Design and share your map services.
- Make a web map in an ArcGIS organization.
- Make a web application using a web app template or Web AppBuilder for ArcGIS.
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:
- Click File > Share As > Service from the main menu.
- 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.
- 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
Make a web map in an ArcGIS organization. This can be in your ArcGIS Online organization or in Portal for ArcGIS. 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, but the steps below can be followed in Portal for ArcGIS with your data and resulting map stored on-premises.
- Open a web browser to arcgis.com.
- 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.
- Click Map. You'll see a basemap service already added for you. This is hosted by Esri.
- 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.
- Pan and zoom to your area of interest.
- 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.
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 and in Portal for ArcGIS that you can use to easily get started creating a web application. Different templates offer different layouts and functionality; to learn more, open the Portal for ArcGIS Help and navigate to Reference > Configurable apps > Configurable application templates.
Alternatively, you can create a web application using Web AppBuilder, an intuitive what-you-see-is-what-you-get (WYSIWYG) application that allows you to easily build web applications without writing code. With Web AppBuilder, you can build and customize apps that run on desktop, tablets, and smartphones with ready-to-use widgets such as querying, geoprocessing, and printing. To learn more, see About Web AppBuilder for ArcGIS in the Portal for ArcGIS Help.
The example below uses a downloaded web app template, but you can also access Web AppBuilder through the same Share dialog in Portal for ArcGIS or on ArcGIS.com under the Web AppBuilder tab in the Make a Web Application selection interface.
Every web map you save on ArcGIS.com or in Portal for ArcGIS 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.
- With your map open in ArcGIS.com, click Share.
- Click Make a Web Application.
- Select a template and click Download to save it to disk.
- From the message that appears, copy the map ID and paste it somewhere safe, like a Notepad file.
When you attempt to download a template in ArcGIS.com, you'll be shown your map ID. - Unzip your template files and open index.html in a text editor.
- 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"; - 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.
This is the same retail spending potential map as above, this time viewed inside a customizable web application.
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.