This is a second in a series of posts covering the new ArcGIS Runtime (beta). In the last post we walked through creating a simple map app. In this post we’ll start to cover the different layers your map can have. A Layer can be map images like what you would see in Google or Bing Maps. Or a Layer can represent the physical location of items. Layers can be toggled on and off through the IsVisible property. You can also adjust the transparency of a layer with the Opacity property.
The ArcGIS Runtime SDK comes with 12 different types of map layers that you can use in your app! Some of these I’ll cover in detail in this blog, some I’ll just barely cover, and some will have whole blogs dedicated to them. I like to group the layers into two basic categories. The layers for “basic mapping” and layers for “GIS users”. I consider basic mapping to be any app in the store that uses a map in any way. Some examples would be Four Square, or Disney Expedition. Layers for GIS users are needed for the types of applications that I write for Schneider Electric. Applications that have a heavy workflow around GIS data or using Esri services need “GIS Layers”. Most of the apps that you write should be fine with the Basic Mapping layers.
- Basic Mapping
- GIS Users
- ArcGISDynamicMapServiceLayer
- ArcGISImageServiceLayer
- ArcGISLocalTiledLayer
- FeatureLayer
- GeoRssLayer
- WmsLayer
- WmtsLayer
This blog post will cover the Basic Mapping layers. Another post will cover the GIS User layers
Basic Mapping
ArcGISTiledMapServiceLayer
Of all the “ArcGIS” layers, this is the only one that makes it into the Basic Mapping section. All of the layers prefixed with ArcGIS work specifically with ArcGIS Server services. They know what URIs to go to for map images for an area or other information about the content of the layers. The ArcGISTiledMapServiceLayer makes it into the Basic Mapping category because Esri offers many great up-to-date tiled maps for free. That’s right, you can use any of the MapServer services located at http://services.arcgisonline.com/ArcGIS/rest/services. If we ignore the folders (which contain even more services), Esri offers 12 tiled services.
All of these services use either a standard WGS84 projection or a Web Mercator projection.
UPDATE: I was told that all of the WGS84 services have been deprecated in favor of the Web Mercator services. So you should not use the ESRI_Imagery_World_2D service. Instead use the World_Imagery service.
Using the ArcGISTilesMapServiceLayer in your app is really simple. Click on a link for one of the services that you would like to use in your app. I will pick “World_Street_Map”. Copy the URL of the service from your browser. For me it will be http://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer. This URL will be the ServiceUri for the layer. The following XAML will allow you to use the Layer in your map app.
<esri:MapView>
<esri:MapView.Map>
<esri:Map>
<layers:ArcGISTiledMapServiceLayer
ServiceUri="http://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer"/>
</esri:Map>
</esri:MapView.Map>
</esri:MapView>
It’s that easy to start using free maps with the ArcGIS Runtime SDK and the ArcGISTiledMapSerivceLayer!
BingLayer
The ArcGIS Runtime comes with out-of-the-box support for Bing map images! The BingLayer requires a key from the Bing maps portal. When working with the BingLayer, you can specify if you want an aerial, aerial with labels, or a road map through the MapStyle property. The default map style is Road. I won’t get into a lot of detail about the Bing maps portal, but keep in mind that you will have to pay for the usage of the map data if requests are over 50,000 in 24 hours. To use the BingLayer in your app, use the following XAML.
<esri:MapView>
<esri:MapView.Map>
<esri:Map>
<layers:BingLayer Key="YOUR-BING-KEY" MapStyle="AerialWithLabels"/>
</esri:Map>
</esri:MapView.Map>
</esri:MapView>
Which produces the following map
GraphicsLayer
The GraphicsLayer is used to show any “client side” data. Think of it as the place for your map pins. The GraphicsLayer has changed from older versions of the .NET SDKs. In the past you were able to style a Graphic any way you wanted in XAML. The new API does all of it’s rendering in C++. With the rendering that deep, it can’t use XAML. They do provide some nice out of the box ways to draw your symbols. The GraphicsLayer is basically like a ItemsControl. You add items to the Graphics collection much like you would the Items of an ItemsControl. You can also bind the GraphicsSource to an IEnumerable<Graphic> just like you would the ItemsSource of an ItemsControl. Unlike an ItemsControl, the GraphicsLayer cannot accept any object into it’s collection. You can only add Graphic objects.
For this sample we need two layers in our Map. One for a base map and our GraphicsLayer. We’ll add new Graphics to the map whenever you tap or click the map. We’ll also define what we want our “map pin” to look like in the page resources. You can specify how each individual Graphic should look, or define a Render for the GraphicsLayer. For this we’ll specify that every Graphic should render an ‘X’ on the map.
<Page.Resources>
<symbols:SimpleMarkerSymbol x:Key="GraphicSymbol" Color="#FF0A57FC" Size="12" Style="X" />
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<esri:MapView MapViewTapped="OnMapViewTapped">
<esri:MapView.Map>
<esri:Map>
<layers:ArcGISTiledMapServiceLayer ServiceUri="http://services.arcgisonline.com/arcgis/rest/services/ESRI_StreetMap_World_2D/MapServer"/>
<layers:GraphicsLayer>
<layers:GraphicsLayer.Renderer>
<symbols:SimpleRenderer Symbol="{StaticResource GraphicSymbol}"></symbols:SimpleRenderer>
</layers:GraphicsLayer.Renderer>
</layers:GraphicsLayer>
</esri:Map>
</esri:MapView.Map>
</esri:MapView>
</Grid>
In our code behind we’ll add new graphics to the map in the OnMapViewTapped method.
private void OnMapViewTapped(object sender, MapViewInputEventArgs e)
{
var mapView = (MapView)sender;
var graphicsLayer = (GraphicsLayer)mapView.Map.Layers[1];
graphicsLayer.Graphics.Add(new Graphic(e.Location));
}
The GraphicsLayer requires a lot more information than this overview blog so I have two more blogs that are dedicated to this topic.
CsvLayer
The CsvLayer is a new addition to the ArcGIS Runtime. This handy layer allows you to use a csv file as the source of data for a map. Suppose you have a file with all of the locations of Starbucks. The CsvLayer allows you to use this file to show locations on a map! This file can be located online, or it can be local file. As of writing this, XAML only allows for an online file through the ServiceUri property. If you have a local file with your app, or would like to allow the user to specify a file, you can use the SetSourceAsyc method. The CsvLayer is a type of GraphicsLayer. So you can use the Graphics or GraphicsSource properties directly, but you shouldn’t need to. Just like with the GraphicsLayer, you define what the Graphics should look like with the Render property.
<Page.Resources>
<symbols:SimpleMarkerSymbol x:Key="GraphicSymbol" Color="#FF0A57FC" Size="12" Style="X" />
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<esri:MapView >
<esri:MapView.Map>
<esri:Map>
<layers:ArcGISTiledMapServiceLayer
ServiceUri="http://services.arcgisonline.com/arcgis/rest/services/ESRI_StreetMap_World_2D/MapServer"/>
<layers:CsvLayer ServiceUri="http://VisuallyLocated.com/samples/starbucks_sample.csv">
<layers:CsvLayer.Renderer>
<symbols:SimpleRenderer Symbol="{StaticResource GraphicSymbol}"></symbols:SimpleRenderer>
</layers:CsvLayer.Renderer>
</layers:CsvLayer>
</esri:Map>
</esri:MapView.Map>
</esri:MapView>
</Grid>
In the above XAML, I’m have a file with a few locations of Starbucks around the US. Here is what it looks like.
OpenStreetMapLayer
The OpenStreetMapLayer is also a new addition to the SDK. As you can guess, it displays the Open Street Map data. This is one of those things that “just works”.
<esri:MapView>
<esri:MapView.Map>
<esri:Map>
<layers:OpenStreetMapLayer />
</esri:Map>
</esri:MapView.Map>
</esri:MapView>
Here is the app showing Open Street Map data for Colorado.
You can download a solution demonstrating all five of these layers in a Windows Store and Windows Phone app.
Read part 2: Working with the MapView control in the ArcGIS Runtime