Add a map to your app
In this topic
At the heart of most ArcGIS Runtime SDK for .NET apps are the
Map controls. These controls allow you to easily add a map to your app with a few lines of XAML or .NET code. See the Use the MapView to display a map topic for details about using these controls.
This tutorial guides you through the process of creating a Hello, World Map app using Microsoft Visual Studio and the ArcGIS Runtime API. It introduces you to the basics of working with ArcGIS Runtime SDK for .NET and describes fundamental principles to help your future app development. Your completed app will contain a simple map that displays at a specified initial extent when opened.
This tutorial requires a supported version of Microsoft Visual Studio and ArcGIS Runtime SDK for .NET. Refer to the appropriate topics in the guide for information on installing the SDK and system requirements.
Familiarity with Visual Studio and a basic understanding of XAML is recommended but not required.
Create a WPF app
You'll use Visual Studio to create a WPF app.
- Open a supported version of Microsoft Visual Studio.
File > New > Project(or click
New Projecton the
Startpage) to create a project.
Windows Desktop > WPF Applicationin the
New Projectdialog box (you can create your project in either C# or VB .NET).
Visual Studio 2015 organizes project types slightly differently. You'll find WPF Application projects under
Windows > Classic Desktop
ArcGIS Runtime SDK for .NET provides a project template for creating your mapping app, called ArcGIS Runtime 10.2.7 for .NET App. Creating your project from the template will add the appropriate references and a page with a map view containing a single base layer. In this tutorial, you'll build your app from a blank template.
- Choose a folder location for your new project and name it
OKto create the project.
Your project opens in Visual Studio and contains a single WPF window called
- Right-click the
Referencesnode under the
HelloWorldMapproject listing in the Visual Studio Solution Explorer window, and click
Add Referencein the context menu.
- Check the listing for the
Assemblies > Extensions.
OKto add the reference to ArcGIS Runtime for .NET.
Now that you've created a blank project and referenced ArcGIS Runtime SDK for .NET, you're ready to add a map to your app. ArcGIS Runtime allows you to work with geographic data from a variety of sources, including those local to your app as well as data provided remotely as an Internet service. In this tutorial, you'll display street data from a public map service provided by ArcGIS Online.
- Double click the
MainWindow.xamlfile in the Visual Studio Solution Explorer to open it in the designer.
- Go to the
XAMLview of the designer, and add the following XML namespace reference to the
WindowXAML element. Visual Studio offers IntelliSense to help complete the URL portion of the statement.
- Add the following XAML inside the
<Grid>element to define a new
Mapon the page:
<esri:MapView x:Name="MyMapView"> <esri:Map x:Name="MyMap"> </esri:Map> </esri:MapView>
- Add the following XAML inside the
<Map>element to define a new layer to display in the map:
<esri:ArcGISTiledMapServiceLayer ID="BaseMap" ServiceUri="http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
ArcGISTiledMapServiceLayerrepresents a map layer based on a cached map service hosted by ArcGIS for Server. The
IDproperty provides a unique identifier for the layer that can be used to refer to the layer programmatically (although you won't need to in this tutorial).
ServiceUridefines the source for the layer. The layer in your map will come from a tiled map service hosted on ArcGIS Online.
In addition to the World imagery map, ArcGIS Online provides basemaps of streets, topographic data, historical maps, and many others. Visit Living Atlas of the World to browse some of the available basemaps. If you find a basemap you'd like to use in your app, you can copy the service URI from its description page.
- Click the
Startbutton on the
DEBUG > Start Debugging) to start your app. You'll see a map similar to the following:
By default, the map displays at the full extent of the first (bottom) layer it contains. To show the initial view of the map at a particular location, you can add logic to the map's XAML or programmatically adjust the extent when the app starts. To practice setting the initial extent, proceed to the next section.
XAMLdesigner, you must first make a reference to the XML namespace for ArcGIS Runtime.
MapViewcontrol and define a layer to display.
As a finishing touch to your app, you will add a
ViewpointExtent element to the map's XAML to define the extent at which the map should initially be displayed.
- Add the following XAML inside your
Mapelement. It can go either before or after the existing
<esri:Map.InitialViewpoint> <esri:ViewpointExtent XMin="-9113800" YMin="5077300" XMax="-9078300" YMax="5091800"/> </esri:Map.InitialViewpoint>
The previous XAML sets the map's
InitialViewpointproperty with an
ViewpointExtentelement that defines the desired extent (centered on Cleveland, Ohio USA). The dimensions of the envelope are specified with Web Mercator coordinate values to match the coordinate system of the map.
- Run the app again. The map displays with an initial extent centered on Cleveland Ohio, as shown in the following screen capture:
Here is the complete XAML for the app:
<Window x:Class="HelloWorldMap.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:esri="http://schemas.esri.com/arcgis/runtime/2013" Title="MainWindow" Height="350" Width="525"> <Grid> <esri:MapView> <esri:Map x:Name="MyMap"> <esri:Map.InitialViewpoint> <esri:ViewpointExtent XMin="-9113800" YMin="5077300" XMax="-9078300" YMax="5091800"/> </esri:Map.InitialViewpoint> <esri:ArcGISTiledMapServiceLayer ID="BaseLayer" ServiceUri="http://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer"/> </esri:Map> </esri:MapView> </Grid> </Window>
That's it. You created a simple map app with only a few lines of XAML. As a next step, consider exploring the functionality provided by ArcGIS Runtime SDK for .NET by stepping through more advanced tutorials or by examining the many samples provided with the SDK.