Adding a web map
Web maps are comprised of a basemap layer and one or more operational layers, as well as tasks, feature collections, and pop-ups. Using the ArcGIS API for WPF, it's easy to add a web map to your application, as shown in the following steps:
- Browse ArcGIS.com or your Mobile Content Server and locate the web map you're adding to your application.
- Find the ID of the web map to add to your application.
To get the ID of a map on ArcGIS.com
On ArcGIS.com, open the details of the map to get its ID. The map's ID is the value at the end of the URL of the details page. For example, for the Topographic map with the details URL http://www.arcgis.com/home/item.html?id=d5e02a0c1f2b4ec399823fdd3c2fdebd, the ID is d5e02a0c1f2b4ec399823fdd3c2fdebd.
To get the ID of a map on a Mobile Content Server
Go to your Mobile Content Directory at http://<your server name>/<your ArcGIS instance (often ArcGIS)>/Mobile/Content/MobileWeb and browse to the map of interest. From the map's directory listing, the ID is the part of the URL following the final slash. For example, for the map http://arcgismobile.esri.com/ArcGIS/Mobile/Content/MobileWeb/Maps/items/00ab0becb052428485a8d25e62afb86d, the ID is 00ab0becb052428485a8d25e62afb86d.
- Using Visual Studio, create the application that will contain the web map.
- Add a reference to the ESRI.ArcGIS.Client, ESRI.ArcGIS.Client.Toolkit.DataSources, and ESRI.ArcGIS.Client.WebMap assemblies.
- Open the code-behind file for the application's main window (for example, MainWindow.xaml.cs).
- Add a using statement for the ESRI.ArcGIS.Client.WebMap namespace to the end of the list of using statements at the top of the code-behind file as shown in the following code example:
using ESRI.ArcGIS.Client.WebMap;
- Load the web map when the application initializes.
The Document class in the ESRI.ArcGIS.Client.WebMap namespace supports reading Web Map JSON and creating a map from it. Call the Document.GetMapAsync method, passing in the ID of the web map, to read a web map as shown in the following code example. When the map is read in, the Document.GetMapComplete event will fire. That event is implemented in step 8 below.
Document webMap = new Document(); webMap.GetMapCompleted += webMap_GetMapCompleted; webMap.GetMapAsync("d5e02a0c1f2b4ec399823fdd3c2fdebd");
- Implement the Document.GetMapCompleted event handler to add the map to the application.Note:
The following event handler adds the web map to the LayoutRoot element of your application. To add the map using the following code, your application needs to have a content presenter of that name. For example, give the main Grid in your Window an x:Name of LayoutRoot. See the following code example:
void webMap_GetMapCompleted(object sender, GetMapCompletedEventArgs e) { if (e.Error == null) LayoutRoot.Children.Add(e.Map); }
- Compile and run your application.
- To add event handling to your map, such as for the MouseClick event, wire the events to the map in the GetMapCompleted event. The map can be accessed through the GetMapCompletedEventArgs parameter. See the following code example:
void webMap_GetMapCompleted(object sender, GetMapCompletedEventArgs e) { if (e.Error == null) { LayoutRoot.Children.Add(e.Map); e.Map.MouseClick += new EventHandler<Map.MouseEventArgs>(Map_MouseClick); } }
The event can then be implemented in the code-behind and will work with the web map.